/* =========================================================
   Global Reset / Defaults
   =======================================================*/
:root{
  --bg:#0d0d0f;
  --bg-card:#1a1a1d;
  --bg-header:#111114;
  --border:#2c2c33;
  --text:#e6e6f0;
  --text-dim:#a0a0ac;

  --link:#4da6ff;
  --link-hover:#80c1ff;

  /* Brand palette */
  --brand:#46d4ff;
  --brand-soft:#1f6cff;
  --accent:#ff4fd8;
  --accent-2:#26d6ff;

  --ok:#22c55e;
  --danger:#ef4444;

  /* Player specific */
  --gp-time-color:#0e1224;

  /* Missing vars used by header styles */
  --panel:#0f1118;
  --panel-soft:#131828;
  --ink:#e6ecff;
  --muted:#8d99b8;
  --border-subtle:rgba(255,255,255,.06);
  --radius-md:12px;
  --shadow-soft:0 18px 45px rgba(0,0,0,.5);

    /* Border system */
  --card-bg:#121212;
  --card-radius:12px;
  --card-border-weight:1px;

 /* Gradient used for borders */
  --igc-border-gradient: linear-gradient(90deg, var(--brand) 0%, var(--accent) 55%, var(--brand-soft) 100%);
  /* Default border style: gradient (can be overridden by body classes) */
  --igc-card-border: var(--igc-border-gradient);


  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  font-size:16px;
  line-height:1.5;
}

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

body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

/* wider page so tables breathe */
.wrap{ max-width:1200px; margin:0 auto; padding:16px; width:100%; }

/* =========================================================
   Header / Nav (mobile wraps)
   =======================================================*/
.site-header {
  position: sticky; top:0; z-index: 1000;
  background:
    linear-gradient(180deg, rgba(31,108,255,.14), rgba(255,79,216,.12)),
    linear-gradient(180deg, var(--panel), rgba(14,17,25,.65));
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
  overflow: visible;
}

/* contained vs full-width */
.site-header .container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding-inline:16px;
}
.site-header.full .container{
  max-width:none;
  width:100%;
  padding-inline:24px;
}

.site-header::before {
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand-soft));
  opacity:.75;
}

.header-row {
  display:flex; align-items:center; gap:1rem;
  min-height:72px;  /* taller to clear bigger logo */
}

