/* ============================================================================
   Frequency theme layer — see docs/template/frequency-ringtones-redesign.html

   This file restyles the existing Bootstrap 3 markup. Views only ever gained
   class hooks (.header-cta, .auth-card, …) — no href, form field or link text
   is changed by anything in here.

   Loaded after app.css, so equal-specificity rules here win.
   Safe rollback: remove the <link> to this file.
   ========================================================================== */

:root{
  --bg:#f4f4fa;
  --bg-soft:#ffffff;
  --surface:#ffffff;
  --surface-2:#eeeef6;
  --border:rgba(18,18,45,.09);
  --border-strong:rgba(18,18,45,.18);
  --text:#15152b;
  --text-muted:#4f4f6b;
  --text-faint:#6f6f8c;

  --blue:#4c8dff;
  --blue-2:#2e5fe0;
  --green:#22c37f;
  --green-2:#109a5f;
  --purple:#8b5cf6;
  --purple-2:#6a3ff0;
  --pink:#ef4d9e;
  --pink-2:#d6237c;
  --orange:#ff8a3d;
  --orange-2:#ef6a12;
  --red:#ff5266;
  --red-2:#e5223c;
  --teal:#17c9c2;
  --teal-2:#0da39d;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card:0 14px 30px -16px rgba(20,20,60,.35);

  /* the colour wash behind cards needs to be much stronger on a white surface */
  --wash:.22;
  --chip-bg:rgba(18,18,45,.05);
  --overlay:rgba(18,18,45,.06);
  --overlay-strong:rgba(18,18,45,.1);
  --header-bg:rgba(255,255,255,.86);

  /* Zedge's stack: each OS renders its own UI font, nothing is downloaded.
     system-ui stays unquoted so it resolves as the CSS generic keyword rather
     than a family literally named "system-ui". */
  --font-sans:-apple-system,system-ui,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

[data-theme="dark"]{
  --bg:#0d0d17;
  --bg-soft:#12121f;
  --surface:#191928;
  --surface-2:#1f1f32;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --text:#f5f5fb;
  --text-muted:#a8a8c0;
  --text-faint:#8a8aa6;
  --shadow-card:0 14px 30px -12px rgba(0,0,0,.55);
  --wash:.16;
  --chip-bg:rgba(255,255,255,.06);
  --overlay:rgba(255,255,255,.08);
  --overlay-strong:rgba(255,255,255,.16);
  --header-bg:rgba(13,13,23,.82);
}

/* ---------- base ---------- */
body,
button,
input,
select,
textarea,
.btn,
.navbar,
.dropdown-menu,
.form-control,
/* app.css pins these three to Arial; pull them back onto the system stack */
.one-sound-list .button-wrapper .play-button-container .total-downloads,
.one-sound-list .button-wrapper .play-button-container .partner-badge,
.player-container .info .actions a .count,
.player-container .info .actions button .count{
  font-family:var(--font-sans);
}
body{
  background:
    radial-gradient(1100px 520px at 12% -8%,rgba(139,92,246,.14),transparent 60%),
    radial-gradient(900px 500px at 88% 4%,rgba(76,141,255,.12),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body .body{
  background:none;
}
h1,h2,h3,h4,h5{
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:500;
}
.text-muted,small{
  color:var(--text-muted);
}
hr{
  border-top-color:var(--border);
}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
}
.site-header .main-header{
  background-color:var(--header-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:none;
  border-bottom:1px solid var(--border);
  color:var(--text);
  margin-bottom:0;
}
.site-header .main-header .navbar-brand,
.site-header .main-header .navbar-brand:focus,
.site-header .main-header .navbar-brand:hover{
  color:var(--text);
  font-weight:600;
}
.site-header .main-header .navbar-brand.brand-lockup{
  align-items:center;
  display:flex;
  gap:10px;
}
.site-header .main-header .navbar-brand .brand-mark{
  border-radius:11px;
  box-shadow:0 6px 16px -4px rgba(139,92,246,.55);
  display:block;
  flex-shrink:0;
  float:none;
  height:40px;
  margin:0;
  width:40px;
}
.site-header .main-header .navbar-brand .brand-wordmark{
  line-height:1.15;
}
.site-header .main-header .nav>li>a{
  background:transparent;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--text-muted);
  font-weight:600;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.site-header .main-header .nav>li>a:focus,
.site-header .main-header .nav>li>a:hover,
.site-header .main-header .nav>li.open>a,
.site-header .main-header .nav>li.active>a{
  background-color:var(--surface-2);
  border-color:var(--border);
  color:var(--text);
}
.site-header .main-header .dropdown.open>a{
  border:1px solid var(--border);
  border-radius:999px;
}
.site-header .main-header .nav>li>button.nav-search-btn,
.site-header .main-header .theme-toggle{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.site-header .main-header .nav>li>button.theme-toggle{
  display:block;
  font-size:15px;
  line-height:inherit;
  padding:10px 14px;
  text-align:center;
  width:100%;
}
.site-header .main-header .theme-toggle.navbar-theme-toggle{
  float:right;
  height:38px;
  margin-right:8px;
  margin-top:12px;
  padding:0;
  width:38px;
}
.site-header .main-header .nav>li>button.nav-search-btn:hover,
.site-header .main-header .theme-toggle:hover{
  border-color:var(--border-strong);
  color:var(--text);
}
/* only one of the two glyphs is meaningful at a time */
[data-theme="dark"] .theme-toggle .theme-icon-dark,
.theme-toggle .theme-icon-light{
  display:none;
}
[data-theme="dark"] .theme-toggle .theme-icon-light{
  display:inline-block;
}
.site-header .main-header .navbar-toggle{
  background-color:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
}
/* Desktop header row: brand · nav · actions on one 76px line (template .header-row).
   Bootstrap's floats are replaced with flex so the action group can never wrap
   onto a second line as the nav grows. */
@media (min-width:768px){
  .site-header .main-header .container-fluid{
    align-items:center;
    display:flex;
    gap:24px;
    min-height:76px;
    padding-left:32px;
    padding-right:32px;
  }
  .site-header .main-header .navbar-header{
    flex-shrink:0;
    float:none;
  }
  .site-header .main-header .navbar-collapse{
    align-items:center;
    display:flex !important;
    flex:1 1 auto;
    gap:24px;
    justify-content:space-between;
    padding-left:0;
    padding-right:0;
  }
  .site-header .main-header .navbar-brand{
    height:auto;
    padding:0;
  }
  .site-header .main-header .navbar-nav{
    align-items:center;
    display:flex;
    float:none;
    gap:6px;
    margin:0;
  }
  .site-header .main-header .navbar-nav>li{
    float:none;
  }
  .site-header .main-header .navbar-nav>li>a{
    font-size:14.5px;
    line-height:1.4;
    padding:9px 16px;
    white-space:nowrap;
  }
  .site-header .main-header .header-actions{
    flex-shrink:0;
    gap:12px;
  }
  /* square icon buttons */
  .site-header .main-header .nav>li.header-icon-item>button{
    align-items:center;
    display:flex;
    font-size:15px;
    height:40px;
    justify-content:center;
    padding:0;
    width:40px;
  }
  /* pill CTAs — the class must sit on the li so these beat the generic .nav>li>a reset */
  .site-header .main-header .nav>li.header-cta>a{
    border-radius:999px;
    font-size:14px;
    padding:10px 20px;
    transition:transform .18s ease,box-shadow .18s ease,border-color .2s ease,background-color .2s ease;
    white-space:nowrap;
  }
  .site-header .main-header .nav>li.header-cta>a:hover{
    transform:translateY(-1px);
  }
  .site-header .main-header .nav>li.header-cta-ghost>a,
  .site-header .main-header .nav>li.header-cta-ghost>a:focus,
  .site-header .main-header .nav>li.header-cta-ghost>a:hover{
    background-color:var(--surface-2);
    border:1px solid var(--border-strong);
    color:var(--text);
  }
  .site-header .main-header .nav>li.header-cta-primary>a,
  .site-header .main-header .nav>li.header-cta-primary.open>a,
  .site-header .main-header .nav>li.header-cta-primary>a:focus,
  .site-header .main-header .nav>li.header-cta-primary>a:hover{
    background:linear-gradient(135deg,var(--purple),var(--blue));
    border-color:transparent;
    box-shadow:0 8px 20px -8px rgba(139,92,246,.65);
    color:#fff;
  }
}
/* Tablet through small desktop: tighter rhythm and short nav labels.
   Bootstrap reveals the "Ringtones" suffix again at 1200px, but brand + four full
   labels + two CTAs need ~1440px, so the suffix stays hidden until there is room. */
@media (min-width:768px) and (max-width:1439px){
  .site-header .main-header .navbar-nav>li>a .hidden-md,
  .site-header .main-header .nav>li.header-cta>a .hidden-md{
    display:none;
  }
  .site-header .main-header .container-fluid{
    gap:12px;
    padding-left:16px;
    padding-right:16px;
  }
  .site-header .main-header .navbar-collapse{
    gap:12px;
  }
  .site-header .main-header .navbar-nav{
    gap:2px;
  }
  .site-header .main-header .navbar-nav>li>a{
    font-size:14px;
    padding:9px 10px;
  }
  .site-header .main-header .header-actions{
    gap:8px;
  }
  .site-header .main-header .nav>li.header-cta>a{
    padding:9px 14px;
  }
}
.site-header .main-header .navbar-toggle .icon-bar{
  background-color:var(--text-muted);
}
.site-header .main-header .mobile-search-btn{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border:none;
  border-radius:12px;
  color:#fff;
}
.dropdown-menu{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  padding:6px;
}
.dropdown-menu>li>a{
  border-radius:var(--radius-sm);
  color:var(--text-muted);
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover{
  background-color:var(--surface-2);
  color:var(--text);
}
.dropdown-menu .divider{
  background-color:var(--border);
}

/* ---------- hero ---------- */
.hero{
  margin-bottom:10px;
  overflow:hidden;
  padding:52px 0 34px;
  position:relative;
}
.hero-inner{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  text-align:center;
  z-index:2;
}
.hero .eyebrow{
  align-items:center;
  background:rgba(23,201,194,.1);
  border:1px solid rgba(23,201,194,.32);
  border-radius:999px;
  color:var(--teal-2);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  gap:8px;
  letter-spacing:.3px;
  padding:7px 14px 7px 12px;
}
[data-theme="dark"] .hero .eyebrow{
  color:var(--teal);
}
.hero .eyebrow .dot{
  background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(23,201,194,.18);
  flex-shrink:0;
  height:7px;
  width:7px;
}
.hero .hero-title{
  /* scales with the viewport instead of stepping at 768px, where the old pair of
     sizes left a 27px title on a 767px screen and a 44px one a pixel later */
  font-size:clamp(26px,13px + 2.3vw,44px);
  font-weight:700;
  letter-spacing:-.5px;
  line-height:1.1;
  margin:0;
  max-width:820px;
}
.hero .hero-title .grad{
  background:linear-gradient(100deg,var(--purple),var(--pink) 45%,var(--orange) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .hero-sub{
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  margin:0;
  max-width:620px;
}
.hero .hero-search{
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:999px;
  box-shadow:var(--shadow-card);
  display:flex;
  gap:10px;
  margin-top:2px;
  max-width:600px;
  padding:8px 8px 8px 20px;
  width:100%;
}
.hero .hero-search>i{
  color:var(--text-faint);
  flex-shrink:0;
  font-size:15px;
}
.hero .hero-search input{
  background:none;
  border:none;
  color:var(--text);
  flex:1;
  font-size:15px;
  min-width:0;
  outline:none;
}
.hero .hero-search input::placeholder{
  color:var(--text-faint);
}
.hero .hero-search .btn{
  flex-shrink:0;
  padding:10px 22px;
}
.hero .stat-strip{
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  justify-content:center;
  margin-top:4px;
}
.hero .stat-strip .num{
  font-size:22px;
  font-weight:700;
}
.hero .stat-strip .lbl,
.hero .stat-strip .lbl a{
  color:var(--text-faint);
  font-size:12.5px;
  margin-top:2px;
}
.hero .stat-strip .lbl a:focus,
.hero .stat-strip .lbl a:hover{
  color:var(--text);
}
/* ambient equaliser behind the hero copy */
.hero .wave-bg{
  align-items:flex-end;
  bottom:0;
  display:flex;
  justify-content:space-between;
  left:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  opacity:.13;
  overflow:hidden;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  z-index:1;
}
.hero .wave-bg span{
  animation:mr-wave 1.6s ease-in-out infinite;
  background:linear-gradient(180deg,var(--purple),var(--blue));
  border-radius:4px;
  flex:0 0 5px;
  transform-origin:bottom;
}
@keyframes mr-wave{
  0%,100%{ transform:scaleY(.3); }
  50%{ transform:scaleY(1); }
}
@media (prefers-reduced-motion:reduce){
  .hero .wave-bg span{
    animation:none;
  }
}

/* ---------- section headings ---------- */
.heading{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:var(--text);
  font-size:clamp(19px,16px + .5vw,22px);
  font-weight:500;
  letter-spacing:-.2px;
  line-height:1.35;
  padding:0 0 0 16px;
  position:relative;
}
.heading:before{
  content:"";
  position:absolute;
  /* .clearfix sets display:table on this same pseudo-element, which collapses it to
     zero height once it is absolutely positioned */
  display:block;
  left:0;
  top:.15em;
  bottom:.15em;
  width:5px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--purple),var(--blue));
}
.heading a,
.heading a:focus,
.heading a:hover{
  color:var(--text);
}
.heading .sort-button-container .sort-button{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-muted);
  font-weight:600;
}
.heading .sort-button-container .sort-button:focus,
.heading .sort-button-container .sort-button:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

/* ---------- tab pills ---------- */
.my-new-tabs .nav-tabs{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  display:inline-flex;
  gap:6px;
  padding:6px;
}
.my-new-tabs .nav-tabs>li{
  float:none;
  margin:0;
}
.my-new-tabs .nav-tabs li a,
.my-new-tabs .nav-tabs li a:focus,
.my-new-tabs .nav-tabs li a:hover{
  background:transparent;
  border:none;
  border-radius:999px;
  color:var(--text-muted);
  font-weight:600;
  margin:0;
  padding:9px 18px;
}
.my-new-tabs .nav-tabs li a:hover{
  background:var(--surface-2);
  color:var(--text);
}
.my-new-tabs .nav-tabs li.active a,
.my-new-tabs .nav-tabs li.active a:active,
.my-new-tabs .nav-tabs li.active a:focus,
.my-new-tabs .nav-tabs li.active a:hover{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 6px 16px -6px rgba(139,92,246,.6);
  color:#fff;
}

/* ---------- ringtone card ---------- */
.one-sound-list.ringtone-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  color:var(--text);
  padding:18px 16px 16px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
/* the card's colour comes from a soft two-point wash rather than a flat gradient */
.one-sound-list.ringtone-card:before{
  content:"";
  position:absolute;
  display:block;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:auto;
  transform:none;
  opacity:var(--wash);
  background:
    radial-gradient(120% 120% at 15% 0%,var(--c1),transparent 60%),
    radial-gradient(120% 120% at 100% 100%,var(--c2),transparent 55%);
}
.one-sound-list.ringtone-card:hover{
  border-color:var(--border-strong);
  box-shadow:0 18px 34px -16px rgba(20,20,60,.45);
  transform:translateY(-5px);
}
.one-sound-list.ringtone-card:hover:before{
  opacity:var(--wash);
}
.one-sound-list.ringtone-card.card-grad-1{background:var(--surface);--c1:var(--blue);--c2:var(--blue-2)}
.one-sound-list.ringtone-card.card-grad-2{background:var(--surface);--c1:var(--purple);--c2:var(--purple-2)}
.one-sound-list.ringtone-card.card-grad-3{background:var(--surface);--c1:var(--pink);--c2:var(--pink-2)}
.one-sound-list.ringtone-card.card-grad-4{background:var(--surface);--c1:var(--teal);--c2:var(--teal-2)}
.one-sound-list.ringtone-card.card-grad-5{background:var(--surface);--c1:var(--orange);--c2:var(--orange-2)}
.one-sound-list.ringtone-card.card-grad-6{background:var(--surface);--c1:var(--green);--c2:var(--green-2)}
.one-sound-list.ringtone-card.card-grad-7{background:var(--surface);--c1:var(--blue-2);--c2:var(--purple)}
.one-sound-list.ringtone-card.card-grad-8{background:var(--surface);--c1:var(--red);--c2:var(--red-2)}

/* download count and partner flag read as quiet chips at the top of the card */
.one-sound-list.ringtone-card .button-wrapper .play-button-container .total-downloads,
.one-sound-list.ringtone-card .button-wrapper .play-button-container a.total-downloads,
.one-sound-list.ringtone-card .button-wrapper .play-button-container .partner-badge{
  background-color:var(--chip-bg);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:none;
  color:var(--text-muted);
  font-size:11.5px;
  font-weight:600;
  padding:5px 10px;
  text-shadow:none;
}
.one-sound-list.ringtone-card:hover .button-wrapper .play-button-container .total-downloads,
.one-sound-list.ringtone-card:hover .button-wrapper .play-button-container a.total-downloads,
.one-sound-list.ringtone-card:hover .button-wrapper .play-button-container .partner-badge{
  background-color:var(--chip-bg);
}
.one-sound-list.ringtone-card .button-wrapper .play-button-container{
  padding:74px 0 14px;
}
.one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button{
  background-color:var(--overlay);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--border-strong);
  box-shadow:none;
  color:var(--c1);
  font-size:24px;
  height:58px;
  width:58px;
}
.one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button i{
  color:inherit;
}
.one-sound-list.ringtone-card:hover .button-wrapper .play-button-container .play-button{
  background-color:var(--overlay-strong);
  box-shadow:none;
  transform:scale(1.06);
}
.one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button:hover i,
.one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button:focus i{
  color:inherit;
}
.one-sound-list.ringtone-card .info-wrapper .song-info h3.name a{
  color:var(--text);
  font-size:15px;
  font-weight:500;
  text-shadow:none;
}
.one-sound-list.ringtone-card .info-wrapper .song-info h3.name a:focus,
.one-sound-list.ringtone-card .info-wrapper .song-info h3.name a:hover{
  color:var(--text);
  text-shadow:none;
}
/* category tag */
.one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a{
  background:var(--overlay);
  border-radius:9px;
  box-shadow:none;
  color:var(--text);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2px;
  padding:8px 6px;
}
.one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a:active,
.one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a:focus,
.one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a:hover{
  background:var(--overlay-strong);
  box-shadow:none;
  color:var(--text);
  filter:none;
  transform:none;
}
/* download button */
.one-sound-list.ringtone-card .info-wrapper .song-info .download-container a{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border:none;
  border-radius:9px;
  box-shadow:none;
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  padding:9px 6px;
}
.one-sound-list.ringtone-card .info-wrapper .song-info .download-container a:active,
.one-sound-list.ringtone-card .info-wrapper .song-info .download-container a:focus,
.one-sound-list.ringtone-card .info-wrapper .song-info .download-container a:hover{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 18px -10px var(--c2);
  color:#fff;
  filter:brightness(1.06);
  transform:none;
}

/* ---------- view more ---------- */
.view-more,
.padding-sm>.btn-block.btn-primary,
.padding-sm>.btn-block.btn-primary:active,
.padding-sm>.btn-block.btn-primary:focus,
.padding-sm>.btn-block.btn-primary:hover{
  align-items:center;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(76,141,255,.14));
  border:1px solid var(--border-strong);
  border-radius:16px;
  box-shadow:none;
  color:var(--text);
  display:flex;
  filter:none;
  font-size:14.5px;
  font-weight:600;
  gap:8px;
  justify-content:center;
  margin-top:26px;
  padding:15px;
  text-decoration:none;
  transform:none;
  transition:background .2s ease;
}
.view-more:focus,
.view-more:hover,
.padding-sm>.btn-block.btn-primary:focus,
.padding-sm>.btn-block.btn-primary:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(76,141,255,.24));
  color:var(--text);
  text-decoration:none;
}
.view-more svg{
  display:block;
  flex-shrink:0;
}

