#login_wrap.slate-wrap {
    width: 100% !important;
    min-height: 100vh !important;
    background: linear-gradient(180deg, #0a1118 0%, #0d151d 100%) !important;
    color: #eef4f8 !important;
}

.slate-shell {
    width: min(1100px, calc(100% - 24px)) !important;
    margin: 0 auto !important;
    padding: 18px 0 26px !important;
}

.slate-topbar,
.slate-login-card,
.stat-box,
.slate-card,
.slate-footer-inner,
.slate-cookie {
    background: #111b24 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22) !important;
}

.slate-topbar {
    padding: 16px 18px !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.slate-brand,
.footer-branding {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.slate-brand-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
    color: #06121b !important;
}

.slate-brand-mark.small {
    width: 40px !important;
    height: 40px !important;
}

.slate-kicker,
.hero-chip span,
.section-head span,
.slate-birth-label {
    font-size: 12px !important;
    color: #8ea4b4 !important;
}

.slate-brand-copy h2,
.slate-intro h1,
.slate-login-copy h3,
.section-head h3,
.footer-branding h3,
.radio-copy strong {
    margin: 0 !important;
    color: #f4f8fb !important;
}

.slate-language {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    cursor: pointer !important;
}

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

.slate-hero {
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: 20px !important;
    align-items: start !important;
    margin-bottom: 20px !important;
}

.slate-intro {
    padding: 18px 6px !important;
}

.hero-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.08) !important;
    color: #8ad8fb !important;
    margin-bottom: 14px !important;
}

.slate-intro h1 {
    font-size: clamp(2.1rem, 4vw, 3.8rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
}

.slate-intro p,
.slate-login-copy p,
.slate-terms,
.radio-copy span,
.footer-branding p,
.cookie-desc {
    margin: 0 !important;
    color: #8ea4b4 !important;
    line-height: 1.75 !important;
}

.slate-login-card,
.slate-card,
.slate-footer-inner {
    border-radius: 28px !important;
    padding: 22px !important;
}

.login-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.slate-logo {
    min-width: 104px !important;
    min-height: 78px !important;
    padding: 10px 16px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

.slate-tab-list {
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 8px !important;
    display: flex !important;
    gap: 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.03) !important;
}

.slate-tab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    color: #849baa !important;
    cursor: pointer !important;
}

.slate-tab.active {
    color: #06121b !important;
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
    font-weight: 700 !important;
}

.slate-panel {
    display: none !important;
}

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

.slate-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.slate-field {
    position: relative !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.slate-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #7992a2 !important;
}

.slate-input {
    width: 100% !important;
    min-height: 56px !important;
    padding: 15px 16px 15px 44px !important;
    background: transparent !important;
    border: none !important;
    color: #eef4f8 !important;
    outline: none !important;
}

.slate-input::placeholder {
    color: #758e9f !important;
}

.slate-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='%23758e9f' 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;
}

.slate-select option {
    background: #111b24 !important;
    color: #eef4f8 !important;
}

.slate-split,
.slate-birth-grid,
.slate-stats,
.slate-sections,
.slate-users-grid {
    display: grid !important;
    gap: 12px !important;
}

.slate-split,
.slate-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.slate-birth {
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.slate-birth-grid,
.slate-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.compact {
    min-height: 48px !important;
    padding: 12px 34px 12px 12px !important;
    text-align: center !important;
}

.slate-submit,
.slate-control,
.slate-cookie-btn {
    border: none !important;
    cursor: pointer !important;
}

.slate-submit {
    min-height: 56px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #06121b !important;
    background: linear-gradient(135deg, #38bdf8 0%, #22c55e 100%) !important;
}

.alt-submit {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
}

.accent-submit,
.slate-cookie-btn {
    background: linear-gradient(135deg, #fb7185 0%, #f59e0b 100%) !important;
}

.slate-note {
    text-align: center !important;
}

.slate-link {
    color: #70d6ff !important;
    cursor: pointer !important;
}

.slate-bridge {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding: 18px 8px !important;
}

.slate-stats {
    margin-bottom: 20px !important;
}

.stat-box {
    border-radius: 22px !important;
    padding: 18px !important;
    text-align: center !important;
}

.stat-box strong {
    display: block !important;
    color: #f4f8fb !important;
    font-size: 30px !important;
    margin-bottom: 4px !important;
}

.stat-box span {
    color: #8ea4b4 !important;
}

.section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

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

.slate-users-grid > *,
.slate-users-grid .active_intro,
.slate-users-grid .acav,
.slate-users-grid .active_user,
.slate-users-grid .intro_user {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
}

.slate-users-grid img,
.slate-users-grid .avatar,
.slate-users-grid .avatar_friends {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
}

.slate-users-grid .username,
.slate-users-grid .user_name,
.slate-users-grid .intro_name,
.slate-users-grid .name {
    width: 100% !important;
    color: #eef4f8 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.slate-radio-now {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    margin-bottom: 14px !important;
}

.radio-mark {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
    color: #06121b !important;
}

.slate-station-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.slate-station-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.03) !important;
    color: #d7e3ea !important;
    cursor: pointer !important;
}

.slate-station-btn.active {
    color: #06121b !important;
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
}

.slate-empty {
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.03) !important;
    color: #8ea4b4 !important;
    margin-bottom: 14px !important;
}

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

.slate-control {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    color: #eef4f8 !important;
}

.slate-control.soft {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

.slate-control.main {
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
    color: #06121b !important;
}

.slate-footer-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-top: 20px !important;
}

.footer-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.footer-nav a {
    color: #8ea4b4 !important;
    text-decoration: none !important;
}

.cookie_wrap.slate-cookie {
    position: fixed !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 20px)) !important;
    z-index: 99 !important;
}

.slate-cookie-inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
}

.cookie-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #38bdf8 0%, #fb7185 100%) !important;
    color: #06121b !important;
}

.cookie-copy {
    flex: 1 !important;
}

.cookie-title {
    margin: 0 0 4px !important;
    color: #f4f8fb !important;
    font-weight: 700 !important;
}

.slate-cookie-btn {
    min-width: 84px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    color: #06121b !important;
    font-weight: 700 !important;
}

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

.hidden {
    display: none !important;
}

@media screen and (max-width: 980px) {
    .slate-hero,
    .slate-sections,
    .slate-footer-inner {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

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

    .footer-nav {
        justify-content: flex-start !important;
    }
}

@media screen and (max-width: 720px) {
    .slate-topbar,
    .login-card-head,
    .section-head,
    .slate-cookie-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .slate-split,
    .slate-birth-grid,
    .slate-stats,
    .slate-sections {
        grid-template-columns: 1fr !important;
    }

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

@media screen and (max-width: 520px) {
    .slate-shell {
        width: calc(100% - 16px) !important;
    }

    .slate-tab-list {
        flex-direction: column !important;
    }

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

    .slate-station-list,
    .footer-nav {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .slate-station-btn {
        justify-content: center !important;
    }
}