/* Brand */
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; overflow:visible; }
.brand-mark { width:96px; height:96px; filter: drop-shadow(0 6px 18px rgba(70,212,255,.15)); }
.brand-stack { display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.brand-word { font-weight:700; letter-spacing:.2px; font-size: clamp(1.15rem, 1.4vw + .9rem, 1.65rem); }
.brand-tag { font-size:.78rem; color:var(--muted); }

/* Gradient text using the IGC palette */
.igc-gradient-text {
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 60%, var(--brand-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Nav pills */
.main-nav { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.nav.pill {
  --outline: rgba(255,255,255,.08);
  color: var(--ink); text-decoration:none; padding:.45rem .8rem;
  border:1px solid var(--outline);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) ,
    radial-gradient(120% 200% at -10% 0%, rgba(70,212,255,.10), transparent 40%),
    radial-gradient(120% 200% at 110% 0%, rgba(255,79,216,.10), transparent 40%);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav.pill:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 6px 22px rgba(31,108,255,.15), inset 0 0 0 999px rgba(255,255,255,.01);
  transform: translateY(-1px);
}
.nav.pill.active {
  border-color: transparent;
  color: #0b0e17;
  background: linear-gradient(90deg, var(--brand), var(--accent)) border-box;
  box-shadow: 0 8px 28px rgba(255,79,216,.18), 0 4px 12px rgba(70,212,255,.12);
}

/* Mobile toggle */
.nav-toggle { color: var(--ink); background: transparent; border: 1px solid var(--border-subtle);
  border-radius: 10px; padding:.35rem; display:none; }
@media (max-width: 960px){
  .nav-toggle { display:inline-flex; }
  .main-nav[data-mobile] { display:none; }
  .nav-toggle[aria-expanded="true"] + .main-nav { display:flex; flex-wrap:wrap; gap:.5rem; }
}

/* Avatar with gradient ring */
.avatar-ring {
  position: relative; display:inline-grid; place-items:center; padding:2px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.user-area .avatar { width:28px; height:28px; border-radius:999px; display:block; }

/* User menu panel */
.user-menu summary { list-style:none; display:flex; align-items:center; gap:.4rem; cursor:pointer; }
.user-menu summary::-webkit-details-marker { display:none; }
.user-menu .chev { opacity:.7; }
.user-menu[open] .chev { transform: rotate(180deg); transition:.15s; }
.user-menu .menu {
  position:absolute; right:0; margin-top:.6rem; min-width:180px; padding:.5rem;
  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
  border:1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.user-menu .menu a { display:block; padding:.5rem .6rem; color:var(--ink); text-decoration:none; border-radius:10px; }
.user-menu .menu a:hover { background: rgba(255,255,255,.04); }
.user-menu .menu hr { border:0; border-top:1px solid var(--border-subtle); margin:.4rem 0; }

/* Shrink on scroll */
@media (min-width: 961px){
  .site-header.is-scrolled .header-row { min-height:60px; transition:min-height .18s ease; }
  .site-header.is-scrolled .brand-mark { width:44px; height:44px; transition:.18s; }
  .site-header.is-scrolled .brand-word { font-size:1.05rem; }
}

/* =========================================================
   Footer
   =======================================================*/
.site-footer{
  background:var(--bg-header);
  border-top:1px solid var(--border);
  text-align:center;
  padding:12px 0;
  margin-top:auto;
  color:var(--text-dim);
  font-size:.9rem;
}

/* =========================================================
   Cards / Layout Helpers
   =======================================================*/
.card{
  position:relative;
  border: var(--card-border-weight) solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--igc-card-border) border-box;
  padding:20px;
  margin:20px 0;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}


/* =========================================================
   Buttons
   =======================================================*/
.btn,.btn-secondary{
  display:inline-block; padding:8px 14px; border-radius:6px;
  font-weight:600; cursor:pointer; transition:background .2s, color .2s;
}
.btn{ background:var(--accent); border:none; color:#fff; }
.btn:hover{ background:#2563eb; }
.btn-secondary{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-secondary:hover{ background:var(--border); }

/* =========================================================
   Forms
   =======================================================*/
label{ display:block; margin:10px 0 4px; font-weight:500; }
input,textarea,select{
  width:100%; padding:10px; border-radius:6px; border:1px solid var(--border);
  background:#101012; color:var(--text); font-size:1rem;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent);
}

/* =========================================================
   Flash
   =======================================================*/
.flash{ padding:12px; border-radius:6px; margin:12px 0; }
.flash.ok{ background:rgba(34,197,94,.15); border:1px solid var(--ok); color:var(--ok); }
.flash.err{ background:rgba(239,68,68,.15); border:1px solid var(--danger); color:var(--danger); }

/* =========================================================
   Tables
   =======================================================*/
table{ border-collapse:collapse; width:100%; margin:10px 0; font-size:.95rem; }
th,td{ border:1px solid var(--border); padding:8px 12px; text-align:left; }
th{ background:#1f1f24; font-weight:600; }
tr:nth-child(even){ background:#141418; }

/* Gradient hover for legacy .logo spans if used */
.logo span{ transition:color .2s; }
.logo:hover span{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* tighten cards on small screens */
@media (max-width:640px){
  .wrap{ padding:12px; }
  .card{ margin:14px 0; padding:16px; }
}

/* =========================================================
   IGM Player
   =======================================================*/

/* Reserve space so content doesn't sit under the fixed bar */
.igm-has-player { padding-bottom: 76px; }

/* Fixed container at bottom; transparent so only the pill shows */
#globalPlayer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; }
#globalPlayer, #globalPlayer * { pointer-events: auto; }
#gp-bar { padding: 0; background: transparent; }

/* The pill that carries the gradient + rounding, centered and not full-width */
#gp-bar .gp-surface{
  width: clamp(340px, 92vw, 1200px);
  margin: 0 auto;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 38%, var(--accent) 100%);
  border-top: 1px solid #2b2d3a;
  box-shadow: 0 -10px 28px rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.03) inset;
}

/* Inner row */
#gp-bar .gp-surface > .wrap{
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Controls */
#globalPlayer .iconbtn{
  width:34px;height:34px;border-radius:12px;border:1px solid #2b2d3a;
  background:#10121a;color:#f0f1f7;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease, transform .05s ease, box-shadow .12s ease;
}
#globalPlayer .iconbtn:hover{ background:#161927; }
#globalPlayer .iconbtn:active{ transform: translateY(1px); }
#btn-shuffle[aria-pressed="true"]{ box-shadow:0 0 0 2px #4e44a8 inset; background:#1c1542; }

/* Chips */
#globalPlayer .chip{
  padding:6px 12px;border:1px solid #2b2d3a;border-radius:10px;background:#0f1014;color:#eaeaea;cursor:pointer;
}

/* Now playing */
#globalPlayer .gp-now{ display:flex; align-items:center; gap:10px; min-width:200px; flex:1; }
#gp-art{ width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:#0f0f12;object-fit:cover;display:block; }
#gp-title{ flex:1;color:#f0f1f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:120px;font-weight:600;letter-spacing:.2px; }

/* Meter + sliders + darker time */
#globalPlayer .meter{ display:flex; align-items:center; gap:10px; min-width:260px; flex:0 0 auto; max-width:540px; }
#gp-time{
  color: var(--gp-time-color);
  font-variant-numeric: tabular-nums;
  white-space:nowrap; line-height:1;
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 0 6px rgba(0,0,0,.25);
  mix-blend-mode: multiply;
}
#globalPlayer input[type="range"]{
  appearance:none;height:8px;border-radius:999px;outline:none;border:1px solid #00000040;
  background: linear-gradient(90deg, var(--accent) var(--fill,0%), #202231 var(--fill,0%));
}
#globalPlayer input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:16px;height:16px;border-radius:50%;
  background:#ffffff;border:2px solid #9a86ff;box-shadow:0 0 0 3px rgba(124,97,255,.18);
}
#globalPlayer input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #9a86ff;box-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* Drawer list uses its own scroll */
#gp-list{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling: touch; }
#gp-list{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
#gp-list::-webkit-scrollbar{ width:10px; }
#gp-list::-webkit-scrollbar-track{ background:transparent; }
#gp-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
}
#gp-list::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.38); }

/* =========================================================
   Playlist Drawer
   =======================================================*/
.gp-drawer{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom: 64px; display:none; max-height:44vh;
  min-width:360px; max-width:860px;
  background:#141414;border:1px solid #2a2a2a;border-radius:12px;
  box-shadow:0 12px 28px #000a;
  z-index:2147483600;
  overflow:hidden;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  -webkit-overflow-scrolling: touch;
}

/* Themed scrollbar */
.gp-drawer{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.gp-drawer::-webkit-scrollbar{ width:10px; }
.gp-drawer::-webkit-scrollbar-track{ background:transparent; }
.gp-drawer::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.gp-drawer::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.38); }

/* Sticky bright header */
.gp-drawer-head{
  position:sticky; top:0; z-index:5; display:flex; gap:8px; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid #2a2a2a;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 38%, var(--accent) 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.gp-drawer-head #gp-plname,
.gp-drawer-head .gp-actions .chip{ color:#fff; }
.gp-drawer-head .chip{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.22);
}
.gp-drawer-head .chip:hover{ background: rgba(0,0,0,.32); }

.gp-actions{ display:flex; gap:6px; flex-wrap:wrap; }
#gp-list .row-played{ opacity:.55; }

/* Remote-tab indicator */
#globalPlayer.remote #gp-title::after{
  content:" (other tab)"; color:#8f8fa3; font-weight:400; margin-left:6px; font-size:.95em;
}

/* Home quick cards */
.quick-cards { margin-top:16px; }
.qc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.qc-card{
  display:block;
  padding:14px 16px;
  border: var(--card-border-weight) solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--igc-card-border) border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  color: var(--text);
  text-decoration: none;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

.qc-card:hover{
  transform: translateY(-1px);
  box-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 8px 28px rgba(31,108,255,.15),
    0 8px 28px rgba(255,79,216,.12);
  text-decoration: none;
}

.qc-title{ font-weight:700; margin-bottom:.25rem; }
.qc-copy{ color:var(--text-dim); }


/* =========================================================
   Mobile nav: anchored dropdown that opens LEFT into view
   =======================================================*/
.site-header .container { position: relative; } /* anchor */

@media (max-width: 960px){
  .nav-toggle { display:inline-flex; }

  /* hide the nav by default on mobile */
  .main-nav {
    display: none;
  }

  /* dropdown panel */
  .main-nav[data-mobile]{
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;           /* pin to right edge */
    left: auto;            /* open leftward */
    width: min(90vw, 320px);
    max-height: 70vh;

    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: 10px;

    background: linear-gradient(180deg, var(--panel-soft), var(--panel));
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.55);
    z-index: 1100;
    overflow: auto;
  }

  /* show when burger says open */
  .nav-toggle[aria-expanded="true"] + .main-nav[data-mobile]{
    display: flex;
  }

  /* pills fill full width */
  .main-nav[data-mobile] .nav.pill{
    display:block;
    width:100%;
    text-align:left;
  }
}



