/* core colours & layout */
:root { --green:#00c853; --black:#111; --white:#fff; }
body { background: var(--black); color: var(--black); font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.site-box { max-width: 1140px; margin: 0 auto; background: var(--white); border-radius: .75rem; box-shadow: 0 0 20px rgba(0,0,0,.25); padding: 2rem; }

/* navbar */
.navbar { background: var(--green)!important; }
.navbar-brand { color: var(--white)!important; }
.nav-inner { max-width: 1140px; margin: 0 auto; width: 100%; }
.navbar-nav .nav-link { background: var(--black); color: var(--white)!important; border-radius: .25rem; margin: 0 .25rem; padding: .375rem .75rem; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { background: var(--green); }
.navbar-toggler { border-color: rgba(255,255,255,.6); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* footer */
.footer-wrapper { background: #111; color: #f5f5f5; }
.footer-inner { max-width: 1140px; margin: 0 auto; padding: 1rem 2rem; }

/* category pills */
.nav-pills .nav-link { color: var(--black); border: 1px solid transparent; }
.nav-pills .nav-link.active { background: var(--green); color: var(--white); }

/* cards */
.ringtone-card { transition: transform .15s; }
.ringtone-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.15); }

/* pagination */
.page-link { color: var(--green); }
.page-item.active .page-link { background: var(--green); border-color: var(--green); color: var(--white); }

/* alerts */
.alert-info { background: rgba(0,200,83,.15); border-color: rgba(0,200,83,.3); }

/* play button */
.play-btn {
  width: 48px; height: 48px; border-radius: 50%; border:none;
  background: var(--green); color:#fff; font-size:20px; display:flex;
  align-items:center; justify-content:center; transition:background .2s;
}
.play-btn:hover { background:#00e060; }
/* tiny counter icons */
.icon-small { font-size: 13px; margin-right: 3px; vertical-align: -1px; }

/* optional: guarantee readable text on random pastel */
.card-title, .small { color:#111; }