/* Lounge-inspired login refresh while keeping the original structure intact */

#login_wrap.wave-login-wrap {
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top left, rgba(28, 203, 182, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 139, 61, 0.18), transparent 30%),
        linear-gradient(135deg, #06141c 0%, #0b2230 38%, #102f2d 100%) !important;
}

.wave-background {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.wave-aurora {
    position: absolute !important;
    width: 40rem !important;
    height: 40rem !important;
    border-radius: 50% !important;
    filter: blur(110px) !important;
    opacity: 0.55 !important;
    animation: waveFloat 16s ease-in-out infinite !important;
}

.aurora-left {
    top: -10rem !important;
    left: -8rem !important;
    background: radial-gradient(circle, rgba(28, 203, 182, 0.95) 0%, rgba(28, 203, 182, 0) 70%) !important;
}

.aurora-right {
    right: -10rem !important;
    bottom: -10rem !important;
    background: radial-gradient(circle, rgba(255, 139, 61, 0.9) 0%, rgba(255, 139, 61, 0) 72%) !important;
    animation-delay: 6s !important;
}

.wave-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,1)) !important;
}

.chat-float {
    position: absolute !important;
    width: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    color: rgba(255,255,255,0.78) !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 24px 40px rgba(0,0,0,0.24) !important;
    animation: waveDrift 12s ease-in-out infinite !important;
}

.chat-float i {
    font-size: 24px !important;
}

.chat-float-one {
    top: 17% !important;
    left: 8% !important;
}

.chat-float-two {
    top: 62% !important;
    left: 12% !important;
    animation-delay: 3s !important;
}

.chat-float-three {
    top: 24% !important;
    right: 9% !important;
    animation-delay: 5s !important;
}

.wave-shell {
    position: relative !important;
    z-index: 2 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.wave-topbar {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 22px auto 0 !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 24px !important;
    background: rgba(4, 18, 27, 0.56) !important;
    backdrop-filter: blur(20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.brand-cluster,
.topbar-actions,
.footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.brand-mark {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ff8b3d 100%) !important;
    color: #082029 !important;
    box-shadow: 0 14px 26px rgba(10, 33, 44, 0.28) !important;
    font-size: 22px !important;
}

.brand-mark.small {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
}

.brand-eyebrow {
    display: block !important;
    color: #7fe8d7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.brand-copy h2,
.footer-brand h3 {
    color: #f4fbf9 !important;
    margin: 0 !important;
    font-size: 22px !important;
}

.topbar-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    color: #d9f5f0 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 13px !important;
}

#intro_lang.language-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
    width: auto !important;
    height: auto !important;
}

#intro_lang.language-btn:hover {
    transform: translateY(-2px) !important;
    background: rgba(255,255,255,0.12) !important;
}

#intro_lang.language-btn img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
}

#intro_lang.language-btn i {
    color: #defaf4 !important;
}

#intro_top.intro-container {
    flex: 1 !important;
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 28px 0 34px !important;
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 28px !important;
    align-items: center !important;
}

.showcase-column,
.login-content {
    width: 100% !important;
}

.showcase-card,
#login_all.login-card,
.footer-panel,
.wave-cookie {
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(6, 22, 30, 0.72) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: 0 22px 60px rgba(2, 12, 18, 0.34) !important;
}

.showcase-card {
    border-radius: 34px !important;
    padding: 34px !important;
}

.showcase-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: rgba(28, 203, 182, 0.14) !important;
    color: #93ffea !important;
    font-size: 13px !important;
    margin-bottom: 22px !important;
}

.showcase-title {
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    line-height: 1.05 !important;
}

.showcase-text {
    margin: 0 0 28px !important;
    color: rgba(225, 245, 242, 0.74) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    max-width: 36rem !important;
}

.showcase-highlights {
    display: grid !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.highlight-item {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.04) !important;
}