/* Optional global toggle: set solid borders sitewide */
body.igc-border-solid {
  --igc-card-border: linear-gradient(var(--brand), var(--brand));
}
/* Or pick accent instead of brand */
body.igc-border-accent {
  --igc-card-border: linear-gradient(var(--accent), var(--accent));
}


.album-card,
.playlist-card,
.media-card {
  position:relative;
  border: var(--card-border-weight) solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--igc-card-border) border-box;
  overflow:hidden;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.album-card:hover,
.playlist-card:hover,
.media-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 8px 28px rgba(31,108,255,.15),
    0 8px 28px rgba(255,79,216,.12);
}

.pl-art{
  width:100%; aspect-ratio: 16/9;
  object-fit: cover; border-radius:12px;
  background:#0f0f12;
}

.btn-sm { padding:6px 10px; font-size:.9rem; border-radius:8px; }
.flash { display:block; }
#party-banner.card { padding:14px; }


/* ==========================================
   News: article typography (matches your HTML)
   ========================================== */

.news-article { padding: 18px; }

/* Header area */
.news-hero { display:flex; flex-direction:column; gap:10px; margin-bottom: 14px; }
.news-title {
  margin:0;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  letter-spacing: .2px;
  line-height: 1.12;
}
.news-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color: var(--text-dim); font-size: .95rem; }

