/*
 * MagikRingTONEZ — Aero Vista Blue Theme
 * Organized alphabetically by selector.
 * Responsive overrides are grouped at the end by breakpoint.
 * Original blue/cyan Aero Vista palette and existing component class names retained.
 */

:root {
    --bg: #0b1b32;
    --panel: #0C1C2C;
    --panel2: #102437;
    --line: #65AAFF;
    --text: #f3f9ff;
    --muted: #b8d5ec;
    --neon: #55b8ff;
    --cyan: #8be3ff;
    --good: #78e6b0;
    --bad: #ff8190;
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    background: radial-gradient(circle at 50% 0%, #061626 0, #020910 36%, #010509 100%);
    color: var(--text);
    font:
    16px/1.5 system-ui,
    -apple-system,
    Segoe UI,
    Arial,
    sans-serif;
}

#ringtoneAudio {
    display: block;
    width: 100%;
    margin: 8px 0 14px;
}


.avatar-btn {
    background: linear-gradient(#06b6d4, #0e7490);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.2rem;
    max-width: calc(100% - 54px);
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid var(--cyan);
    border-radius: 8px;
    color: var(--cyan);
    box-shadow: 0 0 12px #8be3ff55;
}

.brand:hover {
    text-decoration: none;
}

.comment-btn {
    background: linear-gradient(#3b82f6, #1d4ed8);
}

.cpanel {
    max-width: 850px;
    margin: 18px auto;
}

.danger-zone {
    border-color: #ef4444;
}

.delete-btn {
    background: linear-gradient(#ef4444, #991b1b);
}

.edit-btn {
    background: linear-gradient(#64748b, #334155);
}

.error {
    border-color: var(--bad);
    color: var(--bad);
}

.foot-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.forum-list,
.online-list {
    display: grid;
    gap: 10px;
}

.forum-meta,
.online-meta {
    color: var(--muted);
    font-size: 0.88rem;
}

.forum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 5px 0;
    padding: 8px 10px;
}

.forum-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.forum-row-icon {
    display: block;
    width: 40px;
    height: 40px;
    min-width: 40px;
    object-fit: contain;
    flex: 0 0 40px;
    background: transparent;
}

.forum-row-text {
    min-width: 0;
}

.forum-row h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.forum-row p {
    margin: 2px 0 0;
    line-height: 1.3;
}

.forum-row-count {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.88rem;
}

@media (max-width: 480px) {
    .forum-row { gap: 8px; padding: 7px 8px; }
    .forum-row-main { gap: 8px; }
    .forum-row-count { font-size: 0.8rem; }
}

.forum-row strong,
.online-row strong {
    display: block;
    color: #fff;
}

.forum-row,
.online-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, #173454, #0b1b32);
}

.forum-row:hover,
.online-row:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 12px #55b8ff22;
}

.forum-stats .tile {
    background: linear-gradient(145deg, #173e62, #0b1b32);
    border-radius: 10px;
    text-align: center;
}

.gallery-btn {
    background: linear-gradient(#22c55e, #15803d);
}

.gallery-full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.guest-badge {
    background: rgba(96, 188, 255, 0.12);
    border-color: rgba(96, 188, 255, 0.25);
    color: #9cddff;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

.hero {
    border: 1px solid var(--neon);
    background: linear-gradient(145deg, rgba(17, 56, 96, 0.96), rgba(5, 23, 41, 0.98));
    padding: clamp(20px, 5vw, 42px);
    border-radius: 12px;
}

.hero h1 {
    font-size: clamp(1.7rem, 5vw, 2.7rem);
    line-height: 1.15;
    margin: 0.2rem 0 1rem;
}

.kick-btn {
    background: linear-gradient(#fb7185, #be123c);
}

.like-btn {
    background: linear-gradient(#d946a8, #a21caf);
}

.members-online-count {
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: 20px;
    color: #b8ffe5;
    background: rgba(40, 220, 157, 0.1);
    border: 1px solid rgba(40, 220, 157, 0.35);
    font-weight: 800;
    font-size: 0.82rem;
}

.members-online-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.members-online-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.members-online-heading h1 {
    margin: 0;
    color: #f3f9ff;
    text-shadow: 0 0 12px rgba(85, 184, 255, 0.35);
}

.members-online-panel {
    border: 1px solid rgba(71, 125, 168, 0.35);
    background: linear-gradient(145deg, rgba(23, 52, 84, 0.96), rgba(9, 13, 31, 0.96));
    box-shadow: 0 0 22px rgba(85, 184, 255, 0.12);
}

.menu-icon {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--cyan);
}

.menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.muted {
    color: var(--muted);
}

.notice {
    padding: 11px;
    border-radius: 6px;
    border: 1px solid var(--good);
    color: var(--good);
    margin: 10px 0;
}

.online-count {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 7px 12px;
    border: 1px solid rgba(91, 255, 190, 0.45);
    border-radius: 20px;
    background: rgba(27, 180, 123, 0.13);
    color: #8fffd0;
    font-weight: 800;
}

.online-empty {
    grid-column: 1/-1;
}

.online-guest {
    color: #a8b5d5;
}

.online-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.online-heading h1 {
    margin: 0;
    color: #f3f9ff;
    text-shadow: 0 0 12px rgba(85, 184, 255, 0.35);
}

.online-heading p {
    margin: 5px 0 0;
}

.online-ip {
    color: #ff7d9a;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.online-member {
    min-width: 140px;
}

.online-member-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(85, 184, 255, 0.18);
    border: 1px solid rgba(71, 125, 168, 0.3);
    color: #b8d5ec;
    font-size: 0.68rem;
    font-weight: 700;
}

.online-member-link {
    color: #8be3ff;
    font-weight: 800;
    text-decoration: none;
}

.online-member-link:hover {
    color: #fff;
    text-shadow: 0 0 9px #55b8ff;
    text-decoration: underline;
}

.online-panel {
    border: 1px solid rgba(71, 125, 168, 0.48);
    background: linear-gradient(145deg, rgba(23, 52, 84, 0.96), rgba(7, 14, 31, 0.98));
    box-shadow: 0 0 18px rgba(85, 184, 255, 0.12);
}
.summary {
     margin: 5px 0 0;
    border: 1px solid rgba(71, 125, 168, 0.48);
    background: linear-gradient(145deg, rgba(23, 52, 84, 0.96), rgba(7, 14, 31, 0.98));
    box-shadow: 0 0 18px rgba(85, 184, 255, 0.12);
}
summary {
display:flex;
align-items:center;
 gap:10px;
 padding:8px;
 border-radius:10px;
    border: 1px solid rgba(71, 125, 168, 0.48);
    background: linear-gradient(145deg, rgba(23, 52, 84, 0.96), rgba(7, 14, 31, 0.98));
    box-shadow: 0 0 18px rgba(85, 184, 255, 0.12);
}
summary a:hover{
display:flex;
align-items:center;
 gap:10px;
 padding:8px;
 border-radius:10px;
    border: 1px solid rgba(0, 255, 255, 0.48);
    background: linear-gradient(145deg, rgba(23, 52, 84, 0.96), rgba(7, 14, 31, 0.98));
    box-shadow: 0 0 18px rgba(0, 92, 92, 0.12);
}
.online-table {
    min-width: 760px;
}

.online-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 7px;
    min-width: 760px;
}

.online-table nav {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.online-table nav a {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(71, 125, 168, 0.18);
    border: 1px solid rgba(71, 125, 168, 0.25);
    color: #b8d5ec;
    text-decoration: none;
}

.online-table nav a:hover {
    background: rgba(85, 184, 255, 0.32);
}

.online-table tbody td {
    padding: 11px 12px;
    border-top: 1px solid rgba(71, 125, 168, 0.20);
    border-bottom: 1px solid rgba(71, 125, 168, 0.20);
    color: #f3f9ff;
    vertical-align: middle;
}

.online-table tbody td:first-child {
    border-left: 1px solid rgba(71, 125, 168, 0.20);
    border-radius: 9px 0 0 9px;
}

.online-table tbody td:last-child {
    border-right: 1px solid rgba(71, 125, 168, 0.20);
    border-radius: 0 9px 9px 0;
}

.online-table tbody tr {
    background: rgba(16, 25, 49, 0.82);
    transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.online-table tbody tr:hover {
    background: rgba(23, 62, 98, 0.94);
    box-shadow: 0 0 12px rgba(85, 184, 255, 0.13);
}

.online-table td code {
    display: inline-block;
    max-width: 260px;
    overflow-wrap: anywhere;
    white-space: normal;
    color: #a7e5ff;
}

.online-table thead th {
    padding: 10px 12px;
    color: #b8d5ec;
    background: rgba(71, 125, 168, 0.18);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.online-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
}

.online-tools form {
    display: grid;
    gap: 6px;
    min-width: 170px;
}

.online-tools input,
.online-tools select {
    margin: 2px 0 6px;
    padding: 8px;
}

.online-tools label {
    font-size: 0.85rem;
}

.online-user-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #0767c7;
    background: #102945;
    color: #55b8ff;
    font-weight: 800;
    text-decoration: none;
}

.online-user-avatar img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.online-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 12px;
    border: 1px solid #0767c7;
    background: linear-gradient(90deg, #062545, #032140, #062545);
    transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.online-user-card:hover {
    border: 1px solid #55b8ff;
    box-shadow: 0 0 13px rgba(6, 79, 152, 1.0);
}

.online-user-details {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.online-user-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    color: #aeb6d5;
    font-size: 0.72rem;
}

.online-user-meta .online-user-role {
    color: #9deaff;
    background: rgba(53, 185, 255, 0.12);
}

.online-user-meta span {
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(6, 79, 152, 1.0);
}

.online-user-name {
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #55b8ff;
    font-weight: 800;
    text-decoration: none;
}

.online-user-name:hover {
    color: #fff;
    text-shadow: 0 0 8px #55b8ff;
}

.panel {
    background: linear-gradient(90deg, rgba(8, 30, 53, 0.9), rgba(4, 17, 30, 0.96));
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 18px;
    margin: 14px 0;
    box-shadow: 0 8px 25px #0003;
}

.panel h1,
.panel h2,
.panel h3 {
    margin-top: 0;
    color: #ffffff;
}

.panel-title {
    margin: 0 0 6px;
    padding: 5px 3px 5px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-weight: 900;
    border: 1px solid #0767c7;
    border-radius: 4px;
    text-shadow: 0 0 5px #000000;
    background: linear-gradient(90deg, #062545, #081E35, #062545);
}

.password-btn {
    background: linear-gradient(#f97316, #c2410c);
}

.profile-action-box,
.profile-card,
.profile-form {
    margin: 15px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(14, 37, 61, 0.75);
}

.profile-actions form {
    margin: 0;
}

.profile-avatar {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    display: grid;
    place-items: center;
    border: 3px solid var(--cyan);
    border-radius: 50%;
    overflow: hidden;
    background: #102945;
    box-shadow: 0 0 18px #55b8ff55;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar span {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--cyan);
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid #ffffff55;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 8px #0003;
    transition:
    filter 0.15s,
    transform 0.15s;
}

.profile-btn:hover {
    filter: brightness(1.16);
    transform: translateY(-1px);
    font-size: inherit;
    text-shadow: none;
}

.profile-card dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.profile-card dl {
    display: grid;
    grid-template-columns: minmax(90px, 0.65fr) 1fr;
    gap: 7px 12px;
    margin: 0;
}

.profile-card dt {
    color: var(--muted);
    font-weight: 700;
}

.profile-card h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.profile-form label,
.profile-action-box label {
    display: block;
    margin: 10px 0;
}

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

.profile-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.profile-gallery a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #061626;
}

.profile-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.profile-gallery span {
    display: block;
    padding: 7px;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.profile-heading h1 {
    margin: 0 0 5px;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(135deg, #183e64, #0b1b32);
}

.profile-page {
    max-width: 1000px;
    margin: 18px auto;
}

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

.profile-stats span {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    font-weight: 700;
}

.profile-stats,
.profile-actions,
.cpanel-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 15px 0;
}

.profile-upload {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 15px 0;
}

.report-btn {
    background: linear-gradient(#f59e0b, #b45309);
}

.ringtone-eq-wrap {
    width: 100%;
    margin: 14px 0 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(77, 185, 239, .55);
    border-radius: 10px;
    background: linear-gradient(180deg, #f5fbff 0%, #dceefa 100%);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.9), 0 2px 8px rgba(32,113,169,.15);
}

.ringtone-equalizer {
    display: block;
    width: 100%;
    height: 76px;
}

.share-btn {
    background: linear-gradient(#26a8dc, #1264a3);
}

.site-foot {
    text-align: center;
    padding: 24px 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
}

.site-head {
    padding: 12px max(16px, calc((100% - 1100px) / 2));
    background: #102945;
    border-bottom: 2px solid var(--neon);
    box-shadow: 0 4px 20px #55b8ff22;
}

.social-facebook {
    background: linear-gradient(180deg, #5c9cff, #1877f2 55%, #0756c9);
}

.social-pinterest {
    background: linear-gradient(180deg, #ff7777, #e60023 55%, #a80019);
}

.social-reddit {
    background: linear-gradient(180deg, #ffb27e, #ff4500 55%, #c42d00);
}

.social-share {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px auto;
    width: 100%;
    text-align: center;
}

.social-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.social-share a:hover {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.2);
    box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.social-share-title {
    font-weight: bold;
    color: inherit;
    margin-right: 5px;
}

.social-telegram {
    background: linear-gradient(180deg, #72d5ff, #229ed9 55%, #0878b5);
}

.social-whatsapp {
    background: linear-gradient(180deg, #63f59a, #25d366 55%, #128c4a);
}

.social-x {
    background: linear-gradient(180deg, #555, #000 60%, #222);
}

.stats-meta {
    color: #8096ad;
    font-size: 10px;
}

.tile {
    border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel2), var(--panel));

    border-radius: 7px;
    padding: 14px;
}

.tile:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 12px #8be3ff33;
}

.tone {
    color: var(--neon);
}

.top-nav {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    background: linear-gradient(145deg, (#122840, #000000));
    border: 1px solid var(--line);
    border-radius: 5px;
}

.top-nav a,
.btn {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: linear-gradient(#2e5d87, #173454);
    color: var(--text);
    font-weight: 700;
}

.top-nav a:hover,
.btn:hover,
.btn:focus {
    background: var(--neon);
    border-color: #ffffff;
    color: #08213a;
    text-decoration: none;
    box-shadow: 0 0 13px #55b8ff88;
}

.top-nav.menu-open {
    display: flex;
}

.vista-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.vista-comment {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(45,95,140,.2);
    border-radius: 9px;
    background: rgba(8, 30, 53, 0.88);
    overflow-wrap: anywhere;
}

.vista-comment textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #7ca9cc;
    border-radius: 8px;
    background: #f7fbff;
    color: #10263d;
}

.vista-eq-canvas {
    display: block;
    width: 100%;
    height: 100px;
    border: 1px solid rgba(34,211,238,.2);
    border-radius: 8px;
    background: #090613;
}

.vista-eq-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin: 0 0 8px;
    color: #67e8f9;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.vista-login-note {
    color: #d4eaff;
}

.vista-play-button,
.vista-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 9px;
    background: linear-gradient(180deg, #8bd5ff 0%, #398bd0 48%, #18528f 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 7px rgba(0,0,0,.25);
    color: #071d35 !important;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.vista-play-button:hover,
.vista-action-button:hover {
    filter: brightness(1.08);
}

.vista-player-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.vista-player-shell {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(17,34,56,.96), rgba(8,15,29,.96));
    box-shadow: inset 0 1px 5px rgba(255,255,255,.12), 0 5px 14px rgba(20,45,75,.22);
    color: #fff;
}

.vista-player-time {
    margin-left: auto;
    color: #d9f7ff;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.vista-rating-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(45,95,140,.25);
    border-radius: 12px;
    background: rgba(8, 30, 53, 0.88);
}

.vista-rating-stars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
}

.vista-rating-stars select {
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid #6c9fc8;
    border-radius: 7px;
    background: #f4faff;
    color: #10263d;
}

.vista-rating-summary {
    color: #d4eaff;
    font-size: .92rem;
}

.vista-ringtone-meta {
    margin: 6px 0 18px;
    color: #d4eaff;
}

.vista-ringtone-panel {
    max-width: 900px;
    margin: 20px auto;
    padding: clamp(14px, 3vw, 26px);
    border: 1px solid #0767c7;
    border-radius: 16px;
    background: linear-gradient(90deg, #062545, #054280, #062545);
    box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 0  #054280;
    color: #f3f9ff;
    box-sizing: border-box;
}

.vista-ringtone-panel * {
    box-sizing: border-box;
}

.vista-ringtone-panel h1,
.vista-ringtone-panel h2 {
    color: #ffffff;
    text-shadow: 0 1px 0 #000000;
}

.vista-seek {
    display: block;
    width: 100%;
    height: 8px;
    margin: 12px 0 2px;
    accent-color: #22d3ee;
    cursor: pointer;
}

.wall-btn {
    background: linear-gradient(#8b5cf6, #5b21b6);
}

.wall-comment {
    margin: 8px 0 8px 16px;
    padding: 10px;
    border-left: 3px solid var(--cyan);
    background: #0b1b32;
    border-radius: 0 8px 8px 0;
}

.wall-comment-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wall-comment-form textarea {
    flex: 1;
    min-width: 0;
}

.wall-post {
    margin: 13px 0;
    padding: 13px;
    border: 1px solid #315c83;
    border-radius: 10px;
    background: #102945;
}

.wall-post p {
    overflow-wrap: anywhere;
}

.wall-post small {
    color: var(--muted);
    font-size: 0.78rem;
}

.wrap {
    width: min(1100px, 100% - 24px);
    margin: 22px auto;
    min-height: 60vh;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff;
    text-shadow: 0 0 9px var(--cyan);
    text-decoration: none;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #0a1b2e;
    color: var(--text);
    font: inherit;
    margin: 5px 0 12px;
}

label {
    font-weight: 700;
    color: #dceeff;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0b1b32;
}

tbody tr:hover {
    background: #173e62;
}

tbody tr:nth-child(even) {
    background: #102945;
}

td form {
    min-width: 180px;
}

td input,
td select {
    min-width: 130px;
}

td,
th {
    padding: 10px 12px;
    border-bottom: 1px solid #315578;
    vertical-align: top;
}

th {
    background: linear-gradient(90deg, #123a60, #1b5685);
    color: #fff;
    text-align: left;
    font-weight: 800;
}

/* Existing responsive rules retained and alphabetized within each query */

@media (max-width: 420px) {
    .brand {
            font-size: 1.02rem;
        }
    .grid {
            grid-template-columns: 1fr;
        }
}

@media (max-width: 430px) {
    .profile-actions {
            gap: 7px;
        }
    .profile-btn {
            flex: 1 1 auto;
        }
    .profile-card {
            padding: 12px;
        }
    .profile-card dd {
            margin-bottom: 8px;
        }
    .profile-card dl {
            grid-template-columns: 1fr;
            gap: 3px;
        }
    .profile-hero {
            gap: 10px;
            padding: 12px;
        }
    .profile-stats span {
            font-size: 0.88rem;
        }
}

@media (max-width: 520px) {
    .vista-play-button,
        .vista-action-button {
            flex: 1 1 100%;
            width: 100%;
        }
    .vista-player-time {
            width: 100%;
            margin-left: 0;
        }
    .vista-ringtone-panel {
            margin: 12px auto;
        }
}

@media (max-width: 520px) {
    .members-online-heading {
            align-items: flex-start;
        }
    .online-user-card {
            gap: 8px;
            padding: 7px;
        }
    .online-user-details {
            gap: 6px;
        }
    .online-user-meta {
            gap: 3px;
            font-size: 0.66rem;
        }
    .online-user-meta span {
            padding: 2px 4px;
        }
    .online-user-name {
            max-width: 34vw;
        }
}

@media (max-width: 600px) {
    .forum-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    .online-table-wrap {
            margin: 0 -6px;
            width: calc(100% + 12px);
        }
}

@media (max-width: 600px) {
    .online-count {
            font-size: 0.8rem;
            padding: 6px 9px;
        }
    .online-heading {
            align-items: flex-start;
        }
    .online-table {
            min-width: 720px;
        }
}

@media (max-width: 700px) {
    .gallery-full {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    .profile-avatar {
            width: 78px;
            height: 78px;
            flex-basis: 78px;
        }
    .profile-btn {
            max-width: 100%;
        }
    .profile-form-grid {
            grid-template-columns: 1fr;
        }
    .profile-gallery {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    .profile-hero {
            align-items: flex-start;
        }
    .profile-sections {
            grid-template-columns: 1fr;
        }
    .wall-comment-form {
            display: block;
        }
}

@media (max-width: 720px) {
    .brand {
            font-size: 1.08rem;
        }
    .grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    .panel {
            padding: 10px;
        }
    .site-head {
            padding: 10px 10px;
        }
    .top-nav {
            flex-direction: column;
        }
    .top-nav a {
            text-align: left;
        }
    .wrap {
            width: calc(100% - 16px);
            margin: 12px auto;
        }
}

@media (min-width: 721px) {
    .site-head {
            padding-top: 14px;
            padding-bottom: 14px;
        }
    .top-nav {
            max-width: 1100px;
            margin: 8px auto 0;
        }
    .top-nav a {
            flex: 0 0 auto;
        }
    .top-nav.menu-open {
            display: flex;
        }
}

/* =========================================================
   RESPONSIVE LAYOUT — tablet, mobile and small screens
   ========================================================= */

@media (max-width: 1024px) {
    .profile-page,
    .cpanel,
    .vista-ringtone-panel {
        max-width: calc(100% - 24px);
    }

    .wrap {
        width: min(100% - 24px, 1100px);
    }

    .profile-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .foot-links,
    .social-share {
        gap: 8px;
    }

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

    .header-row {
        flex-wrap: wrap;
    }

    .hero {
        padding: 22px 16px;
    }

    .online-heading,
    .members-online-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .panel,
    .profile-card,
    .profile-form,
    .profile-action-box {
        padding: 13px;
    }

    .profile-sections,
    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        align-items: flex-start;
    }

    .profile-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .social-share a {
        flex: 1 1 auto;
    }

    .table-wrap,
    .online-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    .wall-comment-form {
        display: block;
    }

    .wall-comment-form button,
    .wall-comment-form .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .brand {
        font-size: 1.02rem;
        min-width: 0;
    }

    .brand-mark,
    .menu-toggle {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .grid,
    .forum-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .online-user-card {
        gap: 8px;
        padding: 7px;
    }

    .online-user-details {
        flex-wrap: wrap;
        gap: 5px;
    }

    .online-user-meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .online-user-name {
        max-width: 100%;
    }

    .profile-avatar {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .profile-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .vista-player-controls {
        align-items: stretch;
    }

    .vista-play-button,
    .vista-action-button {
        flex: 1 1 100%;
        width: 100%;
    }

    .vista-player-time {
        width: 100%;
        margin-left: 0;
    }

    .vista-eq-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .social-share a {
        min-width: calc(50% - 8px);
        padding: 9px 10px;
    }

    .online-table {
        min-width: 680px;
    }
}

@media (max-width: 430px) {
    .grid,
    .forum-stats {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        gap: 10px;
        padding: 12px;
    }

    .profile-stats {
        gap: 7px;
    }

    .profile-stats span {
        font-size: 0.88rem;
        padding: 7px 9px;
    }

    .profile-card dl {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .profile-card dd {
        margin-bottom: 8px;
    }

    .profile-actions {
        gap: 7px;
    }

    .profile-btn {
        flex: 1 1 100%;
    }

    .profile-gallery,
    .gallery-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-title {
        font-size: 1rem;
    }

    .wrap {
        width: calc(100% - 16px);
        margin: 12px auto;
    }

    .vista-ringtone-panel {
        max-width: calc(100% - 16px);
        padding: 12px;
    }
}

@media (max-width: 360px) {
    .brand {
        font-size: 0.94rem;
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .profile-heading h1 {
        font-size: 1.2rem;
        overflow-wrap: anywhere;
    }

    .social-share a {
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Shared community comment cards — Aero Vista blue theme */
.community-comment-card {
    margin: 12px 0;
    padding: 9px 10px 8px;
    border: 1px solid #087e9c;
    border-radius: 3px;
    background: linear-gradient(100deg, #06436b 0%, #03283d 58%, #010b12 100%);
    color: #f4f9ff;
    box-shadow: inset 0 1px 0 rgba(139, 227, 255, .08);
    overflow-wrap: anywhere;
}
.community-comment-head { display:flex; align-items:flex-start; gap:12px; min-height:76px; }
.community-comment-photo { width:85px; height:76px; flex:0 0 85px; display:grid; place-items:center; overflow:hidden; background:transparent; color:#fff; font-weight:800; }
.community-comment-avatar { display:block; width:100%; height:100%; object-fit:cover; }
.community-comment-no-photo { display:grid; place-items:center; width:100%; height:100%; color:#fff; font-weight:900; }
.community-comment-member { min-width:0; padding-top:3px; }
.community-comment-name { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:1.12rem; font-weight:900; line-height:1.2; }
.community-comment-name a { color:#fff; text-decoration:none; }
.community-comment-name a:hover { color:var(--cyan); text-decoration:underline; }
.community-comment-role { font-weight:900; }
.community-comment-facts { font-size:1rem; font-weight:800; line-height:1.25; }
.community-online-dot { width:13px; height:13px; flex:0 0 13px; display:inline-block; border-radius:50%; background:#687786; border:1px solid #a5b6c5; }
.community-online-dot.is-online { background:#00ef32; border-color:#00ef32; box-shadow:0 0 7px rgba(0,239,50,.35); }
.community-comment-body { margin:8px 0 0; font-weight:750; line-height:1.35; white-space:normal; }
.community-comment-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.community-comment-footer > small { color:#b8d5ec; font-size:.72rem; }
.community-comment-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.community-action { display:inline-flex; align-items:center; justify-content:center; min-width:68px; min-height:21px; padding:1px 11px; border:0; border-radius:20px; color:#fff !important; font:800 .82rem/1.2 system-ui,Arial,sans-serif; text-decoration:none; cursor:pointer; }
.community-action.reply { background:#00e52f; }
.community-action.edit { background:#f00035; }
.community-action.report { background:#f00035; }
.community-action-details { position:relative; }
.community-action-details > summary { list-style:none; cursor:pointer; margin:0; padding:1px 11px; border:0; border-radius:20px; box-shadow:none; min-width:68px; min-height:21px; font-size:.82rem; }
.community-action-details > summary::-webkit-details-marker { display:none; }
.community-inline-form { position:absolute; z-index:5; right:0; top:26px; width:min(300px,78vw); padding:9px; display:grid; gap:7px; border:1px solid var(--line); border-radius:8px; background:#061a2b; box-shadow:0 8px 24px #0009; }
.community-inline-form textarea,.community-inline-form input { width:100%; min-width:0; }
.community-inline-form textarea { min-height:65px; }
@media (max-width:480px) {
 .community-comment-card { padding:8px; }
 .community-comment-head { gap:9px; min-height:66px; }
 .community-comment-photo { width:68px; height:66px; flex-basis:68px; }
 .community-comment-name { font-size:1rem; }
 .community-comment-facts { font-size:.88rem; }
 .community-comment-footer { align-items:flex-end; }
 .community-comment-actions { gap:5px; }
 .community-action { min-width:57px; padding:2px 8px; font-size:.75rem; }
}


/* Footer-area breadcrumbs and consistent compact pagination */
.site-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:7px;margin:18px auto 12px;padding:10px 12px;border:1px solid rgba(0,190,230,.55);border-radius:5px;background:linear-gradient(100deg,rgba(0,75,125,.82),rgba(0,18,28,.94));color:#eaf8ff;font-size:.9rem;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.site-breadcrumbs a{color:#fff;text-decoration:none}.site-breadcrumbs a:hover{color:var(--cyan);text-decoration:underline}.breadcrumb-separator{color:var(--cyan);font-size:1.15rem}
.site-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:18px auto 8px;padding:9px 10px;border:1px solid rgba(0,190,230,.45);border-radius:5px;background:rgba(0,24,38,.78);color:#fff;font-weight:800}
.site-pagination a,.site-pagination strong{display:inline-flex;min-width:27px;min-height:27px;align-items:center;justify-content:center;padding:3px 7px;border:1px solid rgba(0,190,230,.55);border-radius:4px;color:#fff;text-decoration:none;background:rgba(0,76,120,.8)}
.site-pagination a:hover{background:#063bff;color:#fff}.site-pagination .pagination-current{background:#0800df;border-color:#21d7ff;color:#fff}.site-pagination .pagination-label,.site-pagination .pagination-gap{padding:0 2px;color:#d7f4ff}.site-pagination .pagination-first,.site-pagination .pagination-last{padding-inline:10px}
.forum-topic-card{margin:12px 0}.forum-topic-title{font-size:1.05rem}.forum-topic-title a{color:#fff;text-decoration:none}.forum-topic-title a:hover{color:var(--cyan);text-decoration:underline}.forum-topic-detail>.community-comment-card{margin-bottom:18px}
@media(max-width:560px){.site-breadcrumbs{font-size:.82rem;gap:5px}.site-pagination{gap:5px;padding:8px 5px}.site-pagination a,.site-pagination strong{min-width:25px;padding:3px 5px}}


/* Consistent site-wide action colours and accessible hover states */
.btn, button.btn, input.btn, a.btn,
.admin-button, .action-button, button:not(.community-action) {
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn { background:linear-gradient(#16b84b,#087b32); border-color:#20d65b; color:#fff; }
.btn:hover,.btn:focus { background:linear-gradient(#28e66a,#0a9b3e); border-color:#8affad; color:#041b0c; box-shadow:0 0 12px rgba(34,230,106,.45); transform:translateY(-1px); }
.btn-edit,.edit-btn,.community-action.edit,.admin-edit { background:linear-gradient(#2685f5,#1553b7)!important; border-color:#65aaff!important; color:#fff!important; }
.btn-edit:hover,.edit-btn:hover,.community-action.edit:hover,.admin-edit:hover { background:linear-gradient(#55a5ff,#1d65d8)!important; box-shadow:0 0 12px rgba(65,145,255,.5); }
.btn-delete,.btn-danger,.delete-btn,.report-btn,.community-action.report,.admin-delete,.admin-report { background:linear-gradient(#f04452,#a90d20)!important; border-color:#ff6875!important; color:#fff!important; }
.btn-delete:hover,.btn-danger:hover,.delete-btn:hover,.report-btn:hover,.community-action.report:hover,.admin-delete:hover,.admin-report:hover { background:linear-gradient(#ff6672,#c5162b)!important; box-shadow:0 0 12px rgba(255,50,70,.5); }
.community-action.reply { background:linear-gradient(#16c94c,#07832d); }
.community-action.edit { background:linear-gradient(#2685f5,#1553b7)!important; }
.community-action.report { background:linear-gradient(#f04452,#a90d20)!important; }
/* Infer action intent from common admin form/button names when legacy markup lacks a class. */
button[name*="edit" i],button[name*="update" i],button[name*="save" i],input[type="submit"][name*="edit" i] { background:linear-gradient(#2685f5,#1553b7); border-color:#65aaff; color:#fff; }
button[name*="delete" i],button[name*="remove" i],button[name*="report" i],input[type="submit"][name*="delete" i],input[type="submit"][name*="report" i] { background:linear-gradient(#f04452,#a90d20); border-color:#ff6875; color:#fff; }
button[name*="approve" i],button[name*="accept" i],button[name*="create" i],button[name*="add" i],button[name*="publish" i] { background:linear-gradient(#16b84b,#087b32); border-color:#20d65b; color:#fff; }
button[name*="edit" i]:hover,button[name*="update" i]:hover,button[name*="save" i]:hover { background:linear-gradient(#55a5ff,#1d65d8); box-shadow:0 0 12px rgba(65,145,255,.5); }
button[name*="delete" i]:hover,button[name*="remove" i]:hover,button[name*="report" i]:hover { background:linear-gradient(#ff6672,#c5162b); box-shadow:0 0 12px rgba(255,50,70,.5); }
button[name*="approve" i]:hover,button[name*="accept" i]:hover,button[name*="create" i]:hover,button[name*="add" i]:hover,button[name*="publish" i]:hover { background:linear-gradient(#28e66a,#0a9b3e); box-shadow:0 0 12px rgba(34,230,106,.45); }
.site-search-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:12px 0 18px;padding:10px;border:1px solid rgba(0,190,230,.35);border-radius:7px;background:rgba(0,28,45,.55)}
.site-search-form label{width:100%;font-weight:800;color:#eaf8ff}.site-search-form input{flex:1 1 220px;min-width:0}.site-search-form button{flex:0 0 auto}
.user-search-results{display:grid;gap:8px;margin-top:12px}.user-search-result{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid rgba(0,190,230,.35);border-radius:7px;background:rgba(0,60,95,.35)}
.user-search-result .community-comment-photo{width:46px;height:46px;flex-basis:46px;border-radius:5px;overflow:hidden}

.btn-edit{background:linear-gradient(#2685f5,#1553b7)!important;border-color:#65aaff!important;color:#fff!important}.btn-delete,.btn-report{background:linear-gradient(#f04452,#a90d20)!important;border-color:#ff6875!important;color:#fff!important}


/* Forum topic management, reactions and sharing */
.forum-options{position:relative;display:inline-block}
.forum-options>summary{list-style:none;cursor:pointer}
.forum-options>summary::-webkit-details-marker{display:none}
.community-action.options{background:linear-gradient(#087db5,#06466d);border:1px solid #27c9f2;color:#fff}
.community-action.options:hover{background:linear-gradient(#13a9e6,#075e91);box-shadow:0 0 11px rgba(0,190,230,.45)}
.forum-options-menu{position:absolute;z-index:20;right:0;top:28px;min-width:155px;display:grid;gap:7px;padding:9px;background:linear-gradient(145deg,#073c60,#031421);border:1px solid rgba(0,210,245,.65);border-radius:8px;box-shadow:0 8px 24px #000b}
.forum-options-menu form{margin:0}.forum-options-menu .community-action{width:100%;box-sizing:border-box}
.forum-topic-reactions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin:12px 0 18px;padding:10px;border:1px solid rgba(0,190,230,.35);border-radius:7px;background:rgba(0,35,55,.55)}
.forum-reaction-form{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.community-action.reaction-like{background:linear-gradient(#16b84b,#087b32);border:1px solid #36e879}
.community-action.reaction-dislike{background:linear-gradient(#b52d3b,#74101d);border:1px solid #f15b69}
.community-action.reaction-like.is-selected,.community-action.reaction-dislike.is-selected{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 12px rgba(255,255,255,.35)}
.community-action.share{background:linear-gradient(#087db5,#06466d);border:1px solid #27c9f2}
.community-action.share:hover{background:linear-gradient(#13a9e6,#075e91);box-shadow:0 0 11px rgba(0,190,230,.45)}
.forum-edit-topic{display:grid;gap:8px;margin:12px 0;padding:12px;border:1px solid rgba(0,190,230,.4);border-radius:7px;background:rgba(0,35,55,.4)}
.forum-edit-topic input,.forum-edit-topic textarea{width:100%;min-width:0;box-sizing:border-box}
.forum-closed-label{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:12px;background:#8d1c2c;color:#fff;font-size:.72rem;font-weight:800}
@media(max-width:480px){.forum-topic-reactions{justify-content:flex-start}.forum-options-menu{right:0;max-width:78vw}}

/* Member identity photos beside usernames site-wide */
.admin-user-avatar { width:40px; height:40px; flex:0 0 40px; object-fit:cover; border-radius:9px; border:1px solid #087e9c; vertical-align:middle; margin-right:8px; }
.wall-post-author { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.wall-post-author .community-comment-photo { width:42px; height:42px; flex:0 0 42px; border-radius:8px; }
.wall-post-author .community-comment-avatar { border-radius:8px; }
.online-member { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }


/* Compact member photos beside usernames: fixed 40x40 everywhere. */
.community-comment-photo { width:40px !important; height:40px !important; flex:0 0 40px !important; overflow:hidden; }
.community-comment-avatar, .admin-user-avatar, .online-user-avatar img { display:block; width:40px !important; height:40px !important; min-width:40px; max-width:40px; flex:0 0 40px; object-fit:cover; }
.wall-post-author .community-comment-photo { width:40px !important; height:40px !important; flex:0 0 40px !important; }


/* Compact latest-topic cards shown beneath each forum in the directory. */
.forum-latest-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 7px;
    margin: 0 0 12px 50px;
}
.forum-latest-card {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
}
.forum-latest-link {
    display: block;
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.forum-latest-link:hover { text-decoration: underline; }
.forum-latest-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.78rem;
}
.forum-latest-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.forum-latest-author .community-comment-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 7px;
}
@media (max-width: 600px) {
    .forum-latest-list { margin-left: 0; grid-template-columns: 1fr; }
    .forum-latest-card { padding: 8px 9px; }
}


/* MagikBot / BotMe admin tools — retain the existing Aero Vista palette */
.admin-bot-page, .admin-page, .magikbot-admin, .admin-ringtone-manager {
    width: min(1180px, calc(100% - 24px));
    margin: 18px auto;
}
.admin-bot-page .box, .admin-page .box, .magikbot-admin .box, .admin-ringtone-manager .box,
.magikbot-admin .dashboard-card, .admin-bot-page .dashboard-card {
    background: linear-gradient(145deg, rgba(23,52,84,.96), rgba(7,24,43,.97));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: 0 8px 24px #0003;
}
.admin-bot-page .heading, .admin-page .heading, .magikbot-heading {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px; margin-bottom:16px;
}
.admin-bot-page .button, .admin-page .button, .magikbot-admin .button, .admin-ringtone-manager .button,
.admin-bot-page button, .magikbot-admin button, .admin-ringtone-manager button {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:36px; padding:7px 12px; border:1px solid #69c9ff;
    border-radius:7px; color:#fff; text-decoration:none; cursor:pointer;
    background:linear-gradient(#2678b5,#16456f); font:inherit;
}
.admin-bot-page .button.alt, .admin-page .button.alt, .magikbot-admin .button.alt, .admin-ringtone-manager .button.alt {
    background:linear-gradient(#31516e,#1a3048); border-color:#668eae;
}
.admin-bot-page input:not([type=hidden]), .admin-bot-page select, .admin-bot-page textarea,
.admin-page input:not([type=hidden]), .admin-page select, .admin-page textarea,
.magikbot-admin input:not([type=hidden]), .magikbot-admin select, .magikbot-admin textarea,
.admin-ringtone-manager input:not([type=hidden]), .admin-ringtone-manager select, .admin-ringtone-manager textarea {
    width:100%; max-width:100%; min-height:38px; padding:8px 10px;
    color:var(--text); background:#071a2c; border:1px solid var(--line);
    border-radius:7px; font:inherit;
}
.admin-bot-page label, .admin-page label, .magikbot-admin label, .admin-ringtone-manager label { color:var(--text); }
.admin-bot-page table, .admin-page table, .magikbot-admin table, .admin-ringtone-manager table { width:100%; border-collapse:collapse; }
.admin-bot-page th, .admin-bot-page td, .admin-page th, .admin-page td, .admin-ringtone-manager th, .admin-ringtone-manager td {
    padding:9px; border-bottom:1px solid rgba(139,227,255,.18); text-align:left; vertical-align:top;
}
.admin-bot-page .list, .admin-ringtone-manager .list { display:grid; gap:7px; margin:10px 0; }
.admin-bot-page .list-row, .admin-ringtone-manager .list-row {
    padding:9px 11px; border:1px solid rgba(139,227,255,.18);
    border-radius:7px; background:rgba(5,20,36,.55);
}
.admin-bot-page .actions, .admin-page .actions, .admin-ringtone-manager .actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.admin-bot-page .small, .admin-ringtone-manager .small, .magikbot-admin .small { color:var(--muted); font-size:.9rem; }
.admin-bot-page .error, .magikbot-admin .magikbot-error { border-color:var(--bad)!important; color:#ffb8c2; }
.admin-bot-page .success, .magikbot-admin .magikbot-success { border-color:var(--good)!important; color:#a8f0c9; }
.admin-bot-page .admin-ringtone-toolbar { display:flex; gap:10px; flex-wrap:wrap; }
.admin-bot-page .admin-ringtone-results, .admin-bot-page .admin-ringtone-counts { margin-top:12px; }
@media(max-width:640px) {
    .admin-bot-page, .admin-page, .magikbot-admin, .admin-ringtone-manager { width:calc(100% - 16px); }
    .admin-bot-page .box, .admin-page .box, .magikbot-admin .box, .admin-ringtone-manager .box,
    .magikbot-admin .dashboard-card { padding:11px; }
    .admin-bot-page table, .admin-page table, .magikbot-admin table, .admin-ringtone-manager table { font-size:.86rem; }
}


/* Google AdSense placements — guest visitors only */
.guest-ad-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 14px auto 18px;
    padding: 8px 0;
    overflow: hidden;
    text-align: center;
}
.guest-ad-unit {
    display: block;
    width: 100%;
    min-height: 90px;
}
@media (max-width: 600px) {
    .guest-ad-wrap { margin: 10px auto 14px; padding: 5px 0; }
    .guest-ad-unit { min-height: 70px; }
}

/* Community friends, messaging and global notification components */
.community-page { overflow-wrap: anywhere; }
.community-list-section { margin-top: 22px; }
.community-list-section h2, .message-compose h2 { margin-bottom: 10px; }
.community-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; margin:10px 0; border:1px solid var(--line,rgba(255,255,255,.18)); border-radius:12px; background:rgba(255,255,255,.035); }
.community-list-user { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.community-list-user > div { min-width:0; }
.community-list-user small, .community-list-user p { display:block; margin:4px 0 0; opacity:.78; }
.community-list-user img.community-comment-avatar { width:44px; height:44px; object-fit:cover; border-radius:50%; flex:0 0 44px; }
.community-list-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.community-list-actions form { display:inline-flex; margin:0; }
.community-list-actions .btn, .community-list-row > form .btn { white-space:nowrap; }
.community-online-dot { width:9px; height:9px; border-radius:50%; background:#888; display:inline-block; flex:0 0 9px; }
.community-online-dot.is-online { background:#35d66f; box-shadow:0 0 8px #35d66f; }
.message-compose { margin:18px 0; padding:14px; border:1px solid var(--line,rgba(255,255,255,.18)); border-radius:12px; }
.message-compose label { display:block; margin:10px 0; }
.message-compose input:not([type=hidden]), .message-compose textarea { display:block; width:100%; box-sizing:border-box; }
.message-tabs { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.message-tabs a, .site-notification-all { padding:8px 12px; border-radius:9px; border:1px solid var(--line,rgba(255,255,255,.18)); }
.message-detail-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line,rgba(255,255,255,.18)); }
.message-detail-body { white-space:pre-wrap; overflow-wrap:anywhere; padding:18px 0; }
.message-attachments { margin:15px 0; }
.notification-row.is-unread { border-color:rgba(80,190,255,.65); background:rgba(70,150,255,.09); }
.notification-row.is-read { opacity:.75; }
.site-notification-flashes { max-width:1100px; margin:12px auto 0; padding:0 14px; }
.site-notification-flash { display:flex; align-items:center; gap:10px; margin:7px 0; padding:10px 13px; border:1px solid rgba(100,190,255,.55); border-radius:10px; background:rgba(35,105,165,.18); }
.site-notification-flash a { flex:1; }
.site-notification-flash form { margin:0; }
.site-notification-flash button { border:0; background:transparent; color:inherit; font-size:20px; cursor:pointer; }
@media(max-width:650px) { .community-list-row { align-items:flex-start; flex-direction:column; } .community-list-actions { justify-content:flex-start; width:100%; } .community-list-actions form { flex:1; } .community-list-actions .btn { width:100%; } }


/* Global green NEW counters shown in the site navigation on every page. */
.global-new-badge {
    display:inline-block;
    margin-left:4px;
    padding:2px 6px;
    border:1px solid rgba(95,255,145,.72);
    border-radius:5px;
    background:linear-gradient(180deg,rgba(25,145,72,.96),rgba(10,92,43,.96));
    color:#d9ffe5 !important;
    font-size:.72em;
    font-weight:800;
    line-height:1.35;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.65);
    box-shadow:0 0 7px rgba(40,230,105,.25);
    vertical-align:middle;
}
.site-notification-flash {
    border-color:rgba(95,255,145,.55);
    background:rgba(15,115,55,.22);
}


/* Gallery, BBCode, favourites and MagikMatch additions. */
.gallery-photo-card { display:inline-flex; flex-direction:column; gap:5px; width:120px; margin:7px; vertical-align:top; text-decoration:none; }
.gallery-photo-card img { width:120px; height:140px; object-fit:cover; border-radius:8px; border:1px solid rgba(139,227,255,.25); }
.gallery-photo-card span,.gallery-photo-card small { overflow-wrap:anywhere; }
.gallery-photo-large { display:block; width:min(100%,480px); max-height:640px; object-fit:contain; margin:12px auto; border-radius:10px; }
.gallery-photo-detail { text-align:center; padding:12px; }
.bbcode-toolbar { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }
.bbcode-tool { display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:28px; padding:4px 7px; border:1px solid rgba(139,227,255,.3); border-radius:6px; background:rgba(5,20,36,.72); color:inherit; cursor:pointer; }
.bbcode-smiley-tool img,.bbcode-smiley { width:20px; height:20px; object-fit:contain; vertical-align:middle; }
.bbcode-toolbar + textarea { width:100%; box-sizing:border-box; }
.match-age-fields { display:flex; gap:12px; }
.match-age-fields label { flex:1; }
.ringtone-favourite-form { margin:12px 0 5px; }
@media(max-width:600px){.match-age-fields{flex-direction:column;gap:0}.gallery-photo-card{width:120px}}
.bbcode-smiley-text { display:inline-block; min-width:20px; text-align:center; font-size:1.15em; line-height:1.2; vertical-align:middle; }

/* Centered green notification alerts. */
.site-notification-flash {
    justify-content:center;
    text-align:center;
    border:1px solid rgba(75,235,125,.85);
    border-radius:14px;
    background:rgba(0, 0, 0, 0.06);
    color:#8dffad;
    box-shadow:0 0 8px rgba(45,220,105,.16), inset 0 0 8px rgba(45,220,105,.06);
}
.site-notification-flash a {
    flex:1;
    color:#8dffad !important;
    text-align:center;
    font-weight:700;
    text-decoration:none;
}
.site-notification-flash a:hover { color:#c5ffd4 !important; text-decoration:underline; }
.site-notification-flash button { color:#8dffad; }
.site-error {
    justify-content:center;
    text-align:center;
    border:1px solid rgba(255, 0, 0, 0) ;
    border-radius:14px;
    background:rgba(0, 0, 0, 0.22);
    color:#FF0000;
    box-shadow:0 0 8px rgba(107, 0, 0, 0) , inset 0 0 8px rgba(0, 0, 0, 0.06);
}


/* News centre — uses the existing Aero Vista blue palette. */
.news-panel,
.news-article-panel,
.news-admin-panel {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}
.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.news-tab {
    display: inline-block;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    text-decoration: none;
    font-weight: 700;
}
.news-tab.active,
.news-tab:hover {
    border-color: var(--cyan);
    color: #fff;
    box-shadow: 0 0 12px #55b8ff33;
}
.news-list {
    display: grid;
    gap: 14px;
}
.news-card {
    display: grid;
    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(23,52,84,.96), rgba(7,14,31,.98));
}
.news-image-link {
    display: block;
    min-height: 150px;
}
.news-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 150px;
    max-height: 230px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(139,227,255,.25);
}
.news-card-body { min-width: 0; }
.news-card h2 {
    margin: 0 0 7px;
    font-size: 1.2rem;
    line-height: 1.3;
}
.news-card h2 a { color: var(--cyan); text-decoration: none; }
.news-card h2 a:hover { color: #fff; text-decoration: underline; }
.news-meta {
    margin: 5px 0 10px;
    color: var(--muted);
    font-size: .86rem;
}
.news-description {
    margin: 8px 0 13px;
    color: var(--text);
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.news-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.news-source-link { color: var(--cyan); font-weight: 700; }
.news-feed-note { margin-top: 18px; font-size: .9rem; }
.news-detail-image {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    margin: 15px auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.news-full-description {
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.8;
    font-size: 1.03rem;
    margin: 18px 0;
}
.news-source-panel,
.news-feed-setting,
.news-refresh-actions {
    padding: 14px;
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(23,52,84,.8), rgba(7,14,31,.85));
}
.news-feed-setting h2,
.news-refresh-actions h2 { margin-top: 0; }
.news-feed-setting label {
    display: block;
    margin: 8px 0 5px;
    font-weight: 700;
}
.news-feed-url {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 10px;
}
.news-enabled {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.news-refresh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.news-refresh-actions h2 { width: 100%; }
.news-refresh-form { margin: 0; }
@media (max-width: 650px) {
    .news-card { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 11px; }
    .news-image-link, .news-image { min-height: 0; max-height: 220px; }
    .news-card h2 { font-size: 1.08rem; }
    .news-actions { align-items: flex-start; }
    .news-tabs { gap: 6px; }
    .news-tab { flex: 1 1 auto; text-align: center; }
}


/* News and weather sections */
.weather-panel { max-width: 1100px; margin-left: auto; margin-right: auto; }
.weather-temperature { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; line-height: 1.1; margin: 8px 0; color: var(--cyan); }
.weather-panel .news-list { margin-top: 14px; }
.weather-panel .tile { margin-bottom: 10px; }


/* Shared breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 12px 0 16px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    color: var(--muted);
    font-size: .88rem;
}
.breadcrumbs a {
    color: var(--cyan);
    text-decoration: none;
}
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb-separator { opacity: .65; }
.breadcrumb-current { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }

/* Live sports scoreboards */
.sports-panel { max-width: 1200px; margin-left: auto; margin-right: auto; }
.sports-grid { align-items: stretch; }
.sports-tile { min-width: 0; }
.sports-tile h2 { margin-top: 0; }
.sports-events { display: grid; gap: 8px; margin: 12px 0; }
.sports-event {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(0,0,0,.14);
}
.sports-event-status { margin: 0 0 7px; color: var(--muted); font-size: .82rem; }
.sports-team {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 5px 0;
    padding: 3px 0;
    color: var(--text);
}
.sports-team strong { font-variant-numeric: tabular-nums; }
.sports-team.winner { color: var(--cyan); font-weight: 700; }
.sports-event-name { margin: 5px 0; font-weight: 700; }
.sports-no-events { color: var(--muted); font-size: .9rem; }
.sports-actions { margin: 12px 0 7px; }
.sports-updated, .sports-feed-note { color: var(--muted); font-size: .82rem; }

/* Australian city weather */
.weather-city-grid { align-items: stretch; }
.weather-city { min-width: 0; }
.weather-city h2 { margin: 2px 0 6px; }
.weather-state { margin: 0; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.weather-condition { margin: 0; color: var(--muted); }
.weather-city .weather-temperature { margin: 5px 0; }
.weather-detail { margin: 5px 0; font-size: .9rem; }
.weather-forecast { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.weather-forecast summary { color: var(--cyan); cursor: pointer; font-weight: 700; }
.weather-forecast-day { margin: 7px 0; font-size: .82rem; line-height: 1.5; }
@media (max-width: 650px) {
    .breadcrumbs { font-size: .82rem; gap: 5px; }
    .sports-team { font-size: .92rem; }
}

/* Default theme card surfaces retained from the original design. */
/* Slightly deepen card surfaces in the default and Aero Vista blue themes. */
body.theme-default .panel,
body.theme-default .card,
body.theme-default .tile,
body.theme-default .forum-row,
body.theme-default .online-row,
body.theme-default .community-list-row,
body.theme-default .community-list-section,
body.theme-default .message-compose {
    background: linear-gradient(145deg, #193550, #102941);
}

/* =========================================================
   MOBILE RINGTONE CATEGORY CARD FIX
   Shared layout correction for Default and every selectable theme.
   Keeps each theme's own colours, borders, shadows and effects.
   ========================================================= */
@media (max-width: 720px) {
    .site-search-form + .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .site-search-form + .grid > .tile {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 10px 9px;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .site-search-form + .grid > .tile h2 {
        min-width: 0;
        margin: 0 0 6px;
        font-size: clamp(0.95rem, 3.8vw, 1.1rem);
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .site-search-form + .grid > .tile p {
        min-width: 0;
        margin: 5px 0 0;
        font-size: 0.88rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .site-search-form + .grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .site-search-form + .grid > .tile {
        padding: 10px 12px;
    }
}



/* Notification centre selection and bulk actions. */
.notification-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:12px 0 16px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(20,35,60,.28);
}
.notification-controls label,
.notification-select {
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
}
.notification-select { flex:0 0 auto; }
.notification-status {
    display:inline-block;
    padding:3px 8px;
    border:1px solid rgba(80,190,255,.55);
    border-radius:20px;
    font-size:.78rem;
}
.dashboard-notifications { margin-top:16px; }
.dashboard-notification-list { display:grid; gap:8px; }
.dashboard-notification-list .community-list-row { margin:0; }
@media(max-width:650px) {
    .notification-controls { align-items:stretch; }
    .notification-controls .btn { width:100%; }
    .notification-row { gap:9px; }
}


/* Online list: separate member and guest totals, with a neutral guest avatar. */
.members-online-summary {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:10px 0 16px;
}
.members-online-summary span {
    display:inline-block;
    padding:6px 11px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(20,35,60,.24);
}
.online-user-avatar.guest-avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    font-weight:700;
    text-decoration:none;
}


/* Mobile viewport stability and overflow protection.
   Keeps the existing theme colours and desktop layout unchanged. */
@media (max-width: 700px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    body {
        overflow-x: hidden;
    }

    .wrap,
    main.wrap {
        width: calc(100% - 20px);
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .site-head,
    .header-row,
    .top-nav,
    .panel,
    .tile,
    .card,
    .profile-card,
    .profile-form,
    .profile-action-box,
    .members-online-panel,
    .online-panel {
        min-width: 0;
        max-width: 100%;
    }

    .header-row {
        flex-wrap: wrap;
    }

    .brand {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .grid,
    .profile-gallery,
    .profile-sections,
    .profile-form-grid {
        min-width: 0;
    }

    .grid > *,
    .profile-gallery > *,
    .profile-sections > *,
    .profile-form-grid > * {
        min-width: 0;
    }

    .social-share {
        width: 100%;
        max-width: 100%;
        padding-left: 4px;
        padding-right: 4px;
    }

    .social-share a {
        max-width: 100%;
    }

    .online-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {
    .wrap,
    main.wrap {
        width: calc(100% - 16px);
    }

    .panel {
        padding: 12px;
    }

    .site-head {
        padding-left: 10px;
        padding-right: 10px;
    }
}