.highlight-item i {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(28, 203, 182, 0.24), rgba(255, 139, 61, 0.3)) !important;
    color: #fff7f0 !important;
    font-size: 20px !important;
}

.highlight-item strong,
.stat-number,
.welcome-title,
.cookie-title {
    color: #ffffff !important;
}

.highlight-item span,
.stat-label,
.welcome-subtitle,
.terms-text,
.cookie-desc,
.footer-brand p,
.footer-note span {
    color: rgba(222, 244, 240, 0.68) !important;
}

.showcase-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.stat-box {
    padding: 18px 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.stat-number {
    display: block !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    margin-bottom: 6px !important;
}

#login_all.login-card {
    border-radius: 32px !important;
    padding: 32px !important;
}

.card-topline {
    margin-bottom: 20px !important;
}

.logo-wrapper {
    margin-bottom: 20px !important;
}

.logo-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 110px !important;
    min-height: 88px !important;
    padding: 12px 18px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(28, 203, 182, 0.14), rgba(255, 139, 61, 0.2)) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
}

#login_logo {
    height: 58px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.welcome-section {
    text-align: center !important;
}

.welcome-title {
    margin: 0 0 8px !important;
    font-size: 27px !important;
    font-weight: 700 !important;
}

.welcome-subtitle {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.quick-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
}

.quick-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.05) !important;
    color: #def9f2 !important;
    font-size: 12px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.tabs-navigation {
    margin-bottom: 24px !important;
}

.tabs-list {
    list-style: none !important;
    display: flex !important;
    gap: 8px !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.04) !important;
}

.tab-item {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    color: rgba(225, 245, 242, 0.54) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.tab-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

.tab-item.active {
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffb066 100%) !important;
    box-shadow: 0 16px 28px rgba(255, 139, 61, 0.22) !important;
}

.tab-panel {
    display: none !important;
    animation: panelRise 0.35s ease !important;
}

.tab-panel.active {
    display: block !important;
}

.form-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.input-row {
    display: flex !important;
    gap: 12px !important;
}

.register-date-block {
    padding: 16px 18px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.register-date-label {
    margin: 0 0 12px !important;
    color: rgba(225, 245, 242, 0.8) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}

.date-form-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: center !important;
}

.date-col {
    min-width: 0 !important;
}

.register-date-block .form-select {
    padding: 15px 42px 15px 14px !important;
    border-radius: 14px !important;
    text-align: center !important;
}

.input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.input-group.half {
    flex: 1 !important;
}

.input-icon {
    position: absolute !important;
    left: 16px !important;
    z-index: 2 !important;
    color: rgba(221, 250, 243, 0.5) !important;
    transition: color 0.3s ease !important;
}

.form-input,
.form-select {
    width: 100% !important;
    padding: 16px 16px 16px 46px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    font-size: 15px !important;
}

.form-input::placeholder {
    color: rgba(224, 244, 240, 0.38) !important;
}

.form-input:focus,
.form-select:focus,
.input-group:focus-within .form-input,
.input-group:focus-within .form-select {
    border-color: rgba(28, 203, 182, 0.42) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 4px rgba(28, 203, 182, 0.09) !important;
}

.input-group:focus-within .input-icon {
    color: #9cfbe9 !important;
}

.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d9f5f0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

.form-select option {
    background: #12303a !important;
    color: #ffffff !important;
}

.btn-submit,
.modern_btn,
.btn-cookie {
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-submit {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 20px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ff9f54 100%) !important;
    box-shadow: 0 20px 34px rgba(255, 139, 61, 0.24) !important;
}

.btn-submit:hover,
.btn-cookie:hover {
    transform: translateY(-2px) !important;
}