.news-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,12,18,.45);
  backdrop-filter: blur(10px);
}

.news-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(70,212,255,.6), rgba(255,79,216,.6), transparent);
  opacity:.85;
  margin: 12px 0 18px;
}

/* Body typography */
.news-body{
  color: var(--text);
  line-height: 1.72;
  font-size: 1.02rem;
  max-width: 78ch;        /* keeps it readable */
}

.news-body > *{ margin: 0 0 12px; } /* baseline spacing */

.news-body p{
  margin: 0 0 14px;
  color: rgba(230,230,240,.92);
}

/* The heading you actually use: <h3> */
.news-body h3{
  margin: 18px 0 10px;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: .2px;
  color: #fff;
  position: relative;
  padding-left: 12px;
}
.news-body h3::before{
  content:"";
  position:absolute;
  left:0; top:.25em;
  width:4px; height:1.05em;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: .9;
}

/* Lists */
.news-body ol,
.news-body ul{
  margin: 10px 0 16px 1.25rem;
  padding: 0;
}
.news-body li{
  margin: 8px 0;
  padding-left: 4px;
}

/* Make ordered list markers look nicer */
.news-body ol li::marker{
  font-weight: 800;
  color: rgba(70,212,255,.9);
}

/* Links */
.news-body a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(77,166,255,.38);
  padding-bottom: 1px;
}
.news-body a:hover{
  border-bottom-color: rgba(128,193,255,.95);
}

/* Inline emphasis */
.news-body strong{
  color: #fff;
  font-weight: 800;
}
.news-body em,
.news-body i{
  color: rgba(255,255,255,.92);
  font-style: italic;
}

/* Optional: make external links show a tiny icon */
.news-body a[target="_blank"]::after{
  content:"↗";
  font-size: .9em;
  margin-left: 6px;
  opacity: .7;
}

/* Actions row */
.news-actions{
  display:flex;
  gap:10px;
  margin-top: 18px;
}

.news-body p:first-child{
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .2px;
}


@media (max-width: 960px){
  .user-area {
    width: 100%;
  }

  .user-menu {
    width: 100%;
    position: relative;
  }

  .user-menu summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
      radial-gradient(120% 200% at -10% 0%, rgba(70,212,255,.10), transparent 40%),
      radial-gradient(120% 200% at 110% 0%, rgba(255,79,216,.10), transparent 40%);
    color: var(--ink);
  }

  .user-menu .menu {
    position: static;
    right: auto;
    margin-top: .5rem;
    min-width: 0;
    width: 100%;
    padding: .45rem;
    border-radius: 12px;
    box-shadow: none;
  }

  .user-menu .menu a {
    padding: .7rem .75rem;
  }
}


.trend-art .btnx {
  background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(20,20,30,0.85));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(70,212,255,0.35);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.trend-art .btnx:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255,255,255,0.4);
}