/* ===========================
   IOS26 Liquid Glass CSS – Stellar Level
   =========================== */

/* Tokens */
:root{
  /* Spotify Exact Palette */
  --spotify-green: #1DB954;
  --spotify-black: #191414;
  --spotify-dark: #121212;
  --spotify-white: #FFFFFF;
  --spotify-light-grey: #B3B3B3;
  --spotify-grey: #535353;

  /* Liquid Glass knobs (Stellar Level) */
  --lg-blur: 30px;
  --lg-sat: 200%;
  --lg-radius: 28px;
  --lg-shadow: 0 12px 40px rgba(0,0,0,0.25);
  --lg-inner: inset 0 1px 0 rgba(255,255,255,0.15);
  --lg-press: scale(0.97);
  --lg-highlight: rgba(255,255,255,0.15);
  --lg-glow: rgba(29,185,84,0.2);
  --lg-border: 1px solid rgba(255,255,255,0.08);
}

/* Theme-aware material colors */
html[data-mdb-theme='dark']{
  --lg-surface: rgba(25, 20, 20, 0.65);
  --lg-surface-solid: #191414;
  --lg-stroke: rgba(255,255,255,0.1);
  --lg-border1: rgba(255,255,255,0.15);
  --lg-border2: rgba(29,185,84,0.15);
  --lg-text-muted: #b3b3b3;
  --mdb-accordion-icon-color: var(--spotify-green);
  --mdb-accordion-icon-active-color: var(--spotify-green);
  --bg-base: #000;
}
html[data-mdb-theme='light']{
  --lg-surface: rgba(255,255,255,0.65);
  --lg-surface-solid: #ffffff;
  --lg-stroke: rgba(0,0,0,0.08);
  --lg-border1: rgba(255,255,255,0.8);
  --lg-border2: rgba(29,185,84,0.25);
  --lg-text-muted: #616161;
  --mdb-accordion-icon-color: var(--spotify-green);
  --mdb-accordion-icon-active-color: var(--spotify-green);
  --bg-base: #f0f0f0;
}

/* Typography */
body {
    font-family: 'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--spotify-white);
    -webkit-font-smoothing: antialiased;
}

/* Override MDB accordion arrows to green */
.accordion-button::after {
    background-image: none; /* remove default svg */
    font-family: "Font Awesome 6 Free";
    content: "\f078";
    font-weight: 900;
    color: var(--spotify-green);
    transform: rotate(0deg);
    transition: transform 0.2s;
}
.accordion-button:not(.collapsed)::after {
     transform: rotate(180deg);
     background-image: none;
}

/* Background: Liquid Animated Lava */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-base);
  overflow-x: hidden;
  transition: background 0.5s ease;
}

/* Liquid Lava Lamp Background */
body::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(29, 185, 84, 0.5), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(100, 255, 100, 0.3), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(29, 185, 84, 0.4), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(25, 20, 20, 0.8), transparent 50%);
    filter: blur(90px);
    z-index: -1;
    animation: liquid-move 25s ease-in-out infinite alternate;
    opacity: 0.8;
}

html[data-mdb-theme='light'] body::before {
     background:
        radial-gradient(circle at 50% 50%, rgba(29, 185, 84, 0.3), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(100, 255, 100, 0.2), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(29, 185, 84, 0.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.8), transparent 50%);
     opacity: 1;
}

@keyframes liquid-move {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(3%, 5%) rotate(2deg) scale(1.1); }
    66% { transform: translate(-2%, -3%) rotate(-1deg) scale(0.95); }
    100% { transform: translate(-4%, 4%) rotate(1deg) scale(1.05); }
}

/* Utility: Stellar Glass Surface */
.lg-surface {
  position: relative;
  isolation: isolate;
  border: var(--lg-border);
  background: linear-gradient(145deg, var(--lg-surface), rgba(255,255,255,0.02));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:
    var(--lg-shadow),
    var(--lg-inner),
    0 1px 2px rgba(0,0,0,0.1); /* Subtle depth */
  border-radius: var(--lg-radius);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

/* Apply SVG filter for liquid edges if supported */
@supports (filter: url(#liquid-glass)) {
    .lg-surface {
        /* filter: url(#liquid-glass); */
    }
}


/* Specular highlight on top edge */
.lg-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 40%, rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.lg-hover:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.3),
    var(--lg-inner),
    0 0 20px rgba(29, 185, 84, 0.2); /* Glow */
  border-color: rgba(255,255,255,0.2);
}

.lg-press:active { transform: var(--lg-press); }