.btn-guest {
    background: linear-gradient(135deg, #82d6e3 0%, #5eb0d6 100%) !important;
}

.btn-register {
    background: linear-gradient(135deg, #ffd27a 0%, #ff8b3d 100%) !important;
}

.form-footer {
    text-align: center !important;
}

.link-text {
    color: #8afbe8 !important;
    cursor: pointer !important;
}

.link-text:hover {
    color: #d3fff7 !important;
}

.bridge-message {
    text-align: center !important;
    padding: 22px 14px !important;
    color: rgba(225, 245, 242, 0.75) !important;
}

.bridge-message i {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 42px !important;
    color: #9cfbe9 !important;
}

.recaptcha-container {
    display: flex !important;
    justify-content: center !important;
}

.wave-data-zone {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 0 0 26px !important;
}

.wave-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.live-stat-card,
.wave-info-card {
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(6, 22, 30, 0.72) !important;
    box-shadow: 0 22px 60px rgba(2, 12, 18, 0.28) !important;
    backdrop-filter: blur(22px) !important;
}

.live-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 22px !important;
}

.live-stat-icon,
.section-chip i,
.radio-cover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.live-stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffb066 100%) !important;
}

.live-stat-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.live-stat-value {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.live-stat-name {
    color: rgba(222, 244, 240, 0.68) !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.wave-feature-grid {
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: 22px !important;
}

.wave-info-card {
    padding: 28px !important;
}

.wave-info-card h3 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: 28px !important;
}

.wave-info-card p {
    margin: 0 0 20px !important;
    color: rgba(225, 245, 242, 0.72) !important;
    line-height: 1.8 !important;
}

.section-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
    border-radius: 999px !important;
    background: rgba(28, 203, 182, 0.12) !important;
    color: #9cfbe9 !important;
    font-size: 13px !important;
}

.section-chip i {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.08) !important;
}

.section-chip.warm {
    background: rgba(255, 176, 102, 0.12) !important;
    color: #ffd9ba !important;
}

.wave-active-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.wave-active-list > *,
.wave-active-list .active_intro,
.wave-active-list .acav,
.wave-active-list .active_user,
.wave-active-list .intro_user {
    min-width: 0 !important;
    padding: 12px 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    text-align: center !important;
}

.wave-active-list > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.wave-active-list .username,
.wave-active-list .user_name,
.wave-active-list .intro_name,
.wave-active-list .name {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #effdfa !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.wave-active-list .avatar,
.wave-active-list .avatar_friends,
.wave-active-list img {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
}

.radio-player-shell {
    display: grid !important;
    gap: 18px !important;
}

.radio-track-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(28, 203, 182, 0.12), rgba(255, 176, 102, 0.08)) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.radio-cover {
    width: 62px !important;
    height: 62px !important;
    border-radius: 20px !important;
    color: #082029 !important;
    font-size: 24px !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffb066 100%) !important;
}

.radio-track-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.radio-track-copy strong {
    color: #ffffff !important;
    font-size: 20px !important;
}

.radio-track-copy span {
    color: rgba(225, 245, 242, 0.68) !important;
    font-size: 13px !important;
}

.radio-equalizer {
    display: flex !important;
    align-items: flex-end !important;
    gap: 5px !important;
    height: 34px !important;
}

.radio-equalizer span {
    width: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #9cfbe9 0%, #ffb066 100%) !important;
    animation: radioPulse 1.4s ease-in-out infinite !important;
}

.radio-equalizer span:nth-child(1) { height: 12px !important; animation-delay: 0s !important; }
.radio-equalizer span:nth-child(2) { height: 24px !important; animation-delay: 0.2s !important; }
.radio-equalizer span:nth-child(3) { height: 18px !important; animation-delay: 0.35s !important; }
.radio-equalizer span:nth-child(4) { height: 28px !important; animation-delay: 0.5s !important; }

.radio-stations-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.wave-station-btn {
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #def9f2 !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.wave-station-btn span {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.wave-station-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255,255,255,0.08) !important;
}

.wave-station-btn.active {
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffb066 100%) !important;
    border-color: transparent !important;
}

