:root{
  --brand:#3F51B5;
  --accent:#FFCC00;
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F1F3FA;
  --text:#0B1220;
  --muted:rgba(11,18,32,0.62);
  --border:rgba(15,23,42,0.10);
  --shadow:0 16px 44px rgba(15,23,42,0.10);
  --shadow-sm:0 10px 30px rgba(15,23,42,0.08);
  --radius:18px;
  --radius-sm:14px;
  --container:1280px;
  --gutter:16px;
  --header-h:72px;
  --tap:44px;
  --header-bg:rgba(255,255,255,0.78);
  --card-bg:rgba(255,255,255,0.92);
  --footer-bg:rgba(255,255,255,0.72);
  --tab-bg:rgba(255,255,255,0.68);
  --hero-bg:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

[data-theme="dark"] {
  --bg:#0F172A;
  --surface:#1E293B;
  --surface-2:#334155;
  --text:#F1F5F9;
  --muted:rgba(241,245,249,0.62);
  --border:rgba(241,245,249,0.12);
  --shadow:0 16px 44px rgba(0,0,0,0.40);
  --shadow-sm:0 10px 30px rgba(0,0,0,0.30);
  --header-bg:rgba(15,23,42,0.85);
  --card-bg:rgba(30,41,59,0.95);
  --footer-bg:rgba(15,23,42,0.90);
  --tab-bg:rgba(30,41,59,0.80);
  --hero-bg:linear-gradient(180deg, rgba(30,41,59,0.95), rgba(30,41,59,0.85));
}

@media (min-width:768px){
  :root{--gutter:22px;}
}

@media (min-width:1200px){
  :root{--gutter:28px;}
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(900px 520px at 20% -10%, rgba(63,81,181,0.10), transparent 55%),
    radial-gradient(900px 520px at 100% 0%, rgba(255,204,0,0.10), transparent 55%);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(900px 520px at 20% -10%, rgba(63,81,181,0.10), transparent 0%),
    radial-gradient(900px 520px at 100% 0%, rgba(255,204,0,0.08), transparent 0%);
}

a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;padding:0;display:inline-flex;align-items:center;justify-content:center;}
img{max-width:100%;display:block;}
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items:center;
  gap: 12px;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.05);
  background: var(--border);
}

.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }

[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.main{
  flex:1;
  padding:22px 0 34px;
}

@media (min-width:900px){
  .main{padding:30px 0 46px;}
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-h);
  background:var(--header-bg);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.header-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--tap);
  gap:12px;
}

.header-logo img{
  height:38px;
  width:auto;
}

.header-brand{
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--brand);
  font-size:16px;
  line-height:1;
}

@media (min-width:900px){
  .header-logo img{height:42px;}
  .header-brand{font-size:17px;}
}

@media (hover: none) and (pointer: coarse) {
  /* Push footer content above Chrome's bottom sheet (~80px) + safe area */
  .footer-inner {
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  }

  /* Ensure footer sits above any overlay */
  .footer {
    position: relative;
    z-index: 10;
  }

  /* Ensure touch events reach the links */
  .footer-links a {
    touch-action: manipulation;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(63,81,181,0.12);
  }

  /* Ensure the footer-links container doesn't clip touch events */
  .footer-links {
    position: relative;
    z-index: 1;
    overflow: visible;
  }

  /* Ensure footer-col has no overflow clipping */
  .footer-col {
    overflow: visible;
  }
}