/* ---------- panels: top channels, trending ---------- */
.heading,
.ringtones-list-container .heading{
  margin-bottom:14px;
}
.site-box{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.ringtones-list-container .heading{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.ringtones-list-container ul.site-box{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
  padding:8px 14px;
}
.ringtones-list-container ul li{
  background-color:transparent;
  border-bottom:1px solid var(--border);
  padding:11px 6px;
}
.ringtones-list-container ul li:hover{
  background-color:transparent;
}
.ringtones-list-container ul li a{
  color:var(--text);
  font-size:14px;
  font-weight:600;
}
.ringtones-list-container ul li a:hover{
  color:var(--text);
}
.ringtones-list-container ul li a small{
  color:var(--text-faint);
  font-weight:500;
}
.one-sound-list-small{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:none;
}
.one-sound-list-small .song-info-small h3 a{
  color:var(--text);
  font-weight:500;
}
.one-sound-list-small .song-info-small h3 small{
  color:var(--text-faint);
}

/* Two-column band: Top Channels + Trending (docs/template/frequency-ringtones-redesign.html) */
.band{
  align-items:stretch;
  display:grid;
  gap:24px;
  grid-template-columns:1.35fr 1fr;
  margin:20px 0;
}
@media (max-width:991px){
  .band{
    grid-template-columns:1fr;
  }
}

/* Side panels: Top Channels (.chan-list) and Trending Now (.trend-card).
   Scoped to .side-panel so Bootstrap's own .panel elsewhere is untouched.
   Both grow to fit every row — no height cap and no inner scroller. */
.panel.side-panel{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  margin-bottom:20px;
  padding:22px 20px;
}
/* Must follow .panel.side-panel: equal specificity, so source order decides.
   Inside the band the grid gap owns the spacing and both columns stretch to
   the same height. */
.band > .side-panel,
.band > .ringtones-list-container.panel{
  margin-bottom:0;
  min-height:0;
}
.side-panel .panel-head,
.side-panel .trend-foot{
  flex-shrink:0;
}
.side-panel .trend-foot{
  margin-top:4px;
}
.side-panel .chan-list,
.side-panel .trend-list{
  flex:1 1 auto;
  overflow:visible;
}
.side-panel .trend-list{
  padding-bottom:8px;
}
.side-panel .chan-list:focus,
.side-panel .trend-list:focus{
  outline:none;
}
.side-panel .panel-head{
  align-items:center;
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-bottom:12px;
}
.side-panel .panel-head h2,
.side-panel .panel-head h3{
  background:none;
  border:none;
  border-radius:0;
  color:var(--text);
  font-size:17px;
  font-weight:500;
  margin:0;
  padding:0;
}
.side-panel .panel-head h2 a,
.side-panel .panel-head h3 a{
  color:var(--text);
}
.side-panel .panel-head h2 a:focus,
.side-panel .panel-head h2 a:hover,
.side-panel .panel-head h3 a:focus,
.side-panel .panel-head h3 a:hover{
  color:var(--purple);
  text-decoration:none;
}

/* channel rows */
.chan-list .chan-row{
  align-items:center;
  border-bottom:1px solid var(--border);
  color:var(--text);
  display:flex;
  gap:14px;
  padding:11px 6px;
  text-decoration:none;
  transition:background-color .2s ease;
}
.chan-list .chan-row:last-child{
  border-bottom:none;
}
.chan-list .chan-row:focus,
.chan-list .chan-row:hover{
  background-color:var(--overlay);
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
}
.chan-list .chan-rank{
  color:var(--text-faint);
  flex-shrink:0;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  text-align:center;
  width:22px;
}
.chan-list .chan-avatar{
  align-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border-radius:11px;
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:13px;
  font-weight:700;
  height:38px;
  justify-content:center;
  letter-spacing:.4px;
  width:38px;
}
.chan-list .chan-name{
  flex:1;
  font-size:14px;
  font-weight:500;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chan-list .chan-count{
  color:var(--text-faint);
  flex-shrink:0;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
/* One channel keeps one colour wherever it appears — the Top Channels row, the
   /channels card and the channel page hero all pick the same index off its id.
   These only carry the pair; whoever wants a fill paints it from --c1/--c2, so
   the /channels card can tint its wash and button without taking the gradient
   as its own background. */
.chan-grad-1{ --c1:var(--purple); --c2:var(--blue); }
.chan-grad-2{ --c1:var(--green); --c2:var(--teal); }
.chan-grad-3{ --c1:var(--pink); --c2:var(--purple); }
.chan-grad-4{ --c1:var(--orange); --c2:var(--red); }
.chan-grad-5{ --c1:var(--blue); --c2:var(--teal); }
.chan-grad-6{ --c1:var(--red); --c2:var(--pink); }
.chan-grad-7{ --c1:var(--purple); --c2:var(--pink); }

/* Trending cards. Used by the side panel (home "Trending Ringtones", detail
   "Top Ringtones") and by .trend-rows in the detail main column, so these are
   kept unscoped; .trend-rows below only adjusts spacing and type scale. */
.trend-card{
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text);
  display:flex;
  flex-shrink:0;
  gap:12px;
  margin-bottom:10px;
  overflow:hidden;
  padding:12px;
  position:relative;
  text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.side-panel .trend-card:last-child{
  margin-bottom:2px;
}
.trend-card:before{
  background:linear-gradient(120deg,var(--c1),var(--c2));
  content:"";
  display:block;
  bottom:0;
  left:0;
  opacity:.14;
  position:absolute;
  right:0;
  top:0;
}
.trend-card>*{
  position:relative;
  z-index:1;
}
.trend-card:focus,
.trend-card:hover{
  border-color:var(--border-strong);
  color:var(--text);
  text-decoration:none;
  transform:translateY(-2px);
}
.trend-rank{
  color:var(--text-faint);
  flex-shrink:0;
  font-size:20px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  width:28px;
}
.trend-play{
  align-items:center;
  background:var(--overlay-strong);
  border-radius:50%;
  color:var(--text);
  display:flex;
  flex-shrink:0;
  font-size:12px;
  height:36px;
  justify-content:center;
  padding-left:2px;
  width:36px;
}
.trend-info{
  display:block;
  flex:1;
  min-width:0;
}
.trend-info .name{
  display:block;
  font-size:13.5px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trend-info .meta{
  color:var(--text-faint);
  display:block;
  font-size:11.5px;
  margin-top:2px;
}
.trend-grad-1{ --c1:var(--purple); --c2:var(--blue); }
.trend-grad-2{ --c1:var(--blue); --c2:var(--teal); }
.trend-grad-3{ --c1:var(--red); --c2:var(--orange); }
.trend-grad-4{ --c1:var(--pink); --c2:var(--purple); }
.trend-grad-5{ --c1:var(--green); --c2:var(--teal); }
.trend-grad-6{ --c1:var(--orange); --c2:var(--pink); }

/* ---------- categories ---------- */
.section-sub{
  color:var(--text-faint);
  font-size:13.5px;
  margin:2px 0 16px;
}
/* line the sub up with the heading text rather than its accent bar */
.heading+.section-sub{
  margin-left:16px;
}
.section-head{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  margin-bottom:20px;
}
.section-head .heading,
.section-head .section-sub{
  margin-bottom:0;
}
.see-all{
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-muted);
  display:inline-flex;
  flex-shrink:0;
  font-size:13.5px;
  font-weight:600;
  gap:6px;
  padding:8px 14px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
  white-space:nowrap;
}
.see-all:focus,
.see-all:hover{
  background-color:var(--surface);
  border-color:var(--border-strong);
  color:var(--text);
  text-decoration:none;
}
.see-all i{
  font-size:11px;
}
.cat-grid{
  display:grid;
  gap:16px;
  /* the template is a fixed 4 columns; auto-fill keeps that on a full-width
     section while still adapting inside the narrower col-md-8 on /categories */
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.cat-grid .cat-ad{
  grid-column:1/-1;
  /* ad creatives carry fixed pixel widths; without this their min-content would
     stretch every column and push the grid past the viewport on phones */
  min-width:0;
  overflow:hidden;
}
.cat-card{
  border:1px solid var(--border);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:118px;
  overflow:hidden;
  padding:20px 18px;
  position:relative;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease;
}
.cat-card:before{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  bottom:0;
  content:"";
  display:block;
  left:0;
  opacity:.22;
  position:absolute;
  right:0;
  top:0;
  z-index:0;
}
.cat-card:after{
  background:radial-gradient(circle,var(--c1),transparent 70%);
  border-radius:50%;
  content:"";
  display:block;
  height:110px;
  opacity:.35;
  position:absolute;
  right:-30px;
  top:-30px;
  width:110px;
  z-index:0;
}
.cat-card>*{
  position:relative;
  z-index:1;
}
.cat-card:focus,
.cat-card:hover{
  border-color:var(--border-strong);
  text-decoration:none;
  transform:translateY(-4px);
}
.cat-icon{
  align-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border-radius:11px;
  color:#fff;
  display:flex;
  font-size:15px;
  height:38px;
  justify-content:center;
  margin-bottom:14px;
  width:38px;
}
.cat-body{
  display:block;
}
.cat-name{
  color:var(--text);
  display:block;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
}
.cat-count{
  color:var(--text-muted);
  display:block;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}
.cat-grad-1{ --c1:var(--purple); --c2:var(--blue); }
.cat-grad-2{ --c1:var(--blue); --c2:var(--teal); }
.cat-grad-3{ --c1:var(--teal); --c2:var(--green); }
.cat-grad-4{ --c1:var(--green); --c2:var(--teal); }
.cat-grad-5{ --c1:var(--orange); --c2:var(--red); }
.cat-grad-6{ --c1:var(--red); --c2:var(--pink); }
.cat-grad-7{ --c1:var(--pink); --c2:var(--purple); }
.cat-grad-8{ --c1:var(--purple); --c2:var(--pink); }
@media (max-width:720px){
  .cat-grid{
    gap:12px;
    /* minmax(0,…) so a long category name cannot push the track past the viewport */
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cat-card{
    min-height:104px;
    padding:16px 14px;
  }
  .cat-icon{
    height:34px;
    margin-bottom:10px;
    width:34px;
  }
  .cat-name{
    font-size:14px;
  }
}
/* /categories renders the same grid as the home "Browse by Category" band, so it
   runs the full container rather than a column, and picks up the same column
   count at every width. */
.categories-page{
  padding-bottom:48px;
}
.categories-page .categories-list{
  margin-top:14px;
}

/* app.css scopes the home-page tiles as .categories-list .one-category, so the
   theme needs the same specificity to win. */
.categories-list .one-category,
.one-category{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 18px;
  transition:transform .2s ease,border-color .2s ease;
}
.categories-list .one-category:hover,
.one-category:hover{
  border-color:var(--border-strong);
  transform:translateY(-4px);
}
.categories-list .one-category h1,
.one-category h1,
.one-category h2,
.one-category h3{
  font-size:15px;
  font-weight:500;
}
.categories-list .one-category h1 a,
.one-category h1 a,
.one-category h1 a:focus,
.one-category h1 a:hover{
  color:var(--text);
}

/* ---------- pagination ---------- */
/* Template bar (div.pagination + .page-btn / .page-num). Scoped away from
   Bootstrap's ul.pagination so admin numbered pagers stay untouched. */
.my-pagination{
  margin-top:30px;
  text-align:left;
}
.my-pagination .pagination,
div.pagination{
  align-items:center;
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;
  justify-content:space-between;
  margin:0;
  padding:16px 20px;
}
.my-pagination .page-btn,
div.pagination .page-btn{
  align-items:center;
  border-radius:999px;
  color:var(--text-muted);
  display:inline-flex;
  font-size:13.5px;
  font-weight:600;
  gap:6px;
  padding:8px 14px;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.my-pagination .page-btn:focus,
.my-pagination .page-btn:hover,
div.pagination .page-btn:focus,
div.pagination .page-btn:hover{
  background-color:var(--surface-2);
  color:var(--text);
  text-decoration:none;
}
.my-pagination .page-btn.is-disabled,
div.pagination .page-btn.is-disabled{
  cursor:default;
  opacity:.45;
  pointer-events:none;
}
.my-pagination .page-btn svg,
div.pagination .page-btn svg{
  display:block;
  flex-shrink:0;
}
.my-pagination .page-num,
div.pagination .page-num{
  color:var(--text-faint);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
/* Legacy Bootstrap ul.pagination (admin / unused public fallbacks) */
ul.pagination>li>a,
ul.pagination>li>span{
  background-color:var(--surface);
  border-color:var(--border);
  color:var(--text-muted);
}
ul.pagination>li>a:focus,
ul.pagination>li>a:hover{
  background-color:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}
ul.pagination>.active>a,
ul.pagination>.active>a:focus,
ul.pagination>.active>a:hover,
ul.pagination>.active>span{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border-color:transparent;
  color:#fff;
}
ul.pagination>.disabled>a,
ul.pagination>.disabled>span{
  background-color:var(--surface);
  border-color:var(--border);
  color:var(--text-faint);
}
@media (max-width:480px){
  .my-pagination .pagination,
  div.pagination{
    padding:12px 12px;
  }
  .my-pagination .page-btn,
  div.pagination .page-btn{
    font-size:13px;
    padding:8px 10px;
  }
}

/* ---------- footer ---------- */
.footer{
  background-color:var(--bg-soft);
  border-top:1px solid var(--border);
  margin-top:64px;
  padding-bottom:0;
  padding-top:0;
}
/* Brand column + link columns, as in docs/template/frequency-ringtones-redesign.html.
   Below 768px the columns collapse back into the existing mobile accordion. */
.footer .footer-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  padding:24px 0 8px;
}
.footer .footer-col{
  min-width:0;
}
.footer .footer-brand-row{
  margin-bottom:16px;
  max-width:420px;
}
.footer .footer-brand{
  display:inline-block;
}
.footer .footer-logo{
  display:block;
  height:auto;
  max-width:min(280px,100%);
  width:280px;
}
/* light horizontal logo on light theme; dark wordmark on dark theme */
.footer .footer-logo-dark{
  display:none;
}
[data-theme="dark"] .footer .footer-logo-light{
  display:none;
}
[data-theme="dark"] .footer .footer-logo-dark{
  display:block;
}
.footer .footer-brand-tagline{
  color:var(--text-faint);
  font-size:13.5px;
  line-height:1.7;
  margin:14px 0 0;
  max-width:280px;
}
.footer .social-row{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.footer .social-row a{
  align-items:center;
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text-muted);
  display:flex;
  font-size:14px;
  height:34px;
  justify-content:center;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
  width:34px;
}
.footer .social-row a:focus,
.footer .social-row a:hover{
  background-color:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
  text-decoration:none;
}
.footer .list-container h4,
.footer .footer-accordion-toggle{
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.footer .list-container ul,
.footer .footer-accordion-panel{
  background-color:transparent;
}
.footer .list-container ul li a{
  color:var(--text-faint);
}
.footer .list-container ul li a:focus,
.footer .list-container ul li a:hover{
  background-color:var(--surface-2);
  color:var(--text);
}
.footer .footer-bottom{
  align-items:center;
  border-top:1px solid var(--border);
  color:var(--text-faint);
  display:flex;
  flex-wrap:wrap;
  font-size:12.5px;
  gap:8px;
  justify-content:space-between;
  padding:18px 0;
}
.footer .footer-bottom a{
  color:var(--text-muted);
}
.footer .footer-bottom a:focus,
.footer .footer-bottom a:hover{
  color:var(--text);
}
@media (min-width:768px){
  .footer{
    margin-top:80px;
  }
  .footer .footer-grid{
    gap:32px;
    /* brand, Pages, Best Ringtones (two-up year list), Site */
    grid-template-columns:1.4fr 1fr 1.4fr 1fr;
    padding:48px 0 32px;
  }
  .footer .footer-brand-row{
    margin-bottom:0;
  }
  .footer .list-container ul li a{
    font-size:13.5px;
  }
  /* flat columns here, so the mobile pill highlight would look out of place */
  .footer .list-container ul li a:focus,
  .footer .list-container ul li a:hover{
    background-color:transparent;
    color:var(--text);
  }
  .footer .footer-bottom{
    padding:22px 0;
  }
}
@media (min-width:768px) and (max-width:1080px){
  .footer .footer-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
  .footer .footer-brand-row{
    grid-column:1/-1;
    max-width:none;
  }
  /* app.css splits the year list into two tracks; too narrow to do that here,
     every "Best Ringtones 2015" would wrap onto a second line */
  .footer #footer-best{
    column-count:1;
  }
}

/* ---------- ringtone detail page ---------- */
.breadcrumb{
  background-color:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text-muted);
}
.breadcrumb,
.breadcrumb>li>a,
.breadcrumb>.active{
  color:var(--text-muted);
}
.breadcrumb>li>a:focus,
.breadcrumb>li>a:hover{
  color:var(--text);
}
.breadcrumb>li+li:before{
  color:var(--text-faint);
}
.player-container{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.player-container .player .play-pause-button{
  background-color:var(--surface-2);
}
.ringtone-info ul.nav-pills li a{
  border-radius:999px;
  color:var(--text-muted);
}
.ringtone-info ul.nav-pills li a:focus,
.ringtone-info ul.nav-pills li a:hover{
  background-color:var(--surface-2);
  color:var(--text);
}
.ringtone-info ul.nav-pills li.active a,
.ringtone-info ul.nav-pills li.active a:focus,
.ringtone-info ul.nav-pills li.active a:hover{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;
}
/* this one is set on the pane itself, so .site-box alone cannot reach it */
.ringtone-info .tab-content .tab-pane{
  background-color:var(--surface);
  border-radius:var(--radius-lg);
  color:var(--text);
}
.ringtone-info .tab-content.site-box{
  background-color:transparent;
  border:none;
}
.ringtone-info-container,
.ringtone-info-container .desc{
  color:var(--text-muted);
}
/* the keyword paragraph carries an inline colour, so this needs the override */
.ringtone-info-container .desc p{
  color:var(--text-muted) !important;
}

/* ---------- generic buttons ---------- */
.btn{
  border-radius:999px;
  font-weight:600;
}
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border:none;
  box-shadow:0 8px 20px -10px rgba(139,92,246,.65);
  color:#fff;
}
.btn-default,
.btn-default:focus,
.btn-default:hover{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-default:focus,
.btn-default:hover{
  border-color:var(--border-strong);
}

/* ---------- forms, modals, alerts ---------- */
.modal-content{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text);
}
.modal-backdrop.in{
  opacity:.6;
}
.form-control{
  background-color:var(--surface-2);
  border-color:var(--border);
  border-radius:var(--radius-sm);
  box-shadow:none;
  color:var(--text);
}
.form-control::placeholder{
  color:var(--text-faint);
}
.input-group-addon{
  background-color:var(--surface-2);
  border-color:var(--border);
  color:var(--text-muted);
}
.alert{
  border-radius:var(--radius-md);
}
.alert-success{
  background-color:rgba(34,195,127,.12);
  border-color:rgba(34,195,127,.3);
  color:var(--green-2);
}
.alert-danger{
  background-color:rgba(255,82,102,.12);
  border-color:rgba(255,82,102,.3);
  color:var(--red-2);
}
[data-theme="dark"] .alert-success{
  color:var(--green);
}
[data-theme="dark"] .alert-danger{
  color:var(--red);
}
/* Bootstrap's .well keeps its own light background, which left dark-mode forms
   as white slabs with white labels on them. */
.well{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:none;
}
label,
.control-label{
  color:var(--text-muted);
  font-weight:600;
}
.form-control:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}

/* ---------- auth pages: login, signup, password reset ---------- */
/* Fill the viewport under the sticky header so the card sits dead-center */
body:has(.auth-page) .mainContent > .mainContainer > .container.mainContent{
  display:flex;
  flex-direction:column;
  margin-bottom:0 !important;
  margin-top:0;
  min-height:calc(100dvh - 4.75rem);
}
body:has(.auth-page) .dynamicContent{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.auth-page{
  align-items:center;
  display:flex;
  flex:1 1 auto;
  justify-content:center;
  padding:28px 0 40px;
  width:100%;
}
.auth-card{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  max-width:460px;
  overflow:hidden;
  padding:34px 32px 28px;
  position:relative;
  width:100%;
}
.auth-card.auth-card-wide{
  max-width:620px;
}
.auth-card:before{
  background:linear-gradient(90deg,var(--purple),var(--blue) 50%,var(--pink));
  content:"";
  display:block;
  height:3px;
  left:0;
  position:absolute;
  right:0;
  top:0;
}
.auth-head{
  margin-bottom:24px;
  text-align:center;
}
.auth-mark{
  border-radius:14px;
  box-shadow:0 8px 20px -8px rgba(139,92,246,.65);
  display:inline-block;
  height:48px;
  margin-bottom:14px;
  overflow:hidden;
  width:48px;
}
.auth-mark img{
  display:block;
  height:48px;
  width:48px;
}
.auth-title{
  font-size:clamp(20px,17px + .5vw,24px);
  font-weight:500;
  letter-spacing:-.2px;
  line-height:1.35;
  margin:0;
}
.auth-sub{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.55;
  margin:8px 0 0;
}
.auth-form .form-group{
  margin-bottom:16px;
}
.auth-form label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
}
.auth-form .form-control{
  border-radius:12px;
  height:46px;
  padding:10px 16px;
}
.auth-form .btn.auth-submit{
  border-radius:999px;
  font-size:15px;
  margin-top:6px;
  padding:12px 20px;
  width:100%;
}
.auth-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:center;
  margin-top:18px;
}
.auth-links a{
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:600;
}
.auth-links a:focus,
.auth-links a:hover{
  color:var(--purple);
  text-decoration:none;
}
.auth-alt{
  border-top:1px solid var(--border);
  color:var(--text-faint);
  font-size:14px;
  margin-top:24px;
  padding-top:18px;
  text-align:center;
}
.auth-alt a{
  color:var(--purple);
  font-weight:600;
}
.auth-error{
  color:var(--red);
  font-size:13px;
  margin-top:6px;
}
.auth-social{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}
.auth-divider{
  align-items:center;
  color:var(--text-faint);
  display:flex;
  font-size:12.5px;
  font-weight:600;
  gap:12px;
  letter-spacing:.2px;
  margin-bottom:4px;
  text-transform:uppercase;
}
.auth-divider:before,
.auth-divider:after{
  background:var(--border);
  content:"";
  flex:1 1 auto;
  height:1px;
}
.auth-social-btn{
  align-items:center;
  background:var(--overlay);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:12px;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.auth-social-btn:focus,
.auth-social-btn:hover{
  background:var(--surface-2,var(--overlay-strong));
  border-color:var(--border-strong);
  color:var(--text);
  text-decoration:none;
  transform:translateY(-1px);
}
.auth-social-icon{
  align-items:center;
  display:inline-flex;
  flex-shrink:0;
  height:18px;
  justify-content:center;
  width:18px;
}
.auth-social-apple{
  color:var(--text);
}
[data-theme="dark"] .auth-social-apple{
  color:#fff;
}
@media (max-width:767px){
  body:has(.auth-page) .mainContent > .mainContainer > .container.mainContent{
    min-height:calc(100dvh - 3.75rem);
  }
  .auth-page{
    padding:20px 0 28px;
  }
  .auth-card{
    padding:26px 20px 22px;
  }
}

@media (max-width:767px){
  .site-header{
    position:static;
  }
  /* four pills cannot sit on one line on a phone, and inline-flex would push the
     whole page wider than the viewport rather than wrapping */
  .my-new-tabs .nav-tabs{
    border-radius:var(--radius-md);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
  }
  .my-new-tabs .nav-tabs li a,
  .my-new-tabs .nav-tabs li a:focus,
  .my-new-tabs .nav-tabs li a:hover{
    padding:8px 14px;
  }
  .one-sound-list.ringtone-card .button-wrapper .play-button-container{
    padding:74px 0 14px;
  }
  .hero{
    padding:30px 0 22px;
  }
  .hero-inner{
    gap:14px;
  }
  .hero .hero-sub{
    font-size:14.5px;
  }
  .hero .hero-search{
    padding:6px 6px 6px 16px;
  }
  .hero .hero-search .btn{
    padding:9px 16px;
  }
  .hero .stat-strip{
    gap:22px;
  }
  .hero .wave-bg{
    opacity:.1;
  }
}

/* ============================================================================
   Ringtone detail page — docs/template/mobilesringtones-detail-redesign.html

   Restyles the existing player / tabs / list markup. The only view changes are
   class hooks plus the wave bars; every href, count and label is untouched.
   ========================================================================== */
.detail-grid{
  align-items:start;
  display:grid;
  gap:26px;
  grid-template-columns:minmax(0,1fr) 340px;
  padding-bottom:40px;
}
.detail-main,
.detail-side{
  min-width:0;
}
/* Detail breadcrumb mirrors the redesign template without inheriting Bootstrap's
   list-item separators or its default 20px bottom margin. */
.detail-breadcrumb{
  align-items:center;
  background-color:var(--surface);
  border-radius:12px;
  display:flex;
  font-size:13.5px;
  gap:0;
  margin:26px 0 22px;
  min-width:0;
  overflow:hidden;
  padding:12px 18px;
}
.detail-breadcrumb a{
  color:var(--text-muted);
  flex-shrink:0;
  font-weight:600;
}
.detail-breadcrumb a:focus,
.detail-breadcrumb a:hover{
  color:var(--text);
  text-decoration:none;
}
.detail-breadcrumb .breadcrumb-separator{
  color:var(--text-faint);
  flex-shrink:0;
  margin:0 6px;
}
.detail-breadcrumb .breadcrumb-current{
  color:var(--text-faint);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:767px){
  .detail-breadcrumb{
    margin:18px 0;
    padding:11px 14px;
  }
}

/* ---------- player card ---------- */
.detail-main .player-container{
  margin-bottom:0;
  overflow:hidden;
  text-align:left;
}
.detail-main .player-container .player .play-pause-button{
  align-items:center;
  background:
    radial-gradient(140% 140% at 10% 0%,rgba(139,92,246,.35),transparent 60%),
    radial-gradient(140% 140% at 100% 100%,rgba(76,141,255,.3),transparent 55%),
    linear-gradient(160deg,#211f38,#171626);
  display:flex;
  height:260px;
  justify-content:center;
  overflow:hidden;
  padding:0;
  position:relative;
}
.player-wave{
  align-items:center;
  bottom:0;
  display:flex;
  gap:4px;
  justify-content:center;
  left:0;
  opacity:.55;
  position:absolute;
  right:0;
  top:0;
}
.player-wave span{
  animation:player-wave 1.4s ease-in-out infinite;
  background:linear-gradient(180deg,var(--purple),var(--blue));
  border-radius:3px;
  width:4px;
}
@keyframes player-wave{
  0%,100%{
    transform:scaleY(.25);
  }
  50%{
    transform:scaleY(1);
  }
}
@media (prefers-reduced-motion:reduce){
  .player-wave span{
    animation:none;
  }
}
.player-container .player .play-pause-button a,
.player-container .player .play-pause-button button,
.player-container .player .play-pause-button a.active,
.player-container .player .play-pause-button a:active,
.player-container .player .play-pause-button a:focus,
.player-container .player .play-pause-button a:hover,
.player-container .player .play-pause-button button.active,
.player-container .player .play-pause-button button:active,
.player-container .player .play-pause-button button:focus,
.player-container .player .play-pause-button button:hover{
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  background-color:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  height:78px;
  position:relative;
  transition:background-color .2s ease,transform .2s ease;
  width:78px;
  z-index:2;
}
.player-container .player .play-pause-button a:focus,
.player-container .player .play-pause-button a:hover,
.player-container .player .play-pause-button button:focus,
.player-container .player .play-pause-button button:hover{
  background-color:rgba(255,255,255,.22);
  transform:scale(1.06);
}
.player-container .player .play-pause-button a i,
.player-container .player .play-pause-button button i,
.player-container .player .play-pause-button a i.fa-pause,
.player-container .player .play-pause-button button i.fa-pause{
  font-size:28px;
}
.detail-main .player-container .player .play-pause-button .player-controls{
  padding:0 18px;
  top:16px;
  z-index:3;
}
.detail-main .player-container .player .play-pause-button .player-controls .time-info{
  font-size:11px;
}
.detail-main .player-container .player .play-pause-button .player-controls .time-info .duration,
.detail-main .player-container .player .play-pause-button .player-controls .time-info .elapsed{
  background-color:rgba(0,0,0,.4);
  border-radius:999px;
  color:#fff;
  padding:4px 10px;
}
.detail-main .player-container .player .play-pause-button .player-controls .progress{
  background-color:rgba(255,255,255,.16);
  border-radius:999px;
  box-shadow:none;
  height:6px;
  overflow:hidden;
}
.detail-main .player-container .player .play-pause-button .player-controls .progress .progress-bar{
  background:linear-gradient(90deg,var(--purple),var(--blue));
  box-shadow:none;
}

/* download / like counters sit under the artwork as the template's stat bar */
.detail-main .player-container .info .actions{
  display:flex;
}
.player-container .info .actions a,
.player-container .info .actions button{
  color:#fff;
  flex:1 1 0;
  float:none;
  font-size:13.5px;
  font-weight:700;
  padding:13px 10px;
  transition:filter .2s ease;
  width:auto;
}
.player-container .info .actions a.download-ringtone,
.player-container .info .actions button.download-ringtone,
.player-container .info .actions a.download-ringtone:active,
.player-container .info .actions a.download-ringtone:focus,
.player-container .info .actions a.download-ringtone:hover,
.player-container .info .actions button.download-ringtone:active,
.player-container .info .actions button.download-ringtone:focus,
.player-container .info .actions button.download-ringtone:hover{
  background:linear-gradient(90deg,var(--red),var(--red-2));
}
.player-container .info .actions a.like-ringtone-button,
.player-container .info .actions button.like-ringtone-button,
.player-container .info .actions a.like-ringtone-button:active,
.player-container .info .actions a.like-ringtone-button:focus,
.player-container .info .actions a.like-ringtone-button:hover,
.player-container .info .actions button.like-ringtone-button:active,
.player-container .info .actions button.like-ringtone-button:focus,
.player-container .info .actions button.like-ringtone-button:hover{
  background:linear-gradient(90deg,var(--blue-2),var(--blue));
  width:auto;
}
.player-container .info .actions a:focus,
.player-container .info .actions a:hover,
.player-container .info .actions button:focus,
.player-container .info .actions button:hover{
  filter:brightness(1.08);
}
.detail-main .player-container .player .title-container{
  padding:20px 24px 24px;
  text-align:center;
}
.detail-main .player-container .player .title-container .title{
  color:var(--text);
  font-size:clamp(18px,15px + .5vw,21px);
  font-weight:600;
  margin:0 0 16px;
  padding:0;
}

/* ---------- description tabs ---------- */
.detail-main #myInfoTabs{
  margin-bottom:26px;
}
.detail-main .ringtone-info ul.nav-pills{
  border-bottom:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:30px 0 0;
}
.detail-main .ringtone-info ul.nav-pills>li{
  float:none;
  margin:0;
}
.detail-main .ringtone-info ul.nav-pills li a,
.detail-main .ringtone-info ul.nav-pills li a:focus,
.detail-main .ringtone-info ul.nav-pills li a:hover,
.detail-main .ringtone-info ul.nav-pills li.active a,
.detail-main .ringtone-info ul.nav-pills li.active a:focus,
.detail-main .ringtone-info ul.nav-pills li.active a:hover{
  background:transparent;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--text-faint);
  font-size:14.5px;
  font-weight:600;
  margin-bottom:-1px;
  padding:12px 18px;
}
.detail-main .ringtone-info ul.nav-pills li a:focus,
.detail-main .ringtone-info ul.nav-pills li a:hover{
  color:var(--text-muted);
}
.detail-main .ringtone-info ul.nav-pills li.active a,
.detail-main .ringtone-info ul.nav-pills li.active a:focus,
.detail-main .ringtone-info ul.nav-pills li.active a:hover{
  border-bottom-color:var(--purple);
  color:var(--text);
}
.detail-main .ringtone-info .tab-content .tab-pane{
  border:1px solid var(--border);
  margin-top:18px;
  padding:24px;
}
.detail-main .ringtone-info-container{
  display:flex;
  flex-wrap:wrap;
  font-size:13.5px;
  gap:6px 22px;
}
.detail-main .ringtone-info-container>div strong{
  color:var(--text);
  font-weight:600;
}
/* scoped to the meta lines: the format buttons below are links too */
.detail-main .ringtone-info-container>div>strong a{
  color:var(--teal-2);
  font-weight:600;
}
[data-theme="dark"] .detail-main .ringtone-info-container>div>strong a{
  color:var(--teal);
}
.detail-main .ringtone-info-container .desc,
.detail-main .ringtone-info-container>.margin-top-md{
  flex:0 0 100%;
}
.detail-main .ringtone-info-container .desc p{
  font-size:13.5px !important;
  line-height:1.7;
  margin:6px 0 0 !important;
}
.detail-main .ringtone-info-container>.margin-top-md{
  margin-top:18px;
}
.detail-main .download-ringtone-container .ringtone-download{
  display:flex;
  gap:12px;
}
.detail-main .download-ringtone-container .ringtone-download>a{
  border:none;
  border-radius:12px !important;
  color:#fff;
  flex:1 1 0;
  /* the buttons are still a Bootstrap .btn-group-justified, which sizes its cells
     with width:1% and lets table-layout stretch them. Flex ignores that table
     layout, so the 1% has to be dropped or it survives as the real width. */
  width:auto;
  font-size:14px;
  font-weight:700;
  /* spacing between the two buttons comes from the flex gap alone */
  margin-bottom:0;
  margin-top:0;
  padding:13px 10px;
  transition:filter .18s ease,transform .18s ease;
}
.detail-main .download-ringtone-container .ringtone-download>a.button-4{
  background:linear-gradient(90deg,var(--red),var(--red-2));
}
.detail-main .download-ringtone-container .ringtone-download>a.button-3{
  background:linear-gradient(90deg,#3a3a52,#2a2a40);
  border:1px solid var(--border-strong);
}
.detail-main .download-ringtone-container .ringtone-download>a:focus,
.detail-main .download-ringtone-container .ringtone-download>a:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
}

/* ---------- section heads ---------- */
.detail-main .related-audios .heading{
  font-size:19px;
  font-weight:600;
  margin:38px 0 16px;
}
.heading.heading-alt:before{
  background:linear-gradient(180deg,var(--pink),var(--orange));
}
.heading.heading-teal:before{
  background:linear-gradient(180deg,var(--teal),var(--green));
}

/* ---------- Related Ringtones rows ----------
   Same .trend-card as the Trending panel, scaled up for the full-width
   main column. Ad markup injected between rows stays a normal flex item. */
.trend-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.trend-rows .trend-card{
  gap:14px;
  margin-bottom:0;
  padding:14px 16px;
}
.trend-rows .trend-card:hover{
  transform:translateX(3px);
}
.trend-rows .trend-rank{
  font-size:21px;
  width:32px;
}
.trend-rows .trend-play{
  font-size:13px;
  height:38px;
  width:38px;
}
.trend-rows .trend-info .name{
  font-size:14px;
  font-weight:600;
}
.trend-rows .trend-info .meta{
  font-size:12px;
}
@media (max-width:767px){
  .trend-rows .trend-card{
    padding:12px;
  }
  .trend-rows .trend-rank{
    font-size:18px;
    width:26px;
  }
}

.rank-rows .song-info-small h3{
  font-size:14px;
  line-height:1.35;
  margin:0;
  padding:0;
}

/* ---------- sidebar ---------- */
.detail-panel{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:20px;
  padding:22px 20px;
}
.detail-panel .heading{
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
  padding-left:14px;
}
.detail-panel .heading:before{
  width:4px;
}
.detail-panel .view-more{
  margin-top:16px;
  padding:13px;
}
/* Top Ringtones: same rows as the main column, numbered and stripped back */
.rank-rows{
  counter-reset:detail-rank;
}
.rank-rows .one-sound-list-small{
  align-items:center;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
  counter-increment:detail-rank;
  display:flex;
  gap:12px;
  margin:0;
  padding:10px 2px;
}
.rank-rows .one-sound-list-small:last-child{
  border-bottom:none;
}
.rank-rows .one-sound-list-small:before{
  color:var(--text-faint);
  content:counter(detail-rank,decimal-leading-zero);
  flex-shrink:0;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  width:24px;
}
.rank-rows .row-dl,
.rank-rows .row-play{
  display:none;
}
.rank-rows .song-info-small{
  flex:1 1 auto;
  min-width:0;
}
.rank-rows .song-info-small h3 a{
  color:var(--text);
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin:0;
  overflow:hidden;
  padding:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-rows .song-info-small h3 small{
  color:var(--text-faint);
  display:block;
  font-size:11.5px;
  margin-top:2px;
  padding:0;
}
/* Tags keep their collapse toggle; the panel just opens expanded now. */
.detail-panel .tag-chip-row{
  flex-wrap:wrap;
  gap:8px;
}
.detail-panel .tag-chip-row.collapsing,
.detail-panel .tag-chip-row.in{
  display:flex;
}
.detail-panel .tag-chip-row>.btn,
.detail-panel .tag-chip-row>.btn:active,
.detail-panel .tag-chip-row>.btn:focus,
.detail-panel .tag-chip-row>.btn:hover{
  background:var(--chip-bg);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:none;
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  margin:0;
  padding:7px 13px;
}
.detail-panel .tag-chip-row>.btn:active,
.detail-panel .tag-chip-row>.btn:focus,
.detail-panel .tag-chip-row>.btn:hover{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  border-color:transparent;
  color:#fff;
  text-decoration:none;
}
.detail-side .panel.side-panel{
  padding:22px 20px;
}

@media (max-width:991px){
  .detail-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:767px){
  .detail-main .player-container .player .play-pause-button{
    height:210px;
  }
  .player-container .player .play-pause-button a,
  .player-container .player .play-pause-button button{
    height:66px;
    width:66px;
  }
  .detail-main .player-container .player .title-container{
    padding:18px 16px 20px;
  }
  .detail-main .ringtone-info ul.nav-pills li a,
  .detail-main .ringtone-info ul.nav-pills li.active a{
    font-size:13.5px;
    padding:10px 12px;
  }
  .detail-main .ringtone-info .tab-content .tab-pane{
    padding:18px 16px;
  }
  .detail-main .download-ringtone-container .ringtone-download{
    flex-direction:column;
  }
  /* stacked, the main axis is vertical: a 0 flex-basis would collapse each button
     to its padding, and only the stretch default gives them the full width */
  .detail-main .download-ringtone-container .ringtone-download>a{
    flex:0 0 auto;
    width:auto;
  }
  .detail-main .related-audios .heading{
    margin-top:30px;
  }
}

/* ---------- six-up ringtone grid ---------- */
/* The card is narrowest between 992px and 1400px — five across on a 970px
   container, then six on a 1170px one — so the artwork block is shortened there
   to stop the card reading as a tall, narrow sliver. Phones keep the full block:
   two across leaves the card wide enough for it. */
@media (min-width:992px) and (max-width:1399px){
  .one-sound-list.ringtone-card .button-wrapper .play-button-container{
    padding:92px 0 10px;
  }
}

/* ---------- ringtone card type scale ----------
   The same card sits in a 250px column at 768px and a 194px one at 992px, so a
   viewport breakpoint sizes its text right at one width and wrong at the other.
   The column is a size container instead and the card scales off its own width,
   which covers the home grid, the detail grid and the listing pages from one set
   of rules. Widths here are the column: 30px of Bootstrap gutter wider than the
   card. Browsers without container query support keep the middle scale. */
.col-ringtone{
  container-name:rt-card;
  container-type:inline-size;
}
/* card 170px or under: 5-up below 1200px, 6-up below 1400px, and phones */
@container rt-card (max-width:200px){
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button{
    font-size:26px;
  }
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .total-downloads,
  .one-sound-list.ringtone-card .button-wrapper .play-button-container a.total-downloads,
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .partner-badge{
    font-size:11px;
  }
  .one-sound-list.ringtone-card .info-wrapper .song-info h3.name a{
    font-size:14px;
  }
  .one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a,
  .one-sound-list.ringtone-card .info-wrapper .song-info .download-container a{
    font-size:12.5px;
    padding:8px;
  }
}
/* card 206px and over: 3-up tablet, and 6-up past 1680px */
@container rt-card (min-width:236px){
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .play-button{
    font-size:32px;
  }
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .total-downloads,
  .one-sound-list.ringtone-card .button-wrapper .play-button-container a.total-downloads,
  .one-sound-list.ringtone-card .button-wrapper .play-button-container .partner-badge{
    font-size:12.5px;
  }
  .one-sound-list.ringtone-card .info-wrapper .song-info h3.name a{
    font-size:16px;
  }
  .one-sound-list.ringtone-card .info-wrapper .song-info .details .author-cat>div a,
  .one-sound-list.ringtone-card .info-wrapper .song-info .download-container a{
    font-size:13.5px;
  }
}
/* Past 1400px the stock 1152px container leaves the six-up row cramped while the
   full-bleed header runs edge to edge, so the content track widens to match. */
@media (min-width:1400px){
  .container{
    width:1340px;
  }
}
@media (min-width:1680px){
  .container{
    width:1480px;
  }
}

/* Width of one ringtone-card column on the home grid, per breakpoint. A .row is
   15px wider than .container on each side, so the track is that padded width
   divided by the column count the float percentages in app.css produce: 3 up
   below 992px, 5 up below 1200px, 6 up above. Card artwork sits 30px inside the
   track. Other grids size against this instead of re-deriving it. */
:root{
  --rt-card-track:250px;  /* row 750 / 3 */
}
@media (min-width:992px){
  :root{ --rt-card-track:194px; }  /* row 970 / 5 */
}
@media (min-width:1200px){
  :root{ --rt-card-track:195px; }  /* row 1170 / 6 */
}
@media (min-width:1400px){
  :root{ --rt-card-track:223px; }  /* row 1340 / 6 */
}
@media (min-width:1680px){
  :root{ --rt-card-track:247px; }  /* row 1480 / 6 */
}

/* Detail page "New Ringtones": the main column shares the row with a 340px
   sidebar, so a fixed column count either crushes the cards or stretches them
   well past their home-page size. Tracks are laid out against the home card
   width instead, and the column is capped at that width so a wide leftover
   becomes gutter rather than an oversized card — the card itself then measures
   the same here as on the home page at every breakpoint.
   Grid also replaces the float row, which removed the ragged wrap that unequal
   card heights used to cause. Bootstrap's float/percentage widths have to be
   unset or they shrink the grid item inside its track. */
.detail-main .related-audios .row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.detail-main .related-audios .row>.col-ringtone{
  float:none;
  width:auto;
}
/* float artifact; grid rows self-clear */
.detail-main .related-audios .row>.clearfix{
  display:none;
}
/* ad creatives stay full-width row breaks */
.detail-main .related-audios .row>.col-sm-12{
  grid-column:1/-1;
}
@media (min-width:768px){
  .detail-main .related-audios .row{
    grid-template-columns:repeat(auto-fill,minmax(var(--rt-card-track),1fr));
  }
  .detail-main .related-audios .row>.col-ringtone{
    margin-left:auto;
    margin-right:auto;
    max-width:var(--rt-card-track);
    width:100%;
  }
}

/* ============================================================================
   Content pages — docs/template/mobilesringtones-about-redesign.html
   About, Partners, Terms, Partners Policy share this shell.
   ========================================================================== */
.page-grid.content-page{
  align-items:start;
  display:grid;
  gap:24px;
  grid-template-columns:290px minmax(0,1fr);
  padding:8px 0 64px;
}
.content-page-main{
  min-width:0;
}

/* Category side nav (not .panel.side-panel — that one is the home trending/channels card) */
.content-side-panel.side-panel{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
  margin:0;
  max-height:none;
  padding:10px;
  position:sticky;
  top:96px;
}
.content-side-panel .side-panel-title{
  color:var(--text-faint);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  padding:14px 16px 10px;
  text-transform:uppercase;
}
.content-side-panel .cat-nav-link{
  align-items:center;
  border-radius:12px;
  color:var(--text-muted);
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:12px;
  padding:11px 16px;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease;
}
.content-side-panel .cat-nav-link:focus,
.content-side-panel .cat-nav-link:hover{
  background-color:var(--surface-2);
  color:var(--text);
  text-decoration:none;
}
.content-side-panel .cat-nav-link.active{
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;
}
.content-side-panel .cat-dot{
  border-radius:50%;
  flex-shrink:0;
  height:8px;
  width:8px;
}
.content-side-panel .cat-dot-blue{ background:var(--blue); }
.content-side-panel .cat-dot-orange{ background:var(--orange); }
.content-side-panel .cat-dot-pink{ background:var(--pink); }
.content-side-panel .cat-dot-red{ background:var(--red); }
.content-side-panel .cat-dot-teal{ background:var(--teal); }
.content-side-panel .cat-dot-purple{ background:var(--purple); }
.content-side-panel .cat-dot-green{ background:var(--green); }
.content-side-panel .cat-nav-link.active .cat-dot{
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}

/* Hero / content card */
.content-page .hero-card{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  padding:38px 40px;
  position:relative;
}
.content-page .hero-card:before{
  background:
    radial-gradient(60% 60% at 90% -10%,var(--purple),transparent 60%),
    radial-gradient(50% 50% at -5% 110%,var(--blue),transparent 60%);
  content:"";
  inset:0;
  opacity:.14;
  pointer-events:none;
  position:absolute;
  z-index:0;
}
.content-page .hero-card>*{
  position:relative;
  z-index:1;
}
.content-page .eyebrow{
  align-items:center;
  background:rgba(23,201,194,.1);
  border:1px solid rgba(23,201,194,.28);
  border-radius:999px;
  color:var(--teal-2);
  display:inline-flex;
  font-size:12.5px;
  font-weight:600;
  gap:8px;
  margin-bottom:16px;
  padding:6px 13px 6px 10px;
}
[data-theme="dark"] .content-page .eyebrow{
  color:var(--teal);
}
.content-page .eyebrow .dot{
  background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(23,201,194,.18);
  height:6px;
  width:6px;
}
.content-page .hero-card h1{
  color:var(--text);
  font-size:clamp(25px,17px + 1.4vw,34px);
  font-weight:700;
  letter-spacing:-.4px;
  margin:0 0 18px;
}
.content-page .hero-card h2{
  color:var(--text);
  font-size:20px;
  font-weight:600;
  margin:28px 0 12px;
}
.content-page .hero-card p,
.content-page .hero-card li{
  color:var(--text-muted);
  font-size:14.5px;
  line-height:1.75;
  margin:0 0 16px;
  max-width:760px;
}
.content-page .hero-card p:last-child,
.content-page .hero-card p:last-of-type{
  margin-bottom:0;
}
.content-page .hero-card a.inline-link,
.content-page .news-item a{
  color:var(--teal-2);
  font-weight:600;
}
[data-theme="dark"] .content-page .hero-card a.inline-link,
[data-theme="dark"] .content-page .news-item a{
  color:var(--teal);
}
.content-page .hero-card a.inline-link:focus,
.content-page .hero-card a.inline-link:hover,
.content-page .news-item a:focus,
.content-page .news-item a:hover{
  text-decoration:underline;
}

/* About stats + brand chips */
.content-page .stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}
.content-page .stat-chip{
  align-items:center;
  background:var(--overlay);
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  flex:1 1 170px;
  gap:12px;
  min-width:170px;
  padding:16px 18px;
}
.content-page .stat-chip .ic{
  align-items:center;
  border-radius:11px;
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:15px;
  height:38px;
  justify-content:center;
  width:38px;
}
.content-page .stat-chip .ic-purple{ background:linear-gradient(135deg,var(--purple),var(--blue)); }
.content-page .stat-chip .ic-green{ background:linear-gradient(135deg,var(--green),var(--teal)); }
.content-page .stat-chip .ic-orange{ background:linear-gradient(135deg,var(--orange),var(--red)); }
.content-page .stat-chip .num{
  color:var(--text);
  font-size:18px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  line-height:1.2;
}
.content-page .stat-chip .lbl{
  color:var(--text-faint);
  font-size:11.5px;
  margin-top:1px;
}
.content-page .section-mini-title{
  color:var(--text-faint);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  margin:30px 0 12px;
  text-transform:uppercase;
}
.content-page .brand-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.content-page .brand-chip{
  background:var(--overlay);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  padding:8px 15px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.content-page .brand-chip:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

/* News stories */
.content-page .news-card{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-top:22px;
  padding:32px 36px;
}
.content-page .news-card .section-title{
  align-items:center;
  display:flex;
  gap:12px;
  margin:0 0 18px;
}
.content-page .news-card .section-title .bar{
  background:linear-gradient(180deg,var(--pink),var(--orange));
  border-radius:4px;
  display:block;
  flex-shrink:0;
  height:24px;
  width:5px;
}
.content-page .news-card .section-title h2{
  color:var(--text);
  font-size:clamp(19px,16px + .5vw,22px);
  font-weight:600;
  margin:0;
}
.content-page .news-item{
  align-items:flex-start;
  background:var(--overlay);
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  gap:14px;
  padding:16px;
}
.content-page .news-item .ic{
  align-items:center;
  background:linear-gradient(135deg,var(--red),var(--pink));
  border-radius:11px;
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:14px;
  height:38px;
  justify-content:center;
  width:38px;
}
.content-page .news-item p{
  color:var(--text-muted);
  font-size:13.5px;
  line-height:1.7;
  margin:0;
  max-width:none;
}
.content-page .news-item .src{
  color:var(--text);
  font-style:italic;
}
.content-page .news-item .date{
  color:var(--text-faint);
}

/* Partners list */
.content-page .partners-list{
  list-style:none;
  margin:0;
  padding:0;
}
.content-page .partners-list li{
  margin:0 0 10px;
}

@media (max-width:991px){
  .page-grid.content-page{
    grid-template-columns:minmax(0,1fr);
  }
  .content-side-panel.side-panel{
    position:static;
  }
}
@media (max-width:767px){
  .content-page .hero-card{
    padding:26px 22px;
  }
  .content-page .news-card{
    padding:22px;
  }
}

/* ============================================================================
   Channel hero — /channel/{id}/{slug}
   Replaces the flat .user-profile box, which kept a hard-coded light grey
   background in dark mode and left its text almost unreadable. Same name link,
   join date and ringtone total as before, on the surface card the rest of the
   redesign uses. The avatar reuses the .chan-grad palette from the Top Channels
   panel, so a channel keeps one colour wherever it appears.
   ========================================================================== */
/* Round avatar, name, then one line of pipe-separated figures, stacked and left
   aligned straight on the page background — no card, so the ringtone grid below
   reads as the page's only surface. */
.channel-hero{
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  margin-bottom:26px;
  padding:10px 0 4px;
}
.channel-avatar{
  align-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border-radius:50%;
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:44px;
  font-weight:700;
  height:132px;
  justify-content:center;
  letter-spacing:1px;
  width:132px;
}
.channel-name{
  font-size:clamp(24px,18px + 1.1vw,32px);
  font-weight:700;
  letter-spacing:-.4px;
  line-height:1.2;
  margin:20px 0 8px;
}
.channel-name a{
  color:var(--text);
}
.channel-name a:focus,
.channel-name a:hover{
  color:var(--text);
  text-decoration:none;
}
.channel-stats{
  color:var(--text-muted);
  display:flex;
  flex-wrap:wrap;
  font-size:14.5px;
  gap:0 12px;
}
.channel-stat{
  white-space:nowrap;
}
/* separator lives on the rule rather than the markup so a wrapped row never
   starts with a stray pipe */
.channel-stat + .channel-stat:before{
  color:var(--text-faint);
  content:"|";
  margin-right:12px;
}
@media (max-width:767px){
  .channel-hero{
    margin-bottom:20px;
    padding:4px 0;
  }
  .channel-avatar{
    font-size:34px;
    height:100px;
    width:100px;
  }
  .channel-name{
    margin-top:16px;
  }
  .channel-stats{
    font-size:13.5px;
  }
}

/* ============================================================================
   Channels index — docs/template/mobilesringtones-channels-redesign.html
   Replaces the .one-channel boxes, which kept a hard-coded #f9fafb background
   in dark mode. Every channel link, the join date, the ringtone total, both ad
   slots and the paginator carry over unchanged.
   ========================================================================== */
.page-grid.channels-page{
  align-items:start;
  display:grid;
  gap:26px;
  grid-template-columns:minmax(0,1fr) 340px;
  padding:22px 0 64px;
}
.channels-main,
.channels-side{
  min-width:0;
}
.channels-page .section-title{
  align-items:center;
  display:flex;
  gap:12px;
  margin:0 0 20px;
}
.channels-page .section-title .bar{
  background:linear-gradient(180deg,var(--purple),var(--blue));
  border-radius:4px;
  display:block;
  flex-shrink:0;
  height:24px;
  width:5px;
}
.channels-page .section-title h2{
  color:var(--text);
  font-size:clamp(19px,16px + .5vw,22px);
  font-weight:600;
  margin:0;
}
.channels-page .section-title .count{
  color:var(--text-faint);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.channel-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
/* ad creatives carry fixed pixel widths; without the min-width reset their
   min-content would widen every column and push the grid past the viewport */
.channel-grid .channel-ad{
  grid-column:1/-1;
  min-width:0;
  overflow:hidden;
}
.channel-card{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md,16px);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;
  padding:20px;
  position:relative;
  transition:transform .2s ease,border-color .2s ease;
}
.channel-card:before{
  background:radial-gradient(120% 120% at 0% 0%,var(--c1),transparent 60%);
  content:"";
  display:block;
  inset:0;
  opacity:.12;
  pointer-events:none;
  position:absolute;
}
.channel-card>*{
  position:relative;
  z-index:1;
}
.channel-card:focus-within,
.channel-card:hover{
  border-color:var(--border-strong);
  transform:translateY(-4px);
}
.channel-top{
  align-items:center;
  display:flex;
  gap:13px;
}
.channel-card-avatar{
  align-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border-radius:14px;
  color:#fff;
  display:flex;
  flex-shrink:0;
  font-size:16px;
  font-weight:700;
  height:48px;
  justify-content:center;
  width:48px;
}
.channel-card-id{
  min-width:0;
}
.channel-card-name{
  font-size:15.5px;
  font-weight:600;
  line-height:1.3;
  margin:0;
}
.channel-card-name a{
  color:var(--text);
}
.channel-card-name a:focus,
.channel-card-name a:hover{
  color:var(--text);
  text-decoration:none;
}
.channel-joined{
  color:var(--text-faint);
  font-size:12px;
  margin-top:3px;
}
.channel-bottom{
  align-items:center;
  display:flex;
  gap:10px;
  justify-content:space-between;
  /* the card is a column, so this pins the footer to the bottom when a
     two-line channel name makes one card taller than its neighbours */
  margin-top:auto;
}
.channel-count{
  background:var(--overlay);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  padding:6px 12px;
  white-space:nowrap;
}
.view-channel-btn{
  align-items:center;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  border-radius:999px;
  color:#fff;
  display:inline-flex;
  flex-shrink:0;
  font-size:12.5px;
  font-weight:700;
  gap:5px;
  padding:8px 16px;
  transition:transform .18s ease,filter .18s ease;
}
.view-channel-btn:focus,
.view-channel-btn:hover{
  color:#fff;
  filter:brightness(1.08);
  text-decoration:none;
  transform:translateY(-1px);
}
.channels-page .my-pagination{
  margin-top:26px;
}
@media (max-width:991px){
  .page-grid.channels-page{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:600px){
  .channel-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .channel-card{
    padding:16px;
  }
}

/* The signed-in account page still uses the old .user-profile markup; it only
   needs the hard-coded grey swapped for theme colours. */
.user-profile{
  background-color:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text);
  padding:20px 22px;
}
.user-profile .user-profile-info .name{
  color:var(--text);
}
.user-profile .user-profile-info ul li{
  color:var(--text-muted);
}