.radio-empty-state {
    padding: 16px 18px !important;
    border-radius: 18px !important;
    color: rgba(225, 245, 242, 0.72) !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px dashed rgba(255,255,255,0.08) !important;
}

.radio-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.radio-control-btn {
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.radio-control-btn:hover {
    transform: translateY(-2px) !important;
}

.radio-control-btn.secondary {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    color: #def9f2 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.radio-control-btn.primary {
    width: 66px !important;
    height: 66px !important;
    border-radius: 22px !important;
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ff9f54 100%) !important;
    box-shadow: 0 18px 32px rgba(255, 139, 61, 0.22) !important;
}

.wave-footer {
    position: relative !important;
    padding: 18px 16px 34px !important;
}

.footer-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(980px, calc(100% - 12px)) !important;
    margin: 0 auto !important;
    padding: 28px 28px 24px !important;
    border-radius: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: center !important;
    text-align: center !important;
    background:
        linear-gradient(180deg, rgba(7, 24, 33, 0.96), rgba(7, 24, 33, 0.88)) !important;
    border: 1px solid rgba(142, 233, 220, 0.1) !important;
    box-shadow:
        0 24px 64px rgba(1, 10, 15, 0.36),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.footer-brand {
    justify-content: center !important;
}

.footer-brand h3 {
    margin-bottom: 6px !important;
}

.footer-brand p {
    margin: 0 !important;
    max-width: 640px !important;
}

.footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    color: #effdfa !important;
    text-decoration: none !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}

.footer-links a:hover {
    background: rgba(28, 203, 182, 0.12) !important;
    color: #9cfbe9 !important;
    border-color: rgba(156, 251, 233, 0.2) !important;
    transform: translateY(-1px) !important;
}

.footer-note {
    width: 100% !important;
    padding-top: 4px !important;
    text-align: center !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.footer-note span {
    display: inline-block !important;
    padding-top: 14px !important;
}

.cookie_wrap.wave-cookie {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(640px, calc(100% - 24px)) !important;
    border-radius: 24px !important;
    z-index: 99 !important;
}

.wave-cookie .cookie-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
}

.cookie-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffd27a 100%) !important;
    font-size: 22px !important;
}

.wave-cookie .cookie_text {
    flex: 1 !important;
}

.cookie-title {
    margin: 0 0 4px !important;
    font-size: 15px !important;
}

.cookie-desc {
    margin: 0 !important;
    line-height: 1.6 !important;
    font-size: 13px !important;
}

.cookie-link {
    color: #95fff0 !important;
}

.btn-cookie {
    padding: 12px 18px !important;
    border-radius: 14px !important;
    color: #082029 !important;
    background: linear-gradient(135deg, #1ccbb6 0%, #ffb066 100%) !important;
    font-weight: 700 !important;
}

.clear,
.centered_element {
    display: block !important;
}

.hidden {
    display: none !important;
}

@keyframes waveFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(28px, 24px, 0) scale(1.06); }
}

@keyframes waveDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(4deg); }
}

@keyframes panelRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes radioPulse {
    0%, 100% { transform: scaleY(0.55); opacity: 0.65; }
    50% { transform: scaleY(1.1); opacity: 1; }
}

@media screen and (max-width: 1024px) {
    #intro_top.intro-container {
        grid-template-columns: 1fr !important;
    }

    .wave-stats-strip,
    .wave-feature-grid {
        grid-template-columns: 1fr !important;
    }

    .wave-active-list {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .showcase-column {
        order: 2 !important;
    }

    .login-content {
        order: 1 !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }

    .footer-brand,
    .topbar-actions,
    .wave-topbar {
        justify-content: center !important;
    }
}

@media screen and (max-width: 768px) {
    .wave-topbar {
        flex-direction: column !important;
    }

    .topbar-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .showcase-card,
    #login_all.login-card {
        padding: 24px !important;
        border-radius: 28px !important;
    }

    .showcase-stats {
        grid-template-columns: 1fr !important;
    }

    .radio-track-head {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .radio-cover,
    .radio-equalizer {
        margin: 0 auto !important;
    }

    .wave-active-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .chat-float {
        display: none !important;
    }
}