.footer{
  border-top:1px solid var(--border);
  background:var(--footer-bg);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-inner{
  padding:24px 0;
}

.footer-grid{
  display:grid;
  gap:18px;
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.footer-brand img{
  height:36px;
  width:auto;
}

.footer-brand span{
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--text);
}

.footer-col-title{
  font-size:16px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.01em;
  line-height:1.2;
  margin-bottom:10px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 10px;
  transition: background-color 140ms ease, color 140ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(63,81,181,0.10);
}

.footer-links a:hover {
  background: rgba(63,81,181,0.08);
  color: var(--text);
}

.footer-app-link {
  display: inline-flex;
  line-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  transition: transform 140ms ease, opacity 140ms ease;
}

.footer-app-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.footer-app-link:active { transform: translateY(0); }

.footer-app-link img {
  display: block;
  height: 150px;
  width: auto;
}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer-copy{
  font-size:13.5px;
  color:var(--muted);
  font-weight:650;
}

.footer-note{
  font-size:13.5px;
  font-weight:650;
  letter-spacing:-0.01em;
  line-height:1.45;
}

@media (max-width:899px){
  .footer-grid{
    justify-items:center;
    text-align:center;
  }
  .footer-brand{
    justify-content:center;
  }
  .footer-col{
    width:100%;
    max-width:420px;
  }
  .footer-links a{
    margin-left:0;
  }
  .footer-app-link{
    width:100%;
    max-width:420px;
    justify-content:center;
  }
  .footer-bottom{
    justify-content:center;
    text-align:center;
    align-items:center;
  }
}

@media (min-width:900px){
  .footer-grid{
    grid-template-columns:1.2fr 1fr 1fr;
    align-items:start;
  }
  .footer-inner{padding:30px 0;}
}

.hero{
  padding:8px 0 18px;
}

.hero-card{
  background:var(--hero-bg);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow-sm);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-card:before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(700px 360px at 20% 10%, rgba(63,81,181,0.16), transparent 55%),
             radial-gradient(700px 360px at 85% 20%, rgba(255,204,0,0.14), transparent 55%);
  opacity:0.9;
  pointer-events:none;
}

[data-theme="dark"] .hero-card:before{
  opacity:0.55;
}

.hero-card > *{position:relative;}

.hero-title{
  margin:0;
  font-size:26px;
  letter-spacing:-0.035em;
  line-height:1.15;
}

.hero-sub{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  max-width:70ch;
}

.hero-sub-line{display:block;}
.hero-sub-line-2{margin-top:8px;}

@media (min-width:900px){
  .hero{padding:10px 0 22px;}
  .hero-card{padding:24px;}
  .hero-title{font-size:36px;}
  .hero-sub{font-size:15.5px;}
}

.tabs{
  margin-top:8px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 10px;
}

.section-title{
  margin:0;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--text);
  position:relative;
  padding-left:10px;
}

.section-title:before{
  content:"";
  position:absolute;
  left:0;
  top:0.25em;
  bottom:0.25em;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg, rgba(63,81,181,0.92), rgba(63,81,181,0.22));
}

@media (min-width:900px){
  .section-title{font-size:16px;}
}

.tabs #swipeRegion{
  margin-top:14px;
  border-radius:calc(var(--radius) + 8px);
  background:var(--tab-bg);
  border:1px solid var(--border);
  box-shadow:0 14px 40px rgba(15,23,42,0.06);
  padding:14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (min-width:900px){
  .tabs #swipeRegion{padding:18px;}
}

.tab:focus-visible,
.icon-btn:focus-visible,
.ghost-btn:focus-visible,
.footer-links a:focus-visible,
.text-link:focus-visible{
  outline:3px solid rgba(63,81,181,0.22);
  outline-offset:2px;
}

.tabbar{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:2px 2px 10px;
  margin:0 -2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.tabbar::-webkit-scrollbar{display:none;}

.tab{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  transition:background-color 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.tab:hover{
  background:rgba(63,81,181,0.06);
  color:var(--text);
}

.tab:active{transform:scale(0.98);}

.tab[aria-selected="true"]{
  background:rgba(63,81,181,0.96);
  border-color:rgba(63,81,181,0.96);
  color:#FFFFFF;
  box-shadow:0 14px 34px rgba(63,81,181,0.18);
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (min-width:900px){
  .grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;}
}

@media (min-width:1200px){
  .grid{grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px;}
}

@media (min-width:1440px){
  .grid{grid-template-columns:repeat(6, minmax(0, 1fr));}
}

.card{
  border:1px solid var(--border);
  background:var(--card-bg);
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
  transition:transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease, background-color 0.3s ease;
}

.card:hover{
  transform:translateY(-2px);
  border-color:rgba(63,81,181,0.18);
  box-shadow:0 18px 48px rgba(15,23,42,0.10);
}

.card:active{transform:translateY(0);}

.card-media{
  aspect-ratio:1/1;
  background:var(--surface-2);
  overflow:hidden;
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform 220ms ease, opacity 220ms ease;
  opacity:0;
}

.card-media img.is-loaded{opacity:1;}
.card:hover .card-media img{transform:scale(1.05);}

.card-body{
  padding:10px 12px 14px;
}

.card-title{
  margin:0;
  font-size:13px;
  letter-spacing:-0.01em;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
}

.badge{
  position:absolute;
  top:10px;
  left:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 10px 22px rgba(15,23,42,0.08);
}

.badge-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.skeleton-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (min-width:640px){
  .skeleton-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (min-width:900px){
  .skeleton-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;}
}

@media (min-width:1200px){
  .skeleton-grid{grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px;}
}

@media (min-width:1440px){
  .skeleton-grid{grid-template-columns:repeat(6, minmax(0, 1fr));}
}

.skeleton{
  border-radius:22px;
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  position:relative;
  min-height:160px;
}

.skeleton:before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-30%);
  background:linear-gradient(90deg, transparent, rgba(15,23,42,0.05), transparent);
  animation:shimmer 1.35s infinite;
}

