/* === same theme & components as the main page === */
    :root { --bg:#0b0b0c; --panel:#111215; --text:#e9e9ee; --muted:#a8adbd; --accent:#ff7a1a; --accent-2:#8ab4ff; --border:#1e2026; --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px; --maxw:1100px; }
    @media (prefers-color-scheme: light){ :root{ --bg:#f7f7fb; --panel:#fff; --text:#15151a; --muted:#5c6274; --accent:#e05500; --accent-2:#2f6fff; --border:#e9e9f1; --shadow:0 10px 30px rgba(16,22,60,.08);} }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);
      background: radial-gradient(1000px 600px at 110% -10%, rgba(255,122,26,.12), transparent 0%),
                  radial-gradient(800px 500px at -10% -20%, rgba(138,180,255,.12), transparent 0%), var(--bg); line-height:1.6;}
    .container{width:min(100%,var(--maxw));margin:0 auto;padding:0 20px}
    a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
    .chip{display:inline-block;font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:rgba(138,180,255,.15);color:var(--accent-2);border:1px solid rgba(138, 144, 255, 0.25)}
    .chiplink{display:inline-block;font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:rgba(136, 255, 122, 0.15);color:white ;border:1px solid rgba(27, 110, 44, 0.25)}
    header.site-header{position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg),transparent 15%)}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 0}
    .brand{display:flex;align-items:center;gap:.8rem}.brand-logo{width:38px;height:38px;border-radius:10px;background:radial-gradient(80% 80% at 30% 20%, #fff3, transparent),linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
    .brand h1{font-size:1.1rem;margin:0}.nav-links{display:flex;gap:.8rem;align-items:center}
    .nav-links a{padding:.6rem .8rem;border-radius:10px;border:1px solid transparent}.nav-links a:hover{border-color:var(--border);background:color-mix(in oklab,var(--panel),transparent 20%)}
    .post{margin:34px 0 54px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .post-hero{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:center;padding:18px;border-bottom:1px solid var(--border)}
    .post-cover{aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .post-inner{padding:clamp(16px,2vw + 8px,28px)}
    .post h1{font-size:clamp(1.6rem,2.4vw + .8rem,2.4rem);line-height:1.2;margin:0 0 .4rem}
    .post-meta{color:var(--muted);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
    /* Solid, reliable SVG stars */
    .rating { line-height: 1; }
    .stars { display: inline-flex; align-items: center; gap: 4px; line-height: 0; }
    .star  { width: var(--size,18px); height: var(--size,18px); display: inline-block; }
    .star path { fill: currentColor; }               /* use currentColor for easy theming */
    .star--filled { color: var(--accent); }
    .star--empty  { color: #2a2d36; }                /* empty star fill */
    .star--half {
      position: relative;
      color: var(--accent);    /* this is the filled color */
      overflow: hidden;
      clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
    }
    /* Create a masking overlay to hide the right half */
    .star--half::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;             /* hides the right half */
      background: var(--panel); /* same as background to mask */
      pointer-events: none;
}
              /* empty star fill */
    .star--empty path { stroke: #1e2026; stroke-width: 1; }  /* subtle outline */
    .score { font-weight: 600; margin-left: 6px; }
    .grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
    @media (max-width:860px){.post-hero{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
    .panel{border:1px solid var(--border);border-radius:12px;padding:14px;background:color-mix(in oklab,var(--panel),transparent 0%)}
    .panel h3{margin:.2rem 0 .4rem}
    .post-content h2{margin:1.2rem 0 .4rem}.post-content p{margin:.85rem 0}
    .list{margin:.6rem 0 .6rem 1.1rem}.muted{color:var(--muted)}
    footer{border-top:1px solid var(--border);padding:28px 0 48px;color:var(--muted);font-size:.95rem}
    .breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:.4rem}
    /* General track title style */
    i {
      color: #a8c8ff;
      text-shadow: #5454ff 0px 0px 5px;
    }
    .updatedreview {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
/* Put arrows right after the list number using ::marker */
/* Remove default numbers so we can fully control layout */
/* Base list setup */
ol.list {
  list-style: none;
  counter-reset: song;
  padding-left: 0rem;
}

ol.list li {
  counter-increment: song;
  position: relative;
  padding-left: 3em;
}

/* Number style (default for all items) */
ol.list li::before {
  content: counter(song) ".";
  position: absolute;
  left: 1.4em;
  color: white; /* numbers stay white */
}

/* Arrow style (separate from numbers) */
ol.list li.lowerrate::after,
ol.list li.higherate::after,
ol.list li.lowerratesmall::after,
ol.list li.higheratesmall::after {
  position: absolute;
  left: 0;
}

/* Different colors for different arrow types */
ol.list li.lowerrate::after {
  content: "↓";
  color: rgb(255, 71, 71);
}

ol.list li.higherate::after {
  content: "↑";
  color: limegreen;
}

ol.list li.higheratesmall::after {
  content: "↑";
  color: rgb(218, 255, 124);
}

ol.list li.lowerratesmall::after {
  content: "↓";
  color: rgb(236, 255, 161);
}

.track-title {
  margin-top: 2rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.4rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--panel), transparent 10%);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}

/* Special rankings */
.track-title.bronze {
  border: 2px solid #cd7f32;        /* bronze color */
  background: linear-gradient(180deg, rgba(205,127,50,0.15), transparent);
}

.track-title.silver {
  border: 2px solid #c0c0c0;        /* silver color */
  background: linear-gradient(180deg, rgba(192,192,192,0.15), transparent);
}

.track-title.gold {
  border: 2px solid #ffd700;        /* gold color */
  background: linear-gradient(180deg, rgba(255,215,0,0.15), transparent);
}
b {
    color: rgb(98, 255, 98);
}
.bad {
  color: rgb(255, 75, 75);
}
.mid {
  color: rgb(255, 255, 107);
}
/* Center review content and keep it readable */
.post-inner {
  max-width: 800px;   /* nice readable width */
  margin: 0 auto;     /* centers it horizontally */
}

/* Optional: make track titles stretch full width inside .post-inner */
.track-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  margin-top: 30px; /* ↓ adds space below the header */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
  color: inherit;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.back-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}
.back-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Favorite badge for manual 'My Favorite Albums' section */
.card { position: relative; }
.video-panel {
    text-align: center;
    width: 100%;    /* or max-width: 500px; if you want to limit it */
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    background: #141414;
    border-radius: 16px;
    box-shadow: 0 0 30px #fff1;
    border: 1.5px solid #fff1;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}
.video-wrapper-yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  margin: 0 auto;
}
.video-wrapper-yt {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
@media (max-width:600px) {
  .video {
    width: auto;
  }
}
@media (max-width:1000px) {
  .video {
    width: 100%;
    height: auto;
  }
}