* {
    box-sizing:border-box;
}
html,body {
    margin:0;
    padding:0;
    background:#000;
    color:#f7f1ff;
    font-family:Verdana,Arial,sans-serif;
    font-size:14px;
    line-height:1.3;
}
body {
    min-height:100vh;
    background:radial-gradient(circle at 50% 0,#21004d 0,#08000f 38%,#000 75%);
}
a {
    color:#fff;
    text-decoration:none;
}
a:hover {
    color:#fff;
    text-decoration:none;
}
.wap-device {
    width:750px;
    max-width:calc(100% - 16px);
    margin: auto;
    background:#05000c;
    border:2px solid #5e17c8;
    border-radius:7px;
    box-shadow:0 0 16px rgba(125,34,232,.75),inset 0 0 14px rgba(120,0,255,.12);
    overflow:hidden;
}
.wap-statusbar {
    height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 9px;
    background:#03030a;
    border-bottom:2px solid #6b22d4;
    font-size:13px;
}
.wap-statusbar strong {
    font-size:14px;
    color:#fff;
}
.signal {
    height:18px;
    display:flex;
    align-items:flex-end;
    gap:2px;
}
.signal i {
    display:block;
    width:4px;
    background:#fff;
}
.signal i:nth-child(1) {
    height:6px;
}
.signal i:nth-child(2) {
    height:9px;
}
.signal i:nth-child(3) {
    height:13px;
}
.signal i:nth-child(4) {
    height:17px;
}
.wap-header {
    padding:0 0 0px;
    background:#090011;
}
.wap-brand {
    display:block;
    width:100%;
    height:136px;
    margin:0;
    padding:0;
    border:1px solid #8b32ed;
    border-left:0;
    border-right:0;
    border-radius:0;
    background:#080012 url('../wap-banner.png') center center/cover no-repeat;
    box-shadow:0 0 7px rgba(164,48,255,.45);
    overflow:hidden;
}
.brand-m,.brand-text {
    display:none;
}
.wap-nav {
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-wrap:wrap;
    gap:2px;
    width:100%;
    margin-top:4px;
    padding:3px;
    text-align:center;
    border:1px solid #7625d7;
    border-radius:3px;
    background:linear-gradient(#4c12a8,#250060);
    font-size:13px;
    line-height:1.2;
    overflow:hidden;
}
.wap-nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    flex:1 1 auto;
    padding:5px 6px;
    border:1px solid transparent;
    border-radius:2px;
    white-space:nowrap;
}
.wap-nav a:hover {
    background:#3b087f;
    border-color:#8b32ed;
}
.wap-nav a:first-child {
    font-weight:700;
}
.wap-nav span {
    display:none;
}
.wap-search {
    display:flex;
    gap:5px;
    margin-top:7px;
}
.wap-search input {
    min-width:0;
    flex:1;
    height:34px;
    padding:5px 8px;
    border:1px solid #9d8bb8;
    border-radius:3px;
    background:#f4f1fa;
    color:#17111d;
    font:14px Arial;
}
.wap-search button {
    height:34px;
    padding:0 13px;
    border:1px solid #9a4eff;
    border-radius:3px;
    background:linear-gradient(#7623d5,#4a0b9e);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
.wap-main {
    padding:5px;
    background:#05000c;
}
.wap-section {
    margin:0 0 6px;
    border:1px solid #3f137e;
    border-radius:4px;
    background:linear-gradient(#0c0620,#05000d);
    overflow:hidden;
}
.wap-section>h1,.wap-section>h2 {
    margin:0;
    padding:6px 8px;
    border-bottom:1px solid #7624d5;
    background:linear-gradient(90deg,#4b0da5,#260052);
    font-size:17px;
    color:#fff;
}
.wap-section>h2 {
    font-size:15px;
}
.welcome-panel {
    padding-bottom:6px;
}
.welcome-panel h1 {
    border:0;
    margin:0 0 2px;
    background:linear-gradient(90deg,#4b0da5,#260052);
}
.welcome-panel p {
    margin:5px 8px;
}
.welcome-panel p:last-child {
    color:#fff;
}
.wap-menu {
    border:1px solid #3d127b;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:6px;
    background:#05000d;
}
.wap-menu>a,.category-row,.topic-row {
    display:flex;
    align-items:center;
    min-height:40px;
    padding:5px 8px;
    border-bottom:1px solid #2c0d59;
    background:linear-gradient(90deg,#080219,#05000d);
}
.wap-menu>a:last-child,.category-row:last-child,.topic-row:last-child {
    border-bottom:0;
}
.wap-menu>a:hover,.category-row:hover,.topic-row:hover {
    background:linear-gradient(90deg,#18043a,#090018);
}
.icon {
    width:28px;
    min-width:28px;
    text-align:center;
    font-size:20px;
    line-height:1;
}
.row-copy {
    min-width:0;
    flex:1;
}
.row-copy b {
    display:block;
    font-size:14px;
    color:#fff;
}
.row-copy small {
    display:block;
    color:#c7bfd4;
    font-size:11px;
    line-height:1.25;
}
.arrow {
    margin-left:5px;
    color:#fff;
    font-size:24px;
    font-weight:300;
}
.stats-panel {
    padding-bottom:5px;
}
.stats-panel>h2 {
    margin-bottom:3px;
}
.stats-panel div {
    padding:2px 8px;
    font-size:13px;
}
.stats-panel b {
    color:#fff;
}
.wap-button {
    display:inline-block;
    border:1px solid #8d39ee;
    border-radius:3px;
    padding:6px 11px;
    background:linear-gradient(#5520ca,#341078);
    color:#fff;
    font-weight:700;
    text-align:center;
    cursor:pointer;
}
.wap-button.full {
    display:block;
    margin:0 0 6px;
    width:100%;
    background:linear-gradient(#5122ca,#321078);
}
.wap-button.download {
    background:linear-gradient(#36c62f,#178a19);
    border-color:#67f15e;
}
.wap-button.like {
    background:linear-gradient(#e12d9e,#8b1260);
    border-color:#ff73d2;
}
.wap-button.share {
    background:linear-gradient(#2478df,#104d9c);
    border-color:#65b4ff;
}
.inline-form {
    display:inline;
    margin:0;
}
.actions {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    padding:6px 0 0;
}
.empty {
    padding:8px;
    color:#bbb1ca;
}
.compact-section {
    margin-top:6px;
}
.topic-row {
    min-height:43px;
}
.profile-card {
    display:flex;
    gap:8px;
    padding:7px;
}
.profile-photo {
    width:118px;
    height:148px;
    object-fit:cover;
    border:1px solid #a238ef;
    border-radius:3px;
    background:#120521;
    flex:0 0 auto;
}
.profile-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:50px;
}
.profile-copy {
    min-width:0;
}
.profile-copy h2 {
    margin:1px 0 2px;
    color:#ff62d3;
    font-size:16px;
}
.profile-copy p {
    margin:4px 0;
    font-size:12px;
}
.online-status {
    color:#50ff69;
    font-size:12px;
    margin-bottom:5px;
}
.member-badge {
    display:inline-block;
    padding:2px 5px;
    border-radius:3px;
    background:#29105a;
    border:1px solid #6132a0;
    color:#fff;
    font-size:11px;
}
.ringtone-head {
    display:flex;
    gap:8px;
    padding:7px;
}
.cover-wrap {
    width:105px;
    min-width:105px;
}
.ringtone-cover {
    width:105px;
    height:105px;
    object-fit:cover;
    border:1px solid #8334e8;
    border-radius:3px;
}
.ringtone-info {
    font-size:11px;
    line-height:1.45;
}
.ringtone-info b {
    color:#fff;
}
.audio-wrap {
    padding:4px 7px;
}
.audio-wrap audio {
    width:100%;
    height:42px;
}
.neon-equalizer {
    height:58px;
    margin:2px 7px 5px;
    display:flex;
    align-items:flex-end;
    gap:2px;
    padding:2px 3px;
    background:#010107;
    border:1px solid #331064;
    overflow:hidden;
}
.neon-equalizer .eq-bar {
    flex:1;
    min-width:2px;
    height:var(--eq-h);
    background:linear-gradient(to top,#00bdfb,#d12bff);
    box-shadow:0 0 5px #8d22ff;
}
.ringtone-panel>p {
    padding:0 7px;
}
.dating-banner {
    margin:5px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:12px;
    border:1px solid #8a3ef0;
    border-radius:3px;
    background:linear-gradient(120deg,#17053c,#8a2bba 58%,#ff4bcf);
    font-size:17px;
    text-align:right;
}
.featured-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    padding:6px;
}
.featured-member {
    min-width:0;
    text-align:center;
    font-size:10px;
}
.featured-member img,.feature-placeholder {
    width:100%;
    height:70px;
    object-fit:cover;
    border:1px solid #6630a8;
    border-radius:3px;
    background:#160626;
}
.feature-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}
.featured-member b {
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px;
}
.featured-member small {
    display:block;
    color:#45ff62;
}
.wap-footer {
    padding:5px;
    border-top:1px solid #6b20d3;
    background:#05000c;
    text-align:center;
}
.wap-footer-brand {
    border:1px solid #7f2be2;
    border-radius:3px;
    padding:5px;
    background:linear-gradient(90deg,#33006d,#19002e);
    font-size:14px;
    color:#ff63db;
}
.wap-footer-brand span {
    color:#ffd33d;
    padding:0 5px;
}
.wap-footer-brand small {
    float:right;
    color:#fff;
    font-size:11px;
    padding-top:2px;
}
.wap-footer-nav {
    padding:4px 0 1px;
    font-size:11px;
}
.wap-copy {
    padding-top:2px;
    color:#887e99;
    font-size:10px;
}
.box,.card,.tones {
    margin-top:6px;
    border:1px solid #3d127b;
    border-radius:4px;
    background:#05000d;
    overflow:hidden;
}
.tone {
    display:flex;
    align-items:center;
    gap:7px;
    width:100%;
    min-width:0;
    min-height:52px;
    margin:0;
    padding:6px 7px;
    border:0;
    border-bottom:1px solid #2c0d59;
    border-radius:0;
    background:linear-gradient(90deg,#0a0219,#05000d);
    color:#fff;
}
.tone:last-child {
    border-bottom:0;
}
.tone:hover {
    background:linear-gradient(90deg,#18043a,#090018);
}
.tone .art {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    min-width:38px;
    height:38px;
    border:1px solid #7130b8;
    border-radius:3px;
    background:linear-gradient(#4a168e,#19052f);
    color:#d76cff;
    font-size:20px;
    line-height:1;
    box-shadow:inset 0 0 8px rgba(164,48,255,.22);
}
.tone .info {
    min-width:0;
    flex:1;
    overflow:hidden;
}
.tone .info b {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:13px;
    line-height:1.25;
}
.tone .info small {
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#bdb2ca;
    font-size:10px;
    line-height:1.2;
}
.tone > small {
    display:block;
    min-width:55px;
    color:#a99bb9;
    font-size:10px;
    line-height:1.3;
    text-align:right;
    white-space:nowrap;
}
.tone .play {
    display:flex;
    align-items:center;
    justify-content:center;
    width:31px;
    min-width:31px;
    height:31px;
    border:1px solid #8d39ee;
    border-radius:50%;
    background:linear-gradient(#6520c5,#321078);
    color:#fff;
    font-size:12px;
    box-shadow:0 0 6px rgba(141,57,238,.35);
}
.tone .play:hover {
    background:linear-gradient(#7c2be4,#46138c);
}
.tone,.feature-card,.dating-card,.auth-card,.info-page,.formbox {
    border:1px solid #3f137e;
    border-radius:4px;
    background:#070211;
}
.heading {
    margin:0;
    padding:6px 8px;
    border:1px solid #7624d5;
    border-radius:3px;
    background:linear-gradient(90deg,#4b0da5,#260052);
}
.button {
    display:inline-block;
    border:1px solid #8d39ee;
    border-radius:3px;
    padding:6px 10px;
    background:linear-gradient(#5520ca,#341078);
    color:#fff;
}
.input,select,textarea {
    width:100%;
    padding:7px;
    border:1px solid #8d74ad;
    border-radius:3px;
    background:#f4f1fa;
    color:#17111d;
    font:14px Arial;
}
table {
    width:100%;
    border-collapse:collapse;
}
th,td {
    border:1px solid #351260;
    padding:5px;
    font-size:11px;
}
th {
    background:#260052;
}
@media(max-width:767px) {
html,body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
body {
    padding:0;
}
.wap-device {
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    border-left:0;
    border-right:0;
    border-radius:0;
}
.wap-header {
    width:100%;
    min-width:0;
}
.wap-brand {
    width:100%;
    height:136px;
    background-size:cover;
}
.wap-nav {
    width:100%;
    max-width:100%;
    font-size:10px;
    gap:2px;
    padding:3px;
    justify-content:center;
    overflow:visible;
}
.wap-nav a {
    flex:0 1 auto;
    width:auto;
    min-width:0;
    padding:5px 7px;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
}
.wap-search {
    width:100%;
    min-width:0;
}
.wap-search input {
    min-width:0;
}
.wap-main {
    width:100%;
    min-width:0;
    padding:4px;
}
.ringtone-head {
    flex-wrap:wrap;
}
.profile-card {
    flex-wrap:wrap;
}
.featured-grid {
    grid-template-columns:repeat(3,1fr);
}
}
@media(min-width:768px) {
body {
    padding:14px 0;
}
.wap-device {
    width:750px;
    min-height:0;
}
.wap-header {
    padding:6px 8px 8px;
}
.wap-main {
    padding:8px;
}
.wap-footer {
    padding:8px;
}
.wap-section {
    margin-bottom:8px;
}
}
@media(max-width:430px) {
.wap-statusbar {
    padding:0 7px;
    font-size:11px;
}
.wap-statusbar strong {
    font-size:12px;
}
.wap-brand {
    height:136px;
}
.wap-nav {
    gap:1px;
    padding:2px;
    font-size:9px;
}
.wap-nav a {
    padding:5px 6px;
}
.tone {
    gap:5px;
    padding:6px;
}
.tone .art {
    width:34px;
    min-width:34px;
    height:34px;
    font-size:18px;
}
.tone > small {
    min-width:49px;
    font-size:9px;
}
.tone .play {
    width:29px;
    min-width:29px;
    height:29px;
}
}
@media(max-width:360px) {
.featured-grid {
    grid-template-columns:repeat(2,1fr);
}
.cover-wrap {
    width:85px;
    min-width:85px;
}
.ringtone-cover {
    width:85px;
    height:85px;
}
}
.tones, .box, .card, .wap-section {
    max-width:100%;
}
img, video, audio, iframe, table {
    max-width:100%;
}
textarea, input, select, button {
    max-width:100%;
}
.rating-box {
    padding:7px;
    border-top:1px solid #351260;
}
.rating-summary {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.stars {
    color:#ffd33d;
    font-size:18px;
    letter-spacing:1px;
}
.rating-number {
    font-weight:700;
    color:#fff;
}
.rating-form {
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    margin-top:6px;
}
.rating-form select {
    width:auto;
    min-width:90px;
}
.comments-list {
    padding:0 7px 7px;
}
.comment-card {
    padding:7px 0;
    border-bottom:1px solid #2c0d59;
}
.comment-card:last-child {
    border-bottom:0;
}
.comment-meta {
    color:#c7bfd4;
    font-size:11px;
}
.comment-body {
    margin-top:3px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.comment-form {
    padding:7px;
}
.comment-form textarea {
    min-height:90px;
    resize:vertical;
}
.muted {
    color:#bdb2ca;
}
.flash,.wap-alert {
    padding:7px;
    margin:0 0 6px;
    border:1px solid #6a27a8;
    border-radius:3px;
    background:#140622;
}
.flash.error,.wap-alert.error {
    border-color:#b72d64;
}
.flash.success,.wap-alert.success {
    border-color:#4d9f54;
}
.button.wide {
    width:100%;
}
.button.danger {
    background:linear-gradient(#c52b55,#7e1233);
    border-color:#f05a7e;
}
.admin-page .heading {
    margin-bottom:6px;
}
.moderation-card {
    padding:7px;
    border-bottom:1px solid #351260;
}
.moderation-card h3 {
    margin:3px 0;
}
.moderation-card p {
    margin:4px 0;
}
.admin-nav {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:6px 0;
}
.admin-nav a {
    border:1px solid #6530a2;
    padding:5px 7px;
    border-radius:3px;
    background:#17052e;
}
.faq-list details {
    border-top:1px solid #351260;
    padding:6px 8px;
}
.faq-list summary {
    cursor:pointer;
    font-weight:700;
    color:#fff;
}
.info-page {
    padding-bottom:6px;
}
.contact-box {
    margin:7px;
    padding:7px;
    border:1px solid #4a197f;
    background:#0b0318;
    border-radius:3px;
}
.section {
    margin:0 0 8px;
}
.section>.box,.section>.heading {
    margin-bottom:6px;
}
.kicker {
    display:block;
    color:#ff63db;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:3px;
}
.muted {
    color:#bdb2ca;
}
.auth-shell {
    padding:0;
}
.auth-card {
    padding:8px;
}
.auth-icon {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 6px;
    border:1px solid #a238ef;
    border-radius:50%;
    background:linear-gradient(#5a1ec1,#26004e);
    color:#fff;
    font-weight:700;
    font-size:22px;
    box-shadow:0 0 8px rgba(164,48,255,.45);
}
.auth-card h1 {
    margin:3px 0 5px;
    text-align:center;
    font-size:18px;
}
.auth-card>p.muted {
    text-align:center;
}
.auth-card label {
    display:block;
    margin:7px 0;
    color:#fff;
    font-weight:700;
    font-size:12px;
}
.auth-card label .input,.auth-card label input {
    display:block;
    margin-top:3px;
}
.remember-row {
    display:flex!important;
    align-items:center;
    gap:5px;
}
.remember-row input {
    width:auto!important;
    margin:0;
}
.google-wrap {
    margin:8px 0;
    display:flex;
    justify-content:center;
    min-height:44px;
}
.google-wrap .g_id_signin {
    display:flex;
    justify-content:center;
}
.or {
    text-align:center;
    color:#bdb2ca;
    font-size:11px;
    margin:8px 0;
    position:relative;
}
.or:before,.or:after {
    content:"";
    display:block;
    position:absolute;
    top:50%;
    width:43%;
    height:1px;
    background:#351260;
}
.or:before {
    left:0;
}
.or:after {
    right:0;
}
.auth-links {
    text-align:center;
    font-size:12px;
}
.box p,.wap-section p {
    font-size:12px;
}
.heading h1,.heading h2 {
    margin:2px 0;
}
.button {
    cursor:pointer;
}
.button.alt {
    background:linear-gradient(#3d1a6e,#211035);
}
.danger {
    background:linear-gradient(#c52b55,#7e1233)!important;
    border-color:#f05a7e!important;
}
.tone,.feature-card,.dating-card,.auth-card,.info-page,.formbox {
    overflow:hidden;
}
.tone {
    padding:7px;
    margin-bottom:5px;
}
.tone .info,.tone .art {
    min-width:0;
}
.forum-avatar {
    width:40px;
    height:40px;
    object-fit:cover;
    border:1px solid #7f2be2;
    border-radius:3px;
}
.textarea {
    min-height:100px;
    resize:vertical;
}
.nav-menu {
    font-size:12px;
}
.footer {
    font-size:11px;
}
.wap-main img {
    max-width:100%;
}
form {
    max-width:100%;
}
button,input,select,textarea {
    max-width:100%;
}
@media(max-width:767px) {
.auth-card h1 {
    font-size:16px;
}
}

.neon-equalizer .eq-bar {
    height: var(--eq-h, 12%);
    transition: height 80ms linear;
}

.neon-equalizer.is-playing .eq-bar {
    will-change: height;
}

.wap-language {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin:6px 0 0;
    padding:5px 7px;
    border-top:1px solid #351260;
    background:#08000f;
    font-size:11px;
}
.wap-language label {
    color:#c7bfd4;
}
.wap-language select {
    width:auto;
    min-width:130px;
    padding:4px 6px;
    border:1px solid #8d39ee;
    border-radius:3px;
    background:#16052d;
    color:#fff;
    font:11px Arial;
}
@media(max-width:767px) {
    .wap-language {
        margin-top:5px;
    }
}
.tone-sort {
    display:flex;
    gap:4px;
    margin-top:6px;
}
.tone-sort-link {
    flex:1;
    display:block;
    padding:6px 8px;
    border:1px solid #51208e;
    border-radius:3px;
    background:linear-gradient(#1d0739,#0b0118);
    color:#cfc2df;
    font-size:11px;
    font-weight:700;
    text-align:center;
}
.tone-sort-link.active,
.tone-sort-link:hover {
    border-color:#9a4eff;
    background:linear-gradient(#5520ca,#341078);
    color:#fff;
}

/* Member gallery */
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-top:6px;
}
.gallery-item {
    min-width:0;
    margin:0;
    padding:4px;
    border:1px solid #4a168c;
    border-radius:4px;
    background:linear-gradient(#110321,#05000d);
    overflow:hidden;
}
.gallery-photo-link {
    display:block;
}
.gallery-item img {
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border:1px solid #32105f;
    border-radius:3px;
    background:#090014;
}
.gallery-item figcaption {
    padding:5px 2px 2px;
    color:#bdb2ca;
    font-size:10px;
}
.gallery-item figcaption strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:10px;
}
.gallery-empty {
    grid-column:1/-1;
}
.gallery-item .report-form {
    margin-top:4px;
}

/* Friends cards */
.friends-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-top:6px;
}
.friend-card {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:7px;
    min-width:0;
    padding:6px;
    border:1px solid #3f137e;
    border-radius:4px;
    background:linear-gradient(90deg,#0b0219,#05000d);
}
.friend-avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border:1px solid #7130b8;
    border-radius:3px;
    background:#160626;
    overflow:hidden;
    color:#d76cff;
    font-size:28px;
}
.friend-avatar img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.friend-info {
    min-width:0;
}
.friend-info h3 {
    margin:1px 0 3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}
.friend-info small {
    display:block;
    margin-top:2px;
    color:#aaa0b7;
    font-size:10px;
}
.friend-status {
    display:block;
    font-size:10px;
}
.friend-status.online {
    color:#45ff62;
}
.friend-status.offline {
    color:#8f8798;
}
.friend-actions {
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    min-width:0;
}
.friend-actions .button {
    padding:4px 7px;
    font-size:10px;
}
.friend-actions form {
    margin:0;
}

@media(max-width:600px) {
.gallery-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.friends-grid {
    grid-template-columns:1fr;
}
}
@media(max-width:430px) {
.gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
}
.gallery-item {
    padding:3px;
}
.friend-card {
    grid-template-columns:52px minmax(0,1fr);
    gap:6px;
    padding:5px;
}
.friend-avatar {
    width:52px;
    height:52px;
}
}

/* Forum refresh - keeps the existing WAP 2.0 theme */
.forum-list,.latest-topic-list,.forum-topic-list {
    border-top:1px solid #2c0d59;
}
.forum-card,.latest-topic,.forum-topic-card {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    padding:8px;
    border-bottom:1px solid #2c0d59;
    background:linear-gradient(90deg,#080219,#05000d);
}
.forum-card:last-child,.latest-topic:last-child,.forum-topic-card:last-child {
    border-bottom:0;
}
.forum-card:hover,.latest-topic:hover,.forum-topic-card:hover {
    background:linear-gradient(90deg,#19043d,#090018);
}
.forum-card-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    min-width:40px;
    height:40px;
    border:1px solid #7130b8;
    border-radius:4px;
    background:linear-gradient(#4a168e,#19052f);
    font-size:21px;
}
.forum-card-copy,.latest-topic-copy,.forum-topic-copy {
    min-width:0;
    flex:1;
}
.forum-card-copy b,.latest-topic-copy b,.forum-topic-copy b {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:13px;
}
.forum-card-copy small,.latest-topic-copy small,.forum-topic-copy small {
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#bdb2ca;
    font-size:10px;
}
.forum-card-copy em {
    display:inline-block;
    margin-top:3px;
    color:#ff63db;
    font-size:9px;
    font-style:normal;
}
.forum-card-arrow {
    color:#d76cff;
    font-size:25px;
}
.latest-topic .forum-avatar,.forum-topic-card .forum-avatar {
    width:40px;
    min-width:40px;
    height:40px;
}
.forum-titlebar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px;
    border-bottom:1px solid #3d127b;
    background:linear-gradient(90deg,#0b0319,#05000d);
}
.forum-titlebar h1,.topic-header h1 {
    margin:1px 0 3px;
    font-size:17px;
}
.forum-titlebar p {
    margin:0;
    color:#bdb2ca;
    font-size:10px;
}
.forum-topic-card {
    min-height:58px;
}
.forum-topic-copy small strong {
    color:#fff;
}
.topic-header {
    padding:8px;
    border-bottom:1px solid #3d127b;
    background:linear-gradient(90deg,#0b0319,#05000d);
}
.topic-started {
    color:#aaa0b7;
    font-size:10px;
}
.topic-opening {
    display:flex;
    gap:8px;
    padding:8px;
    background:#070211;
}
.topic-avatar {
    width:48px;
    min-width:48px;
    height:48px;
}
.topic-body,.post-main {
    min-width:0;
    flex:1;
}
.post-user {
    margin-bottom:5px;
    font-size:12px;
}
.post-content {
    color:#eee7f5;
    font-size:12px;
    overflow-wrap:anywhere;
}
.forum-post {
    position:relative;
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    gap:8px;
    padding:8px;
    border-bottom:1px solid #2c0d59;
    background:linear-gradient(90deg,#080219,#05000d);
}
.forum-post:last-of-type {
    border-bottom:0;
}
.post-profile {
    display:flex;
    align-items:flex-start;
    gap:6px;
    min-width:0;
}
.post-profile>div {
    min-width:0;
}
.post-profile b {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}
.post-profile small {
    display:block;
    margin-top:2px;
    color:#aaa0b7;
    font-size:9px;
}
.post-date {
    display:block;
    margin-bottom:4px;
    color:#8f8798;
    font-size:9px;
}
.forum-post .report-form {
    grid-column:1/-1;
}
.reply-box {
    padding:8px;
    border-top:1px solid #3d127b;
    background:#070211;
}
.reply-box h3 {
    margin:0 0 5px;
    font-size:13px;
}
.faq-list {
    padding:4px;
}
.faq-list details {
    margin:0 0 4px;
    border:1px solid #351260;
    border-radius:3px;
    background:#080219;
}
.faq-list details:last-child {
    margin-bottom:0;
}
.faq-list summary {
    padding:6px 7px;
    cursor:pointer;
    color:#fff;
    font-size:11px;
    font-weight:700;
}
.faq-list details p {
    margin:0;
    padding:0 7px 7px;
    color:#c7bfd4;
    font-size:10px;
    line-height:1.4;
}
@media(max-width:600px) {
.forum-titlebar {
    align-items:flex-start;
    flex-direction:column;
}
.forum-titlebar .wap-button {
    width:100%;
}
.forum-post {
    grid-template-columns:1fr;
}
.post-profile {
    align-items:center;
}
.forum-post .report-form {
    grid-column:auto;
}
}
@media(max-width:430px) {
.forum-card,.latest-topic,.forum-topic-card {
    gap:6px;
    padding:7px 6px;
}
.forum-card-icon {
    width:36px;
    min-width:36px;
    height:36px;
    font-size:19px;
}
.latest-topic .forum-avatar,.forum-topic-card .forum-avatar {
    width:36px;
    min-width:36px;
    height:36px;
}
.forum-card-copy b,.latest-topic-copy b,.forum-topic-copy b {
    font-size:12px;
}
.topic-opening,.forum-post,.reply-box {
    padding:6px;
}
}

/* Responsive original logo.png — image itself is unchanged. */
.wap-brand {
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:1px solid #8b32ed;
    border-left:0;
    border-right:0;
    border-radius:0;
    background:#080012;
    box-shadow:0 0 7px rgba(164,48,255,.45);
    overflow:hidden;
    line-height:0;
}
.wap-brand img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    border:0;
    object-fit:contain;
}

@media (max-width:767px) {
    .wap-device {
        width:100%;
        max-width:calc(100% - 8px);
        margin:4px auto;
    }
    .wap-brand img {
        width:100%;
        max-width:100%;
        height:auto;
    }
    .wap-nav {
        flex-wrap:wrap;
    }
    .wap-nav a {
        flex:1 1 auto;
    }
}

/* MagikRingTONEZ — purple theme. Layout dimensions are not changed. */
:root{
    --theme-bg:#17002f;
    --theme-panel:#17002f;
    --theme-deep:#17002f;
    --theme-border:#6f20c9;
    --theme-accent:#6f20c9;
    --theme-glow:#b56cff;
    --theme-link:#fff;
}
body.theme-purple{background:radial-gradient(circle at 50% 0,var(--theme-accent) 0,#08000f 38%,#000 75%);}
body.theme-purple .wap-device{background:var(--theme-deep);border-color:var(--theme-border);box-shadow:0 0 16px var(--theme-glow),inset 0 0 14px var(--theme-accent);}
body.theme-purple .wap-statusbar{background:var(--theme-bg);border-bottom-color:var(--theme-accent);}
body.theme-purple .wap-header{background:var(--theme-bg);}
body.theme-purple .top-header{
    background:linear-gradient(120deg,var(--theme-bg),var(--theme-deep));
    border-bottom-color:var(--theme-border);
}
body.theme-purple .logo-container{
    background:var(--theme-bg);
}
body.theme-purple .logo-container img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
    margin:0 auto;
    filter:drop-shadow(0 4px 7px var(--theme-glow));
}
body.theme-purple .wap-nav{border-color:var(--theme-border);background:linear-gradient(var(--theme-accent),var(--theme-bg));}
body.theme-purple .wap-nav a:hover{background:var(--theme-accent);border-color:var(--theme-glow);}
body.theme-purple .wap-search button{border-color:var(--theme-glow);background:linear-gradient(var(--theme-accent),var(--theme-bg));}
body.theme-purple .wap-main{background:var(--theme-deep);}
body.theme-purple .wap-section,body.theme-purple .box{border-color:var(--theme-border);background:linear-gradient(var(--theme-panel),var(--theme-deep));}
body.theme-purple .wap-section>h1,body.theme-purple .wap-section>h2,body.theme-purple .welcome-panel h1{border-bottom-color:var(--theme-accent);background:linear-gradient(90deg,var(--theme-accent),var(--theme-bg));}
body.theme-purple .wap-menu{border-color:var(--theme-border);background:var(--theme-deep);}
body.theme-purple .wap-menu>a,body.theme-purple .category-row,body.theme-purple .topic-row{border-bottom-color:var(--theme-border);background:linear-gradient(90deg,var(--theme-panel),var(--theme-deep));}
body.theme-purple .wap-menu>a:hover,body.theme-purple .category-row:hover,body.theme-purple .topic-row:hover{background:linear-gradient(90deg,var(--theme-accent),var(--theme-deep));}
body.theme-purple .button{border-color:var(--theme-glow);background:linear-gradient(var(--theme-accent),var(--theme-bg));}
body.theme-purple .button.alt{border-color:var(--theme-border);}
body.theme-purple .wap-footer{border-top-color:var(--theme-border);background:linear-gradient(var(--theme-panel),var(--theme-bg));}
body.theme-purple .wap-footer a{color:var(--theme-glow);}
body.theme-purple .unread{border-left:4px solid var(--theme-glow);}

@media(max-width:767px){
    body.theme-purple .top-header{
        width:100%;
        min-height:0;
        height:auto;
    }
    body.theme-purple .logo-container,
    body.theme-purple .logo-container img{
        width:100%;
        max-width:100%;
        height:auto;
    }
}


/* Desktop logo container fix — keep mobile logo sizing unchanged. */
@media(min-width:768px){
    body.theme-purple .logo-container{
        display:inline-block;
        width:auto;
        max-width:100%;
        height:auto;
        margin:0 auto;
        padding:0;
        text-align:center;
        overflow:hidden;
        box-sizing:border-box;
    }

    body.theme-purple .logo-container > a{
        display:block;
        width:auto;
        max-width:100%;
        margin:0;
        padding:0;
    }
}


/* ============================================================
   COMPLETE THEME BUILD
   This theme contains the same HTML selectors/layout rules as
   site.css, followed by the original theme-specific styling.
   ============================================================ */

/* Theme-specific logo variant based on the supplied logo.png.
   The original logo.png remains untouched as the fallback source. */
body.purple .logo-container img {
    content:url("theme-logos/theme-purple.png");
}

/* Dashboard menu cards — purple theme. Uses this theme's existing color variables. */
body.theme-purple .dashboard-card {
    border-color:var(--theme-border);
    background:linear-gradient(135deg,var(--theme-panel),var(--theme-deep));
    box-shadow:inset 0 0 8px var(--theme-accent),0 0 5px rgba(0,0,0,.25);
}
body.theme-purple .dashboard-card strong {
    color:var(--theme-link);
}
body.theme-purple .dashboard-card span {
    color:var(--theme-glow);
}
body.theme-purple .dashboard-card:hover {
    border-color:var(--theme-glow);
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));
    box-shadow:0 0 8px var(--theme-glow),inset 0 0 8px var(--theme-accent);
}
/* Consistent themed pagination */
.pagination,.sports-pagination,.portal-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;width:100%;margin:18px auto;text-align:center;}
.pagination-link,.sports-history-link,.portal-page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:36px;padding:7px 12px;border:1px solid var(--theme-border,#5e17c8);border-radius:6px;background:var(--theme-panel,rgba(0,0,0,.25));color:var(--theme-link,#fff);text-decoration:none;font-weight:700;line-height:1;box-shadow:0 0 5px var(--theme-glow,rgba(127,34,232,.25));transition:transform .15s ease,filter .15s ease,background .15s ease,color .15s ease;}
.pagination-link:hover,.sports-history-link:hover,.portal-page-link:hover{filter:brightness(1.18);transform:translateY(-1px);}
.pagination-link.active,.sports-history-link.active,.portal-page-link.active{background:var(--theme-accent,#7d22e8);border-color:var(--theme-accent,#7d22e8);color:#fff;box-shadow:0 0 9px var(--theme-glow,rgba(127,34,232,.55));}
.pagination-gap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:36px;color:var(--theme-link,#fff);opacity:.8;}
.sports-history-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0;}
.sports-season-cta{display:flex;justify-content:center;margin:8px 0 14px;}
.sports-season-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid var(--theme-border,#5e17c8);border-radius:6px;background:var(--theme-panel,rgba(0,0,0,.25));color:var(--theme-link,#fff);font-weight:700;text-decoration:none;box-shadow:0 0 7px var(--theme-glow,rgba(127,34,232,.3));}
.sports-season-button:hover{filter:brightness(1.18);}
@media(max-width:520px){.pagination-link,.sports-history-link,.portal-page-link{min-width:34px;min-height:34px;padding:7px 9px;font-size:12px}.pagination,.sports-pagination,.portal-pagination{gap:4px;margin:14px auto;}}