@keyframes shimmer{
  0%{transform:translateX(-60%);}
  100%{transform:translateX(60%);}
}

.page{
  max-width:940px;
}

.page h1{
  margin:0 0 14px;
  font-size:26px;
  letter-spacing:-0.03em;
  line-height:1.15;
}

.page p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:15px;
}

.page a{
  color:rgba(63,81,181,0.95);
  text-decoration:underline;
  text-decoration-color:rgba(63,81,181,0.32);
  text-underline-offset:3px;
}

.main-player{
  padding-top:18px;
}

@media (max-width:900px){
  .main-player{padding-bottom:74px;}
  .audio-ui{position:sticky;bottom:12px;z-index:18;}
}

.player-stage{
  border-radius:calc(var(--radius) + 10px);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.player-stage:before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 540px at 20% 0%, rgba(63,81,181,0.14), transparent 55%),
    radial-gradient(900px 540px at 100% 0%, rgba(255,204,0,0.14), transparent 55%),
    var(--stage-image, none);
  background-size:auto, auto, cover;
  background-position:center;
  filter:blur(28px);
  opacity:0.65;
  transform:scale(1.03);
}

[data-theme="dark"] .player-stage:before{
  opacity:0.45;
}

.player-stage-inner{
  position:relative;
  padding:16px;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  align-items:start;
}

@media (min-width:720px){
  .player-stage-inner{
    padding:22px;
    grid-template-columns:220px 1fr;
    gap:18px;
    align-items:center;
  }
}

@media (max-width:900px){
  .player-stage-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
  }
  .player-art{
    width:176px;
    height:176px;
    border-radius:28px;
  }
  .player-subline{
    justify-content:center;
    flex-wrap:wrap;
  }
  .audio-row{
    width:100%;
    justify-content:center;
  }
  .audio-row-bottom{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }
  .volume{
    width:100%;
    justify-content:space-between;
  }
  .volume-range{
    width:100%;
    max-width:none;
  }
  .status-pill{
    width:100%;
  }
  .live-pill{
    justify-content:center;
  }
}

.player-art{
  width:120px;
  height:120px;
  border-radius:22px;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:0 18px 46px rgba(0,0,0,0.15);
}

@media (min-width:720px){
  .player-art{width:220px;height:220px;border-radius:26px;}
}

.player-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 220ms ease;
}

.player-art img.is-loaded{opacity:1;}

.player-title{
  margin:0;
  font-size:22px;
  letter-spacing:-0.03em;
  line-height:1.15;
}

@media (min-width:720px){
  .player-title{font-size:34px;}
}

.player-subline{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.text-link{
  font-size:12px;
  color:rgba(63,81,181,0.95);
  text-decoration:underline;
  text-decoration-color:rgba(63,81,181,0.25);
  text-underline-offset:3px;
}

#reportLink{
  color:rgba(220,38,38,0.92);
  text-decoration-color:rgba(220,38,38,0.28);
}

#reportLink:hover{
  color:rgba(185,28,28,0.95);
  text-decoration-color:rgba(185,28,28,0.30);
}

.audio-ui{
  margin-top:16px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 18px 44px rgba(0,0,0,0.08);
  padding:12px;
  position:relative;
  transition:transform 160ms ease, box-shadow 160ms ease, background-color 0.3s ease, border-color 0.3s ease;
}

.audio-ui.is-loading{
  box-shadow:0 22px 54px rgba(0,0,0,0.10);
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(63,81,181,0.14);
  background:rgba(63,81,181,0.08);
  color:var(--text);
  font-size:12px;
  letter-spacing:0.08em;
  font-weight:800;
}

.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(239,68,68,0.92);
  box-shadow:0 0 0 6px rgba(239,68,68,0.10);
  animation:liveDot 1.15s ease-in-out infinite;
}