/* NAVBAR */
.navbar {
  margin: 1.5rem auto;
  max-width: 95%;
  border-radius: 999px; /* Floating pill */
  border: var(--lg-border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* Glass elements */
.card, .accordion-item, .tooltip-inner, .empty-state, .glass {
  composes: lg-surface from none;
}

/* Accordion */
.accordion-item {
    margin-bottom: 1rem;
    border: none;
    background: transparent; /* Let surface handle bg */
}
.accordion-button:not(.collapsed) {
  color: var(--spotify-green);
  background: rgba(29, 185, 84, 0.15);
  box-shadow: none;
}
.accordion-button {
  border-radius: var(--lg-radius);
  font-weight: 700;
  color: inherit;
  padding: 1.2rem;
  background: transparent;
}
.accordion-body {
  background: rgba(0,0,0,0.2);
  border-radius: 0 0 var(--lg-radius) var(--lg-radius);
  color: var(--spotify-light-grey);
  padding: 1.5rem;
}

/* Layout & basics */
.navbar-brand { font-weight: 800; letter-spacing: -0.5px; font-size: 1.4rem; padding-left: 0.5rem;}
.brand-dot { width: 8px; height: 8px; background: var(--spotify-green); border-radius: 50%; margin-left: 6px; box-shadow: 0 0 10px var(--spotify-green); }
.container-narrow { max-width: 800px; }

.avatar {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 20px; /* Squircle */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.1);
}

.card-body { padding: 2rem; }
.card-title { font-weight: 700; }
.muted { color: var(--lg-text-muted); }
.section-heading { font-weight: 900; font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 0.5rem; }

/* Typography links */
a { color: inherit; text-decoration: none; transition: all 0.2s; }
.track-link { font-weight: 700; font-size: 1.2rem; display: inline-block; }
.track-link:hover { color: var(--spotify-green); transform: translateX(2px); }
.context-link { color: var(--spotify-green) !important; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.8rem; }

/* Chips & buttons */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem; border-radius: 999px;
  background: rgba(29, 185, 84, 0.1);
  border: 1px solid rgba(29, 185, 84, 0.3);
  color: var(--spotify-green); font-size: 0.9rem; font-weight: 700;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.pill:hover { background: rgba(29, 185, 84, 0.2); box-shadow: 0 0 15px rgba(29, 185, 84, 0.3); }

.btn-success {
  background: var(--spotify-green);
  border: none;
  color: var(--spotify-black);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 2.5rem;
  box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
  border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn-success:hover {
    background: #1ed760; /* Slightly lighter green */
    box-shadow: 0 12px 40px rgba(29, 185, 84, 0.6);
    transform: scale(1.05);
}
.btn-success:active { transform: scale(0.95); }

.btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit; border-radius: 999px;
  backdrop-filter: blur(10px);
  font-weight: 600;
  padding: 0.5rem 1rem;
}
.btn-ghost:hover { border-color: var(--spotify-green); color: var(--spotify-green); background: rgba(29, 185, 84, 0.1); }

/* Inputs */
.form-outline .form-control {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  color: inherit;
  padding: 1rem 1.2rem;
  font-size: 1.1rem;
  transition: all 0.3s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

html[data-mdb-theme='light'] .form-outline .form-control {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0,0,0,0.1);
    color: #000;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.form-outline .form-control:focus {
  border-color: var(--spotify-green);
  box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.2), inset 0 2px 4px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.5);
}

html[data-mdb-theme='light'] .form-outline .form-control:focus {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.15), inset 0 2px 4px rgba(0,0,0,0.05);
}

.form-outline .form-control ~ .form-label { color: var(--spotify-light-grey); padding-top: 0.5rem; padding-left: 0.5rem; }
.form-outline .form-control:focus ~ .form-label { color: var(--spotify-green); }

/* Code Block */
.code-block {
  background: rgba(0,0,0,0.4);
  padding: .2rem .4rem; border-radius: .4rem;
  font-family: monospace; color: var(--spotify-green);
  border: 1px solid rgba(255,255,255,0.05);
}

html[data-mdb-theme='light'] .code-block {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.05);
    color: #15843c; /* Darker green for legibility on light */
}

/* Empty state */
.empty-state {
  border: 2px dashed rgba(255,255,255,0.1);
  padding: 4rem; text-align: center;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .navbar { margin: 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; max-width: 100%; }
    .container-narrow { padding: 1rem; }
    .card-body { padding: 1.5rem; }
    .section-heading { font-size: 1.8rem; }
    .avatar { width: 52px; height: 52px; }
    .lg-surface { border-radius: 20px; }
    .accordion-button { padding: 1rem; }
}