@media screen and (max-width: 560px) {
    #intro_top.intro-container,
    .wave-topbar,
    .wave-data-zone {
        width: calc(100% - 20px) !important;
    }

    .tabs-list,
    .input-row,
    .wave-cookie .cookie-content {
        flex-direction: column !important;
    }

    .tab-item {
        width: 100% !important;
    }

    .footer-links {
        justify-content: center !important;
    }

    .footer-links a {
        width: min(100%, 320px) !important;
        justify-content: center !important;
    }

    .date-form-row {
        grid-template-columns: 1fr !important;
    }

    .wave-active-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 420px) {
    .wave-active-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave-aurora,
    .chat-float,
    .tab-panel {
        animation: none !important;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}

/* ── v11+ box forms ────────────────────────────────────────── */
#login_form_box,
#guest_form_box,
#registration_form_box {
    width: 100% !important;
}

#login_form_box .modal_content,
#guest_form_box .modal_content,
#registration_form_box .modal_content {
    padding: 0 !important;
}

/* inputs */
.full_input,
.user_username {
    width: 100% !important;
    padding: 16px 16px 16px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
    outline: none !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.full_input::placeholder,
.user_username::placeholder {
    color: rgba(224, 244, 240, 0.38) !important;
}

.full_input:focus,
.user_username:focus {
    border-color: rgba(28, 203, 182, 0.42) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 4px rgba(28, 203, 182, 0.09) !important;
}

/* selects */
.form_data[name="gender"],
#login_select_gender,
#login_form_box select,
#guest_form_box select,
#registration_form_box select {
    width: 100% !important;
    padding: 16px 42px 16px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
    outline: none !important;
    font-size: 15px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d9f5f0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

#login_form_box select:focus,
#guest_form_box select:focus,
#registration_form_box select:focus {
    border-color: rgba(28, 203, 182, 0.42) !important;
    background-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 4px rgba(28, 203, 182, 0.09) !important;
}

#login_form_box select option,
#guest_form_box select option,
#registration_form_box select option {
    background: #12303a !important;
    color: #ffffff !important;
}

/* spacing */
.bpad15 { padding-bottom: 15px !important; }
.vpad15 { padding: 15px 0 !important; }
.tpad15 { padding-top: 15px !important; }
.hpad5  { padding: 0 5px !important; }
.tmargin15 { margin-top: 15px !important; }

/* date row */
.register_date {
    margin-top: 4px !important;
}

.register_date .label {
    font-size: 13px !important;
    color: rgba(224, 244, 240, 0.55) !important;
    margin-bottom: 8px !important;
}

.date_form {
    display: flex !important;
    gap: 10px !important;
}

.date_col {
    flex: 1 !important;
}

.date_col select {
    text-align: center !important;
}

/* buttons */
.theme_btn,
.boom_form_request {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 20px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    background: linear-gradient(135deg, #1ccbb6, #0e8f80) !important;
    color: #ffffff !important;
    margin-top: 6px !important;
}

.theme_btn:hover,
.boom_form_request:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(28, 203, 182, 0.35) !important;
}

.theme_btn:active,
.boom_form_request:active {
    transform: translateY(0) !important;
}

/* modal_control */
.modal_control {
    padding-top: 8px !important;
}

/* forgot / terms */
.forgot_pass_elem {
    text-align: center !important;
}

.forgot_password,
.rules_text {
    font-size: 13px !important;
    color: rgba(224, 244, 240, 0.5) !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.forgot_password:hover {
    color: #9cfbe9 !important;
}

.rules_click {
    color: #1ccbb6 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

/* recaptcha */
.recapcha_div {
    display: flex !important;
    justify-content: center !important;
}

/* clear fix */
.clear { clear: both !important; }