@keyframes liveDot{
  0%{transform:scale(0.9);opacity:0.65;}
  50%{transform:scale(1);opacity:1;}
  100%{transform:scale(0.9);opacity:0.65;}
}

.ghost-btn{
  height:48px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.ghost-btn:hover{
  background:rgba(63,81,181,0.06);
  border-color:rgba(63,81,181,0.16);
  color:var(--text);
}

.ghost-btn:active{transform:scale(0.98);}

.audio-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.audio-row-bottom{
  margin-top:12px;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.icon-btn{
  height:48px;
  min-width:48px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(63,81,181,0.18);
  background:rgba(63,81,181,0.10);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.icon-btn:hover{
  background:rgba(63,81,181,0.14);
  border-color:rgba(63,81,181,0.24);
}

.icon-btn:active{transform:scale(0.98);}

.icon-btn.is-playing{
  background:rgba(63,81,181,0.96);
  border-color:rgba(63,81,181,0.96);
  color:#FFFFFF;
  box-shadow:0 16px 40px rgba(63,81,181,0.18);
}

.pp-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pp-icon .ico{
  display:none;
}

.icon-btn .ico-play{display:block;}
.icon-btn.is-playing .ico-play{display:none;}
.icon-btn.is-playing .ico-pause{display:block;}

.pp-label{
  font-weight:750;
  letter-spacing:-0.02em;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  font-size:12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.status-pill:before{
  content:"";
  display:none;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:8px;
  background:rgba(63,81,181,0.65);
  box-shadow:0 0 0 6px rgba(63,81,181,0.10);
  animation:statusPulse 1.1s ease-in-out infinite;
}

.audio-ui.is-loading .status-pill:before{
  display:inline-block;
}

@keyframes statusPulse{
  0%{transform:scale(0.9);opacity:0.55;}
  50%{transform:scale(1);opacity:1;}
  100%{transform:scale(0.9);opacity:0.55;}
}

.volume{
  display:flex;
  align-items:center;
  gap:10px;
}

.volume-label{
  font-size:12px;
  color:var(--muted);
}

.volume-range{
  width:160px;
  max-width:48vw;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  height:18px;
}

.volume-range::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:var(--surface-2);
}

.volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(63,81,181,0.88);
  border:1px solid rgba(63,81,181,0.16);
  margin-top:-4px;
}

.volume-range::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:var(--surface-2);
}

.volume-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(63,81,181,0.88);
  border:1px solid rgba(63,81,181,0.16);
}

.stream-info{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

@media (max-width:520px){
  .stream-info{grid-template-columns:1fr;gap:8px;}
}

.stream-kv{
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:16px;
  padding:10px 12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stream-k{
  font-size:12px;
  color:var(--muted);
}

.stream-v{
  margin-top:6px;
  font-size:13px;
  color:var(--text);
}

.related{
  margin-top:28px;
}

.related-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
}

.related-title{
  margin:0;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--text);
}

.rail-shell{
  position:relative;
}

.rail-nav{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(63,81,181,0.22);
  background:rgba(63,81,181,0.08);
  box-shadow:0 18px 46px rgba(15,23,42,0.10);
  color:rgba(11,18,32,0.80);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

[data-theme="dark"] .rail-nav{
  border-color:rgba(241,245,249,0.18);
  background:rgba(30,41,59,0.78);
  box-shadow:0 18px 46px rgba(0,0,0,0.38);
  color:#FFFFFF;
}

.rail-nav:hover{
  background:rgba(63,81,181,0.12);
  border-color:rgba(63,81,181,0.26);
  transform:scale(1.03);
}

[data-theme="dark"] .rail-nav:hover{
  background:rgba(51,65,85,0.82);
  border-color:rgba(241,245,249,0.24);
}

.rail-nav:active{
  transform:scale(0.98);
}

.rail-nav:disabled{
  opacity:0.35;
  cursor:default;
}

[data-theme="dark"] .rail-nav:disabled{
  opacity:0.45;
}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .rail-shell{
    display:grid;
    grid-template-columns:56px 1fr 56px;
    align-items:center;
    gap:14px;
  }

  .rail-nav{display:inline-flex;}
}

.rail{
  position:relative;
  z-index:1;
}

.rail-nav{
  z-index:2;
}

.rail-nav.is-active{
  background:rgba(63,81,181,0.96);
  border-color:rgba(63,81,181,0.96);
  color:#FFFFFF;
  box-shadow:0 18px 46px rgba(63,81,181,0.14);
}

.rail-nav:active{
  background:rgba(63,81,181,0.96);
  border-color:rgba(63,81,181,0.96);
  color:#FFFFFF;
}

.rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:pan-x pan-y;
  padding:6px 2px 12px;
  margin:0 -2px;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  scroll-padding:var(--gutter);
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

.rail::-webkit-scrollbar{display:none;}

.rail .card{
  flex:0 0 auto;
  width:170px;
  scroll-snap-align:start;
}

@media (min-width:900px){
  .rail .card{width:210px;}
}

.rail-empty{
  padding:14px 16px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:18px;
  background:rgba(255,255,255,0.80);
  color:rgba(11,18,32,0.62);
  width:100%;
}

.btn-primary{
  height:46px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(63,81,181,0.96);
  color:#FFFFFF;
  font-weight:800;
  letter-spacing:-0.02em;
  box-shadow:0 18px 46px rgba(63,81,181,0.18);
  border:1px solid rgba(63,81,181,0.96);
  transition:transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.btn-primary:hover{
  background:rgba(63,81,181,1);
  box-shadow:0 22px 54px rgba(63,81,181,0.22);
}

.btn-primary:active{transform:scale(0.98);}

.empty{
  min-height:calc(100vh - var(--header-h) - 260px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 0;
}

.empty-inner{
  width:100%;
  max-width:620px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.empty-ill{
  width:min(520px, 92vw);
  filter:drop-shadow(0 28px 60px rgba(15,23,42,0.10));
}

.empty-ill svg{
  width:100%;
  height:auto;
  display:block;
}

.empty-title{
  margin:0;
  font-size:26px;
  letter-spacing:-0.04em;
  line-height:1.15;
}

.empty-desc{
  margin:0;
  color:rgba(11,18,32,0.66);
  font-size:15px;
  max-width:54ch;
}

@media (min-width:900px){
  .empty{padding:34px 0;}
  .empty-title{font-size:34px;}
  .empty-desc{font-size:16px;}
}

/* ---------------------------------------------------------------------------
   Google AdSense responsive guard (container-level, no global hacks)
   ---------------------------------------------------------------------------
   The site runs Google Auto Ads, which INJECT their own containers
   (ins.adsbygoogle, .google-auto-placed and the aswift_* host <div>/<iframe>)
   carrying a FIXED pixel width captured at placement time. On viewport /
   orientation change that width is not recomputed, so the ad keeps its old
   width and pushes the page wider than the viewport (horizontal scroll, blank
   right gutter, stretched footer).

   The rules below constrain each ad node to its own parent (max-width:100%,
   min-width:0) and, for the direct Google wrapper that holds the creative,
   clip the stale-wide creative to the wrapper (overflow:hidden ON THE AD
   WRAPPER ONLY — this is the wrapper contract, NOT a global/body overflow
   hack). Actual re-sizing on resize/orientation is enforced at runtime by the
   ad guard in app.js. No transform/scale/zoom/body-overflow is used. */

/* Optional explicit wrapper for any manually-placed ad unit. */
.ads-wrapper,
.ads-container {
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  margin:0 auto;
}

/* Constrain the ad node itself to its parent. */
ins.adsbygoogle,
.adsbygoogle,
.adsbygoogle-noablate,
.google-auto-placed,
div[id^="aswift_"][id$="_host"],
div[id^="google_ads_"] {
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* The direct Google wrappers act as the responsive ad container: clip any
   stale-wide creative to the wrapper so it can never widen the page. */
.google-auto-placed,
div[id^="aswift_"][id$="_host"] {
  overflow:hidden !important;
}

ins.adsbygoogle iframe,
.google-auto-placed iframe,
div[id^="aswift_"][id$="_host"] > iframe,
iframe[id^="aswift_"],
iframe[id^="google_ads_iframe_"] {
  max-width:100% !important;
}

/* Auto Ads also inject native AdSense-for-content blocks (.google-aiuf,
   .goog-rentries, .goog-rentry) directly into the page DOM inside the aswift_*
   host. These carry a stale pixel width too, so cap every descendant of an ad
   host / auto-placed wrapper to its container. Layout only — this is page DOM
   Google injected, never the cross-origin iframe's internal document. */
div[id^="aswift_"][id$="_host"] *,
.google-auto-placed *,
.google-aiuf,
.goog-rentries,
.goog-rentry {
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}