/* Dashboard Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    background: #0a1020;
    touch-action: manipulation;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(180deg, #0c1424 0%, #0a1020 100%);
    background-attachment: fixed;
    color: #ffffff;
    min-height: 100vh;
    line-height: 1.6;
    padding-top: 92px;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    width: 100%;
    touch-action: manipulation;
}

/* Navigation Bar - topo da página */
.navbar {
    background: #0b0d12;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    border-bottom: 1px solid #252525;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Navbar - logo à esquerda (igual ao public_base) */
.nav-container:not(:has(.nav-menu)) {
    justify-content: space-between;
}

/* Logo - esquerda */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 16px;
}

.nav-container:not(:has(.nav-menu)) .logo {
    padding-right: 0;
}

.logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

/* Logo em texto (LAND) - Poppins gordinha, gradiente do tema */
.logo-word {
    font-family: 'Poppins', 'Arial Black', Arial, sans-serif;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    color: #dc2626;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .logo-word {
        background: linear-gradient(135deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
.footer-logo .logo-word {
    font-size: clamp(18px, 3.5vw, 26px);
}

.text-logo {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    white-space: nowrap;
}

.k-color {
    color: #dc2626;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex: 1;
}

.nav-item {
    margin: 0 15px;
    position: relative;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-link:hover {
    color: #dc2626;
}

.nav-link.active {
    color: #dc2626;
    background: transparent;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #dc2626;
    border-radius: 3px;
}

.nav-link i {
    font-size: 18px;
    margin-right: 8px;
}

/* FAQ section - cores do projeto */
.faq-section {
    max-width: 720px;
    margin: 48px auto 40px;
    padding: 0 20px;
}
.faq-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    text-align: center;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-item {
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    overflow: hidden;
}
.faq-question-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.faq-question-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}
.faq-chevron {
    font-size: 12px;
    color: #dc2626;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.faq-item-open .faq-chevron {
    transform: rotate(180deg);
}
.faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item-open .faq-answer-wrap {
    max-height: 300px;
}
.faq-answer {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
    margin: 0;
    padding: 0 20px 18px 20px;
}
.faq-answer strong {
    color: rgba(255, 255, 255, 0.95);
}

/* Site footer - cores do projeto */
.site-footer {
    border-top: 1px solid #252525;
    background: #0b0d12;
    padding: 24px 20px;
    margin-top: 32px;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer-telegram-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.footer-telegram-btn:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: #dc2626;
    color: #fff;
}
.footer-telegram-btn i {
    font-size: 18px;
}
.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.footer-logo .logo-img {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.footer-spacer {
    width: 120px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .footer-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-telegram-btn {
        order: 2;
        width: 100%;
        justify-content: center;
    }
    .footer-logo {
        order: 1;
        width: 100%;
    }
    .footer-spacer {
        display: none;
    }
}

/* ===== Bottom navigation bar ===== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(11, 13, 18, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #252525;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #8b93a7;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn i {
    font-size: 20px;
    line-height: 1;
    transition: transform .2s ease;
}
.bottom-nav-btn:hover {
    color: #ffffff;
}
.bottom-nav-btn.active {
    color: #dc2626;
}
.bottom-nav-btn.active i {
    transform: translateY(-1px);
}

/* Back to top - cores do projeto */
.back-to-top {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0b0d12;
    border: 1px solid #252525;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.back-to-top:hover {
    transform: translateY(-2px);
    border-color: #dc2626;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

/* User Profile - direita */
.user-profile-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-left: 20px;
    position: relative;
}

/* Dropdown Menu - abre para baixo (navbar no topo) */
.dropdown-menu {
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 0;
    margin-bottom: 8px;
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 10px 0;
    min-width: 150px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    list-style: none;
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
    position: relative;
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.dropdown-menu a:hover {
    color: #dc2626;
    padding-left: 25px;
}

.dropdown-menu a.active {
    color: #dc2626;
    background: transparent;
}

.dropdown-menu li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #dc2626, #f87171);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0;
    z-index: 1;
}

.dropdown-menu li:hover::before {
    opacity: 1;
}

.dropdown-menu li:hover a {
    color: #000000;
    font-weight: 500;
}

/* Notification Bell */
.notification-bell {
    position: relative;
    cursor: pointer;
    margin-right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0b0d12;
    transition: all 0.3s ease;
}

.notification-bell:hover {
    background: rgba(220, 38, 38, 0.2);
}

.notification-bell i {
    font-size: 16px;
    color: #ffffff;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc2626;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Notification dropdown - abre para baixo (navbar no topo) */
.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    width: 350px;
    max-height: 400px;
    overflow: hidden;
    z-index: 1000;
    display: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.notification-dropdown.show {
    display: block;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #333333;
}

.notification-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.notification-list {
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    padding: 15px;
    border-bottom: 1px solid #252525;
    transition: background 0.2s ease;
}

.notification-item:hover {
    background: #0b0d12;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.unread {
    background: rgba(220, 38, 38, 0.1);
}

.notification-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.notification-item-time {
    font-size: 12px;
    color: #777777;
}

.notification-item-content {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Notification type colors */
.notification-item.purchase .notification-item-title {
    color: #dc2626; /* Green for purchase */
}

.notification-item.registration .notification-item-title {
    color: #dc2626; /* Purple for registration */
}

.notification-item.invite .notification-item-title {
    color: #f87171; /* Blue for invite */
}

.no-notifications {
    padding: 30px;
    text-align: center;
    color: #777777;
    font-size: 14px;
}

/* User Profile Section */
.user-profile {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.user-info {
    text-align: right;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.user-tier {
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    background: #0b0d12;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-align: center;
    min-width: 60px;
    border: 1px solid #dc2626;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 2px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
}

/* User dropdown - abre para baixo (navbar no topo) */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    padding-top: 8px;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    padding: 10px 0;
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    list-style: none;
    z-index: 100;
}

.user-profile {
    position: relative;
}

.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #0b0b0d;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    cursor: pointer;
}

.nav-profile-btn .nav-username {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);
}

.user-profile .user-dropdown {
    min-width: 230px;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

.profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.profile-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #dc2626;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.45);
}

.profile-info {
    min-width: 0;
}

.profile-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}

.profile-id {
    margin-top: 3px;
    font-size: 12px;
    color: #888;
}

.profile-divider {
    height: 1px;
    margin: 0 14px;
    background: #222;
}

.profile-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    color: #f87171;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.profile-logout:hover {
    background: rgba(220, 38, 38, 0.08);
}

.profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    color: #ddd;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.profile-link:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Tela Free Premium (convites) */
.referral-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 4px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.referral-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1f1f1f;
}

.dashboard-container .referral-header h1 {
    display: block;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.referral-card {
    border: 1px solid #252525;
    border-radius: 16px;
    background: #0b0d12;
    padding: 20px;
}

.referral-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.referral-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: #888;
}

.referral-progress-top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 8px;
}

.referral-progress-top strong {
    color: #fff;
}

.referral-bar {
    height: 10px;
    border-radius: 999px;
    background: #1f1f1f;
    overflow: hidden;
}

.referral-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
    transition: width 0.4s ease;
}

.referral-needs {
    margin: 12px 0 14px;
    text-align: center;
    font-size: 14px;
    color: #888;
}

.referral-redeem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #1c1c1f;
    color: #666;
    font-size: 15px;
    font-weight: 700;
    cursor: not-allowed;
}

.referral-milestone {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #252525;
    border-radius: 12px;
    background: #111318;
}

.referral-milestone-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.referral-milestone-title i {
    color: #f5c518;
    margin-right: 6px;
}

.referral-milestone-sub {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
}

.referral-milestone-sub i {
    margin-right: 6px;
}

.referral-link-row {
    display: flex;
    gap: 10px;
}

.referral-link-row input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #252525;
    border-radius: 10px;
    background: #050507;
    color: #eee;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
}

.referral-copy {
    flex: 0 0 auto;
    width: 48px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.referral-label {
    margin: 20px 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}

.referral-shares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.referral-shares button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1px solid #252525;
    border-radius: 12px;
    background: #111318;
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.referral-shares button i {
    font-size: 20px;
}

.referral-shares button:hover {
    border-color: #3a3a3a;
}

/* Tela My Profile */
.profile-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 4px 32px;
}

.profile-page-avatar {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 28px rgba(220, 38, 38, 0.4);
}

.profile-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.dashboard-container .profile-page-title h1 {
    display: block;
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    overflow-wrap: anywhere;
}

.profile-page-badge {
    border: 1px solid #333;
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

.profile-page-meta {
    margin: 6px 0 0;
    font-size: 14px;
    color: #888;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.profile-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #252525;
    border-radius: 14px;
    background: #0b0d12;
}

.profile-stat-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.profile-stat strong {
    display: block;
    font-size: 20px;
    color: #fff;
}

.profile-stat span {
    font-size: 12px;
    color: #888;
}

.profile-card {
    border: 1px solid #252525;
    border-radius: 16px;
    background: #0b0d12;
    padding: 20px;
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.profile-section-title i {
    color: #dc2626;
}

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

.profile-invite-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px;
    border: 1px solid #252525;
    border-radius: 12px;
    background: #111318;
}

.profile-invite-btn {
    width: 100%;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.profile-invite-box strong {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.profile-invite-box span {
    font-size: 12px;
    color: #888;
}

.profile-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.profile-card h3 i {
    color: #dc2626;
}

.profile-label {
    margin: 14px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}

.profile-field {
    padding: 12px 14px;
    border: 1px solid #252525;
    border-radius: 10px;
    background: #111318;
    color: #eee;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: inherit;
}

.profile-status strong {
    display: block;
    font-size: 15px;
    color: #fff;
}

.profile-status span {
    font-size: 13px;
    color: #888;
}

.user-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-dropdown-menu li {
    margin: 0;
    position: relative;
}

.user-dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.user-dropdown-menu a:hover {
    color: #dc2626;
    padding-left: 25px;
}

.user-dropdown-menu a.active {
    color: #dc2626;
    background: transparent;
}

.user-dropdown-menu a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* ========== Purchase Page - New Style ========== */

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: 48px;
    padding: 32px 0;
    min-width: 0;
    max-width: 100%;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.page-header p {
    font-size: 15px;
    color: #888;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tiers Section - Standard vs Special kept separate */
.tiers-section {
    margin-bottom: 56px;
    min-width: 0;
    max-width: 100%;
}

.tiers-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ccc;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tiers-section h2:not(:first-child) {
    margin-top: 48px;
}

/* Tier subsections (legacy / unused after Normal/Special restructure) */
.tier-subsection {
    margin-bottom: 48px;
}

.tier-subsection:last-child {
    margin-bottom: 0;
}

.tier-subsection-title {
    font-size: 16px;
    font-weight: 600;
    color: #aaa;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}

/* Tier toggle - segmented pill style (Standard Tiers | Special Tiers) - kept for potential reuse */
.tier-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 28px auto;
    padding: 4px;
    background: #0b0d12;
    border-radius: 14px;
    border: 1px solid #2a2a2a;
    width: fit-content;
}

.tier-toggle button {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    background: transparent;
    color: #888;
}

.tier-toggle button.active {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

.tier-toggle button:not(.active):hover {
    color: #fff;
    background: #0b0d12;
}

.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 280px));
    gap: 20px;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

/* Premium duration plans section */
.premium-section {
    margin-bottom: 40px;
    min-width: 0;
    max-width: 100%;
    scroll-margin-top: 24px;
}

.premium-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #ccc;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.premium-subtitle {
    margin: -8px 0 20px;
    font-size: 14px;
    color: #888;
}

.premium-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    min-width: 0;
    max-width: 100%;
}

/* Tier cards - igual public_base (estilo 3), cores do projeto */
.tier-card {
    position: relative;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #0b0d12;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #252525;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tier-card:hover {
    transform: translateY(-2px);
    border-color: #444;
}

.tier-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
}

.tier-card-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.tier-card-badges-row .tier-card-badge {
    margin-bottom: 0;
}
.tier-card-badge {
    display: inline-block;
    align-self: flex-start;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    border: none;
}

.tier-card .tier-price {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.tier-card .tier-price span.tier-price-usd {
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    margin-left: 2px;
}

.tier-card-features-heading {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #dc2626;
    margin-bottom: 6px;
}

.tier-card-features {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.tier-card-features li {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
}

.tier-card-features li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
    line-height: 1.3;
    color: #dc2626;
}

.tier-card-actions {
    margin-top: auto;
}

.tier-card-buy {
    width: 100%;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.tier-card-buy:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-1px);
}

.tier-card-footer {
    display: none;
}

.tier-name {
    display: none;
}

.tier-card-badge-popular {
    background: #dc2626 !important;
    color: #fff !important;
    border: none !important;
}
.tier-card-badge-best-value {
    background: #dc2626 !important;
    color: #fff !important;
    border: none !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}

/* Style 3 - borda suave, mais espaço (igual public_base) */
.tier-card-style-3 {
    border: 1px solid #252525;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.tier-card-style-3:hover {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.08);
}
.tier-card-style-3 .tier-card-body {
    padding: 18px 16px 16px;
    position: relative;
}
/* accent bar de topo — substitui a antiga imagem do card */
.tier-card-style-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.tier-card-style-3:hover::before {
    opacity: 1;
}
/* leve brilho no topo do card sem imagem */
.tier-card-style-3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.10) 0%, rgba(220, 38, 38, 0) 100%);
    pointer-events: none;
}
.tier-card-style-3 .tier-card-badges-row {
    position: relative;
    z-index: 1;
}
.tier-card-style-3 .tier-card-badge {
    background: transparent;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.4);
    font-size: 10px;
    padding: 4px 10px;
}
.tier-card-style-3 .tier-price {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 19px;
}
.tier-card-style-3 .tier-card-features-heading {
    font-size: 9px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.tier-card-style-3 .tier-card-features li {
    font-size: 12px;
}
.tier-card-style-3 .tier-card-buy {
    border-radius: 10px;
    padding: 10px 16px;
}

/* Tier Purchase button (legacy / modal) */
.tier-select {
    width: 100%;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 0;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.tier-select:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

/* Selected Tier Header - new style */
.selected-tier-header {
    text-align: center;
    margin-bottom: 28px;
    padding: 24px 20px;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selected-tier-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
}

.selected-tier-header p {
    font-size: 16px;
    color: #dc2626;
    margin-bottom: 0;
    text-align: center;
    width: 100%;
}

.selected-tier-header #backToTiers {
    align-self: flex-start;
    margin-top: 20px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #0b0d12;
    border: 1px solid #333;
    color: #ccc;
    transition: all 0.25s ease;
}

.selected-tier-header #backToTiers:hover {
    background: #0b0d12;
    border-color: #dc2626;
    color: #fff;
}

.selected-tier-header p span {
    font-weight: 700;
}

/* Payment Section - new box style */
.payment-section {
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 28px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.payment-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #fff;
    text-align: left;
}

.payment-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 100%;
}

.payment-option {
    background: #0b0d12;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    max-width: 180px;
    color: #ccc;
}

.payment-option:hover {
    border-color: #444;
    background: #0b0d12;
    color: #fff;
}

.payment-option.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.purchase-payment-option {
    background: #0b0d12;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    max-width: 180px;
    color: #ccc;
}

.purchase-payment-option.centered {
    margin: 20px auto;
    width: auto;
    flex: none;
}

.purchase-payment-option:hover {
    border-color: #444;
    background: #0b0d12;
    color: #fff;
}

.another-methods-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 28px;
}

.purchase-payment-option.another-methods {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 14px 28px;
    max-width: none;
    width: auto;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.purchase-payment-option.another-methods:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

.purchase-payment-option.another-methods i {
    margin-right: 8px;
}

.purchase-payment-option.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.payment-form {
    display: none;
    min-width: 0;
    max-width: 100%;
}

.payment-form.active {
    display: block;
}

.payment-form h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.payment-form p {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.6;
    display: block;
}

.payment-amount {
    font-size: 17px;
    font-weight: 700;
    color: #dc2626;
    background: #0b0d12;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #252525;
    margin-bottom: 16px;
}

.crypto-payment-details {
    margin-bottom: 25px;
}

#cryptoDetails {
    display: none;
}

/* General hidden class */
.hidden {
    display: none;
}

.crypto-options {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.crypto-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex: 1;
    min-width: 150px;
    margin-bottom: 0;
    list-style: none;
    position: relative;
}

.crypto-option:hover {
    border-color: #444;
    background: #0b0d12;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.crypto-option input {
    margin: 0;
    cursor: pointer;
    /* Hide the radio button visually but keep it functional */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.crypto-option span {
    cursor: pointer;
    font-size: 16px;
    color: #ffffff;
    width: 100%;
    margin: 0;
}

.crypto-option svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: block;
    overflow: visible;
}

.crypto-option i {
    font-size: 20px;
}

.litecoin-icon {
    width: 20px;
    height: 20px;
}

.litecoin-bg {
    fill: #ffffff;
}

.litecoin-symbol {
    fill: #345d9d;
}

.crypto-option.selected .litecoin-bg {
    fill: #ffffff;
}

.crypto-option.selected .litecoin-symbol {
    fill: #dc2626;
}

/* Add visual feedback for selected option */
.crypto-option.selected {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.crypto-option.selected span {
    color: #dc2626;
    font-weight: 600;
}

/* Add instruction text for crypto selection */
.crypto-form h3::after {
    content: " - Please select one below";
    font-size: 16px;
    color: #dc2626;
    font-weight: normal;
}

/* Add a visual cue that the entire area is clickable */
.crypto-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.crypto-option:hover::before {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.3);
}

.crypto-address {
    margin-bottom: 25px;
}

.crypto-address label {
    display: block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 12px;
}

.address-display {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.address-display input {
    flex: 1;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    padding: 14px 18px;
    color: #fff;
    font-size: 15px;
    font-family: monospace;
    outline: none;
    transition: all 0.25s ease;
}

.address-display input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.address-note {
    font-size: 13px;
    color: #888;
    font-style: italic;
    display: block;
    margin-top: 8px;
}

.qr-code-placeholder {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    min-height: 150px;
    align-items: center;
}

.qr-code-placeholder img {
    max-width: 100%;
    height: auto;
    border: 10px solid white;
    border-radius: 5px;
}

.qr-code {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    width: 150px;
    height: 150px;
    background: #ffffff;
    padding: 10px;
    border-radius: 5px;
}

.qr-pattern {
    background: #0b0d12;
    border-radius: 2px;
}

.qr-pattern:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Video Preview Limitation Overlay */
#videoPlayer {
    width: 100%;
    height: auto;
    max-height: 70vh;
    outline: none;
    box-sizing: border-box;
    object-fit: contain;
    background: #0b0d12;
    position: relative;
    overflow: hidden;
}

#videoPlayer video,
.modal-video-player {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: #0b0d12;
}

.video-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 13, 18, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: white;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.video-preview-overlay h3 {
    font-size: 26px;
    margin-bottom: 12px;
    color: #ffffff;
}

.vpo-icon {
    color: #dc2626;
    font-size: 44px;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.5));
}

.vpo-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.vpo-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #333;
    border-radius: 10px;
    background: rgba(20, 20, 22, 0.9);
    font-size: 13px;
    font-weight: 600;
    color: #eee;
}

.vpo-chips i {
    color: #dc2626;
}

.vpo-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
}

.vpo-actions button {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.vpo-invite {
    margin-top: 12px;
    width: 100%;
    max-width: 340px;
    padding: 9px 14px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    background: rgba(30, 30, 32, 0.9);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.vpo-invite:hover {
    border-color: #555;
}

/* Aviso em players pequenos (video em formato retrato): nada cortado */
#videoPlayer {
    container-type: inline-size;
}
.video-preview-overlay {
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.video-preview-overlay::before,
.video-preview-overlay::after {
    content: '';
    margin: auto;
}
.video-preview-overlay.vpo-compact p {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 8px;
}
.video-preview-overlay.vpo-compact .vpo-chips {
    gap: 4px;
    margin-bottom: 8px;
}
.video-preview-overlay.vpo-compact .vpo-chips span {
    padding: 3px 6px;
    font-size: 10px;
    gap: 4px;
}
.video-preview-overlay.vpo-compact .vpo-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.video-preview-overlay.vpo-compact h3 {
    font-size: 15px;
    margin-bottom: 4px;
}
.video-preview-overlay.vpo-compact .vpo-actions button {
    padding: 7px 8px;
    font-size: 11px;
}
.video-preview-overlay.vpo-compact .vpo-invite {
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 11px;
}
@container (max-width: 420px) {
    .video-preview-overlay {
        padding: 10px;
    }
    .vpo-icon {
        font-size: 30px;
        margin-bottom: 8px;
    }
    .video-preview-overlay h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    .video-preview-overlay p {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .vpo-chips {
        margin-bottom: 12px;
        gap: 6px;
    }
    .vpo-chips span {
        padding: 5px 8px;
        font-size: 11px;
    }
    .vpo-actions {
        gap: 6px;
    }
    .vpo-actions button {
        padding: 8px 6px;
        font-size: 10px;
        letter-spacing: 0.02em;
    }
    .vpo-invite {
        margin-top: 8px;
        padding: 7px 10px;
        font-size: 11px;
    }
}

.vm-more {
    padding: 8px 16px 24px;
    min-width: 0;
}

.vm-more-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #222;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.vm-more-head i {
    color: #dc2626;
}

.vm-more-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #1c1c1c;
    cursor: pointer;
}

.vm-more-thumb {
    position: relative;
    flex: 0 0 150px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: #050507;
}
.vm-more-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    color: #fff;
}
.vm-more-badge-premium {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45);
}
.vm-more-badge-free {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.45);
}

.vm-more-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vm-more-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.vm-more-info {
    min-width: 0;
    flex: 1;
}

.vm-more-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vm-more-meta {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
}

.vm-more-empty {
    padding: 16px 0;
    color: #888;
    font-size: 14px;
}

.video-details {
    padding: 16px 16px 8px;
    min-width: 0;
}

.video-details .vd-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    overflow-wrap: anywhere;
}

.video-details .vd-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: #888;
}

.video-details .vd-meta i {
    margin-right: 4px;
}

.video-details .vd-tag {
    padding: 4px 12px;
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #aaa;
}

.video-details .vd-tag-free {
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.video-details .vd-tag-premium {
    border-color: rgba(220, 38, 38, 0.5);
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.video-details .vd-like {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #333;
    border-radius: 999px;
    background: #1a1e28;
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.video-details .vd-like:hover {
    border-color: #dc2626;
    color: #fff;
}
.video-details .vd-like.is-liked {
    background: rgba(220, 38, 38, 0.15);
    border-color: #dc2626;
    color: #dc2626;
}
.video-details .vd-like:disabled {
    opacity: 0.6;
    cursor: wait;
}

.video-details .vd-upgrade {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

.vpo-primary {
    border: none;
    background: linear-gradient(90deg, #f87171 0%, #b91c1c 100%);
    box-shadow: 0 6px 22px rgba(220, 38, 38, 0.35);
}

.vpo-secondary {
    border: 1px solid #3a3a3a;
    background: rgba(30, 30, 32, 0.9);
}

.video-preview-overlay p {
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 500px;
    line-height: 1.6;
    color: #aaaaaa;
}

.video-preview-overlay .btn-primary {
    background: #dc2626;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.video-preview-overlay .btn-primary:hover {
    background: #f87171;
    transform: translateY(-2px);
}

.video-player-container {
    position: relative;
}

.qr-pattern:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.qr-pattern:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.qr-pattern:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
}

.qr-pattern:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
}

.qr-pattern:nth-child(6) {
    grid-column: 4;
    grid-row: 2;
}

.qr-pattern:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
}

.qr-pattern:nth-child(8) {
    grid-column: 4;
    grid-row: 3;
}

.qr-pattern:nth-child(9) {
    grid-column: 1;
    grid-row: 4;
}

.qr-pattern:nth-child(10) {
    grid-column: 2;
    grid-row: 4;
}

.qr-pattern:nth-child(11) {
    grid-column: 3;
    grid-row: 4;
}

.qr-pattern:nth-child(12) {
    grid-column: 4;
    grid-row: 4;
}

.giftcard-info {
    margin: 20px 0;
    padding: 15px;
    background: #0b0d12;
    border-radius: 8px;
    border: 1px solid #333333;
}

.giftcard-info p {
    margin-bottom: 15px;
    display: block;
}

.payment-methods-info {
    margin-bottom: 25px;
    padding: 15px;
    background: #0b0d12;
    border-radius: 8px;
    border: 1px solid #333333;
}

.payment-methods-info p {
    margin-bottom: 15px;
    display: block;
}

.payment-methods-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.payment-methods-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 15px 0;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    width: 100%;
}

.payment-methods-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.payment-methods-list li:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.payment-methods-list li i {
    font-size: 28px;
}

/* Enhanced payment icons */
.payment-methods-list li .payment-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.payment-methods-list li:hover .payment-icon {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Payment method icons - to be replaced with custom SVGs */
.payment-methods-list li .payment-icon {
    width: 36px;
    height: 36px;
    transition: all 0.3s ease;
}

.payment-methods-list li:hover .payment-icon {
    transform: scale(1.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
    margin-bottom: 10px;
}

.form-group input {
    width: 100%;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 12px;
    padding: 14px 18px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.25s ease;
}

.form-group input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.form-group input::placeholder {
    color: #555;
}

/* Telegram Support Alert - purchase page style */
.telegram-support-alert {
    margin-top: 28px;
    padding: 22px 24px;
    background: #0b0d12;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 14px;
    text-align: center;
}

/* Ensure Telegram icon is always visible */
.telegram-support-alert .alert-content i.fab.fa-telegram {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

.telegram-support-alert .alert-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.telegram-support-alert .alert-content i {
    font-size: 24px;
    color: #dc2626;
    display: block !important;
    visibility: visible !important;
}

.telegram-support-alert .alert-content i.fab.fa-telegram {
    opacity: 1 !important;
    display: block !important;
    color: #dc2626 !important;
}

/* Telegram icon inside buttons: always white (overrides rule above) */
.telegram-support-alert .alert-content .btn-telegram i.fab.fa-telegram,
.telegram-support-alert .btn-telegram i,
.telegram-support-alert .btn-telegram .fab.fa-telegram,
a.btn-telegram i.fab.fa-telegram,
a.btn-telegram i {
    color: #fff !important;
    fill: #fff;
}

.telegram-support-alert .alert-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.telegram-support-alert .alert-text h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #fff;
}

.telegram-support-alert .alert-text p {
    font-size: 14px;
    color: #999;
    margin: 0;
    line-height: 1.5;
}

.telegram-support-alert .btn-telegram {
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}

/* Generic alert-content (other pages) */
.alert-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.alert-content i {
    font-size: 24px;
    color: #0088cc;
    display: block !important;
    visibility: visible !important;
}

.alert-content i.fab.fa-telegram {
    opacity: 1 !important;
    display: block !important;
    color: #ffffff !important;
}

.alert-text {
    flex: 1;
}

.alert-text h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}

.alert-text p {
    font-size: 15px;
    color: #aaaaaa;
    margin: 0;
    line-height: 1.5;
}

/* Support Button - Base style for all support buttons */
.btn-support {
    color: #ffffff; /* White text */
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 auto;
    transform: translateY(0);
    text-decoration: none; /* Remove underline */
    width: 100%;
    max-width: 250px;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
}

/* Telegram Support Button - Official Telegram blue */
.btn-support#telegramSupportBtn {
    background: #0088cc; /* Official Telegram blue color */
}

.btn-support#telegramSupportBtn:hover {
    background: #007bb5; /* Slightly darker blue for hover effect */
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); /* Blue shadow */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Signal Support Button - Official Signal blue */
.btn-support#signalSupportBtn {
    background: #3a76f0; /* Official Signal blue color */
}

.btn-support#signalSupportBtn:hover {
    background: #365fc7; /* Slightly darker blue for hover effect */
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(58, 118, 240, 0.3); /* Blue shadow */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Common hover and active states */
.btn-support:active {
    transform: translateY(-10px);
    text-decoration: none; /* Ensure no underline on active state */
}

.btn-support i {
    color: #ffffff; /* White icon */
}

.btn-support .fas.fa-comment {
    font-size: 20px; /* Match the size of the previous SVG */
}

.btn-support svg {
    color: #ffffff; /* White SVG icon */
    fill: currentColor;
    flex-shrink: 0;
}

.btn-support span {
    color: #ffffff; /* White text */
    font-weight: bold; /* Make it bold for emphasis */
}

/* Support Buttons Container */
.support-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

/* Legacy classes for backward compatibility */
.btn-telegram {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 auto;
    transform: translateY(0);
    text-decoration: none;
    width: 100%;
    max-width: 250px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
}

.btn-telegram:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    text-decoration: none;
}

.btn-telegram:active {
    transform: translateY(0);
    text-decoration: none;
}

.btn-telegram i,
.btn-telegram .fab.fa-telegram {
    color: #fff !important;
}

.telegram-text {
    color: #ffffff; /* White text */
    font-weight: bold; /* Make it bold for emphasis */
}

/* Signal Button - Legacy */
.btn-signal {
    background: #dc2626; /* Green color */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 auto;
    transform: translateY(0);
    text-decoration: none; /* Remove underline */
    width: 100%;
    max-width: 250px;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
}

.btn-signal:hover {
    background: #f87171; /* Slightly lighter purple for hover effect */
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); /* Green shadow */
    text-decoration: none; /* Ensure no underline on hover */
}

.btn-signal:active {
    transform: translateY(-10px);
    text-decoration: none; /* Ensure no underline on active state */
}

.btn-signal i {
    color: #ffffff; /* White icon */
}

.signal-text {
    color: #ffffff; /* White text */
    font-weight: bold; /* Make it bold for emphasis */
}

/* Dark Web Access Button - same style as purchase buttons */
.btn-dark-web {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 auto;
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-dark-web:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

.btn-dark-web:active {
    transform: translateY(0);
}

/* Profile Header Section - same style as purchase page */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 14px;
    padding: 24px 24px;
    margin-bottom: 28px;
    animation: fadeIn 0.5s ease;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffff;
    font-size: 28px;
}

.profile-details h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}

.current-tier {
    font-size: 14px;
    color: #dc2626;
    font-weight: 600;
    background: #0b0d12;
    padding: 5px 15px;
    border-radius: 15px;
    display: inline-block;
    border: 1px solid #dc2626;
}

.profile-actions,
.invite-stats {
    display: flex;
    gap: 25px;
}

.stat-card {
    text-align: center;
    background: #0b0d12;
    border: 1px solid #dc2626;
    border-radius: 10px;
    padding: 20px;
    min-width: 130px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 5px;
}

.stat-sublabel {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.4;
}

/* Invite Section */
.invite-section {
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    animation: fadeIn 0.5s ease 0.2s both;
}

/* Previews Section - same style as purchase page */
.previews-section {
    margin-bottom: 56px;
}

.previews-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #ccc;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
@media (min-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* ===== Catalogos da home (Trending / Free / Premium) ===== */
.video-catalog {
    margin-bottom: 44px;
}

.catalog-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #ccc;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.video-carousel-wrap {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

/* Rolagem horizontal: os cards expandem para a direita */
.video-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
}

.video-carousel::-webkit-scrollbar {
    height: 8px;
}

.video-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.video-carousel::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 8px;
}

.video-carousel .video-card {
    flex: 0 0 140px;
    width: 140px;
    scroll-snap-align: start;
}
@media (min-width: 1024px) {
    .video-carousel .video-card,
    .video-carousel .video-item {
        flex: 0 0 260px;
        width: 260px;
    }
}

.video-carousel .video-card.sk-card {
    pointer-events: none;
}

.catalog-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #252525;
    background: rgba(11, 13, 18, 0.92);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.catalog-arrow:hover {
    background: rgba(30, 33, 42, 0.98);
}

.catalog-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.catalog-arrow.prev {
    left: -8px;
}

.catalog-arrow.next {
    right: -8px;
}

.video-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: none;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    background: #0b0d12;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail .play-icon {
    position: absolute;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(11, 13, 18, 0.5);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.video-card:hover .play-icon {
    color: #ffffff;
    background: rgba(11, 13, 18, 0.7);
    transform: scale(1.1);
}

.video-info {
    padding: 15px;
}

.video-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-channel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.channel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0b0d12;
    border: 1px solid #252525;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.channel-avatar .wk-text {
    color: #ffffff;
}

.channel-avatar .k-color {
    color: #dc2626;
}

.channel-name {
    font-size: 14px;
    color: #aaaaaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-meta {
    font-size: 12px;
    color: #777777;
    margin-top: 5px;
}

/* Tier Selection */
.tier-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 12px;
}

.tier-selection h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    color: #ffffff;
}

.tier-btn {
    background: #0b0d12;
    color: #ffffff;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.tier-btn:hover {
    background: #0b0d12;
    border-color: #dc2626;
}

.tier-btn.active {
    background: #dc2626;
    color: #000000;
    border-color: #dc2626;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.pagination-meta {
    width: 100%;
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-bottom: 4px;
}

.video-info {
    padding: 15px;
}

.pagination button {
    background: #0b0d12;
    color: #ccc;
    border: 1px solid #252525;
    border-radius: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pagination button:hover {
    background: #0b0d12;
    border-color: #444;
    color: #fff;
}

.pagination button.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Video Modal - centralizado no meio da tela, X sempre visível acima do vídeo */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 13, 18, 0.9);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: auto;
}
.video-modal[style*="display: flex"] {
    display: flex !important;
}
.video-modal .video-modal-content {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto;
    max-width: min(90vw, 960px);
    width: 100%;
    max-height: min(90vh, calc(100vh - 48px));
    background: #0b0d12;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.video-modal .video-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    min-height: 48px;
    background: rgba(11, 13, 18, 0.6);
}
.video-modal .video-modal-close {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.video-modal .video-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}
.video-modal #videoPlayer {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-height: calc(90vh - 56px);
    background: #0b0d12;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-modal #videoPlayer video,
.video-modal #videoPlayer .modal-video-player {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.video-player-container {
    position: relative;
    width: 100%;
    max-height: 50vh;
    overflow: hidden;
    background: #0b0d12;
}

/* Tier Access Section */
.tier-access-section {
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.tier-info h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-align: center;
}

.tier-info p {
    font-size: 16px;
    color: #aaaaaa;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.6;
}

.requirement-details {
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
    display: inline-block;
    width: 100%;
}

.requirement-details h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-align: center;
}

.requirement-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #333333;
}

.requirement-item:last-child {
    border-bottom: none;
}

.requirement-item .label {
    color: #aaaaaa;
    font-weight: 500;
}

.requirement-item .value {
    color: #ffffff;
    font-weight: 600;
}

/* Share Section */
.share-section {
    margin-bottom: 30px;
    text-align: center;
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 20px;
}

.share-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-align: center;
}

.share-section p.centered {
    text-align: center;
    margin: 0 auto 20px;
}

.social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 600px;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.social-btn.tiktok {
    background: #0b0d12;
    color: #ffffff;
    border: 1px solid #333333;
}

.social-btn.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    color: #ffffff;
}

.social-btn.twitter {
    background: #1da1f2;
    color: #ffffff;
}

.social-btn.discord {
    background: #5865f2;
    color: #ffffff;
}

.social-btn.facebook {
    background: #1877f2;
    color: #ffffff;
}

.social-btn.pinterest {
    background: #e60023;
    color: #ffffff;
}

.social-btn.tumblr {
    background: #36465d;
    color: #ffffff;
}

.social-btn.reddit {
    background: #ff4500;
    color: #ffffff;
}

.social-btn.threads {
    background: #0b0d12;
    color: #ffffff;
    border: 1px solid #333333;
}

/* Invite Link Section */
.invite-link-section {
    margin-bottom: 20px;
}

.invite-link-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-align: center;
}

/* Invite Stats Section in Social Share Modal */
.modal .invite-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 15px;
    margin: 20px 0;
    width: 100%;
}

.modal .stat-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 5px;
    min-width: auto;
    flex: 1;
    text-align: center;
}

.modal .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 5px;
}

.modal .stat-label {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 3px;
}

.modal .stat-sublabel {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 1.3;
}

/* Modal */
.modal {
    display: none !important;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 13, 18, 0.8);
    align-items: center;
    justify-content: center;
}

/* Ensure the specific support modal is always hidden by default */
#supportModal {
    display: none !important;
}

/* Ensure the support modal is visible when displayed */
#supportModal[style*='flex'] {
    display: flex !important;
}

/* Override any other display settings when modal should be visible */
.modal:target,
.modal[style*='display: flex'],
.modal[style*='display:flex'] {
    display: flex !important;
}

.modal-content {
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 16px;
    padding: 28px 24px;
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    font-size: 24px; /* Slightly smaller for a cleaner look */
    font-weight: 600; /* Slightly lighter weight */
    margin-bottom: 15px; /* Less margin for a cleaner look */
    color: #ffffff;
    text-align: center;
}

.modal-body {
    max-height: 55vh;
    overflow-y: auto;
    text-align: center;
    padding: 20px 10px; /* More padding for a cleaner look */
    box-sizing: border-box;
    color: #cccccc;
}

.modal-body p {
    margin-bottom: 20px; /* Increase margin for better spacing */
    line-height: 1.6; /* Slightly more line height for readability */
    font-size: 16px; /* Slightly larger font for better readability */
}

#videoPlayer {
    width: 100%;
    height: auto;
    max-height: 70vh;
    outline: none;
    box-sizing: border-box;
    object-fit: contain;
    background: #0b0d12;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.close {
    color: #888888; /* Slightly lighter color for better visibility */
    float: right;
    font-size: 32px; /* Slightly larger for better visibility */
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px; /* Fixed width for consistent hit area */
    height: 30px; /* Fixed height for consistent hit area */
    display: flex; /* Flexbox for perfect centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 50%; /* Circular shape */
    transition: all 0.2s ease; /* Smooth transition */
}

.close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
    transform: scale(1.1); /* Slight scale effect on hover */
}

.modal-actions {
    text-align: center;
    margin-top: 20px;
}

#videoPlayer {
    width: 100%;
    height: auto;
    max-height: 50vh;
    outline: none;
    box-sizing: border-box;
    object-fit: contain;
    background: #0b0d12;
}

.modal-actions {
    text-align: center;
    margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

.invite-link-container {
    margin-bottom: 25px;
}

.invite-link-container label {
    display: block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 12px;
}

.link-wrapper {
    display: flex;
    gap: 12px;
}

.link-wrapper input {
    flex: 1;
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 14px 18px;
    color: #ffffff;
    font-size: 15px;
    font-family: monospace;
    outline: none;
    transition: all 0.2s ease;
}

.link-wrapper input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.copy-btn {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.copy-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.invite-actions {
    display: flex;
    gap: 15px;
}

.btn-secondary {
    background: #0b0d12;
    color: #ccc;
    border: 1px solid #252525;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    justify-content: center;
}

.btn-secondary:hover {
    background: #0b0d12;
    transform: translateY(-2px);
    border-color: #444;
    color: #fff;
}

.btn-primary {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.btn-primary:hover::after {
    left: 100%;
}

.btn-primary.active {
    background: #f87171;
}

.btn-primary.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: #dc2626;
    border-radius: 3px;
}

/* Support & Dark Web - same box style as purchase page */
.support-darkweb-section {
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 28px;
    animation: fadeIn 0.5s ease 0.4s both;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    position: relative;
}

.support-darkweb-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    min-width: 0;
}

.support-darkweb-half h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
    text-align: center;
}

.support-darkweb-half p {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    max-width: 100%;
    line-height: 1.6;
    text-align: center;
}

/* Linha divisória central */
.support-darkweb-divider {
    width: 1px;
    background: #252525;
    flex-shrink: 0;
    align-self: center;
    height: 80%;
    min-height: 160px;
    max-height: 280px;
}

.btn-telegram-support {
    background: #0088cc;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    margin: 0 auto;
    text-decoration: none; /* Remove underline */
}

.btn-telegram-support:hover {
    background: #0077b3;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    text-decoration: none; /* Ensure no underline on hover */
}

.btn-telegram-support:active {
    transform: translateY(0);
    text-decoration: none; /* Ensure no underline on active state */
}

/* Floating Telegram Button - same style as purchase page */
.floating-telegram-btn {
    position: fixed;
    bottom: 95px;
    right: 30px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
    z-index: 1000;
    animation: pulse 2s infinite;
    text-decoration: none;
}

.floating-telegram-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
    text-decoration: none;
}

.floating-telegram-btn:active {
    transform: translateY(0);
    text-decoration: none; /* Ensure no underline on active state */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Notification System */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    width: 340px;
    max-width: calc(100vw - 40px);
}

.notification {
    background: #0b0d12;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
    position: relative;
    overflow: hidden;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.success {
    border-left: 4px solid #22c55e;
}

.notification.error {
    border-left: 4px solid #ef4444;
}

.notification.info {
    border-left: 4px solid #dc2626;
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-icon {
    font-size: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}

.notification.success .notification-icon {
    color: #22c55e;
}

.notification.error .notification-icon {
    color: #ef4444;
}

.notification.info .notification-icon {
    color: #dc2626;
}

.notification-text {
    flex: 1;
    min-width: 0;
}

.notification-text h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #f5f5f5;
    line-height: 1.35;
}

.notification-text p {
    font-size: 13px;
    color: #a3a3a3;
    margin: 0;
    line-height: 1.4;
}

.notification-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #a3a3a3;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.notification-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.notification-close:hover {
    color: #ffffff;
}

/* Main Dashboard Content - centraliza o container */
.dashboard-main {
    padding: 40px 48px 100px 48px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.dashboard-container {
    max-width: 1200px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 40px 0;
    background: #0b0d12;
    box-sizing: border-box;
}

/* Backup Group - roxo */
.backup-group-section {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 28px;
    text-align: center;
    width: 100%;
    animation: fadeIn 0.5s ease 0.5s both;
}

.backup-group-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.backup-group-notice {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.btn-backup-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-backup-group:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    color: #fff;
}

.btn-backup-group i {
    font-size: 18px;
}

.dashboard-container h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
    display: none; /* Hidden since we have the profile header */
}

.dashboard-container p {
    font-size: 16px;
    color: #cccccc;
    margin-bottom: 30px;
    max-width: 700px;
}

.page-header p {
    display: none; /* Hidden since we have the profile header */
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Views: por padrao o Hub mostra apenas as previews de videos.
   A area de compra (cards + FAQ) aparece quando Buy/Premium e clicado no menu inferior. */
#purchaseView {
    display: none;
}

/* Success Page - visibilidade garantida por CSS (body.success-page aplicado no início do body) */
body.success-page canvas {
    z-index: 1 !important;
    pointer-events: none;
}
body.success-page #videosView {
    display: none !important;
}
/* #successView e #purchaseModal sao filhos de #purchaseView: a view de compra
   continua visivel como container, mas esconde tudo que nao e o success. */
body.success-page #purchaseView {
    display: block !important;
}
body.success-page #purchase,
body.success-page #tiersSection,
body.success-page #premium,
body.success-page #faq,
body.success-page #purchaseModal {
    display: none !important;
}
body.success-page #successView {
    display: block !important;
    position: relative;
    z-index: 10;
    min-height: 60vh;
    width: 100%;
    padding: 24px 0;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Quando success está visível (body.success-page), garantir layout */
#successView {
    position: relative;
    z-index: 10;
    min-height: 60vh;
    width: 100%;
    padding: 24px 0;
}
/* Reverter display:none do dashboard-container que escondia título e textos da success */
body.success-page #successView .page-header,
body.success-page #successView .page-header h1,
body.success-page #successView .page-header p,
body.success-page #successView .success-section,
body.success-page #successView .success-section h2,
body.success-page #successView .success-section p,
body.success-page #successView .success-details,
body.success-page #successView .detail-item,
body.success-page #successView .success-actions,
#successView .page-header h1,
#successView .page-header p,
#successView .success-section h2,
#successView .success-section p {
    display: block !important;
    visibility: visible !important;
}
body.success-page #successView .success-section .success-content,
body.success-page #successView .success-section .telegram-support-notice,
body.success-page #successView .success-section .notice-content,
body.success-page #successView .success-section .notice-text {
    display: block !important;
}
body.success-page #successView .success-section .notice-content {
    display: flex !important;
}
body.success-page #successView .success-actions {
    display: flex !important;
}
body.success-page #successView .detail-item .label,
body.success-page #successView .detail-item .value {
    display: inline !important;
}
#successView .page-header h1 {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 700;
}
#successView .telegram-support-notice,
#successView .telegram-support-notice h4,
#successView .telegram-support-notice p {
    color: #cccccc;
}
/* Aviso success: chamar no Telegram para obter acesso à compra */
#successView .success-telegram-aviso {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.5);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    width: 100%;
    max-width: 480px;
}
#successView .success-telegram-aviso .notice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#successView .success-telegram-aviso .notice-content > i.fab.fa-telegram {
    font-size: 42px;
    color: #dc2626;
}
#successView .success-telegram-aviso .notice-text h4 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 8px;
    display: block !important;
}
#successView .success-telegram-aviso .notice-text p {
    color: #dddddd;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    display: block !important;
}
#successView .success-telegram-aviso .btn-telegram {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
    text-decoration: none;
    border: none;
}
#successView .success-telegram-aviso .btn-telegram:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(220, 38, 38, 0.45);
}
#successView .success-telegram-aviso .btn-telegram i {
    color: #fff;
}
.success-section {
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon {
    font-size: 64px;
    color: #dc2626;
    margin-bottom: 20px;
}

.success-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
}

.success-section p {
    font-size: 18px;
    color: #aaaaaa;
    margin-bottom: 30px;
    max-width: 500px;
}

.success-details {
    background: #0b0d12;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    margin-bottom: 30px;
    text-align: left;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #252525;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item .label {
    color: #aaaaaa;
    font-weight: 500;
}

.detail-item .value {
    color: #ffffff;
    font-weight: 600;
}

.detail-item .value.success {
    color: #dc2626;
}

.success-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-main {
        padding: 24px 24px 80px 24px;
    }
    
    .navbar {
        width: 100%;
        padding: 10px 16px;
    }
    
    .nav-container {
        flex-direction: row;
        height: 70px;
        padding: 0 15px;
        justify-content: space-between;
    }
    
    .nav-menu {
        margin-top: 0;
        flex-wrap: nowrap;
        justify-content: center;
    }
    
    .nav-item {
        margin: 0 5px;
    }
    
    .nav-link {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .nav-link i {
        font-size: 16px;
        margin-right: 5px;
    }
    
    .user-info {
        display: none;
    }
    
    .profile-header {
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 20px;
    }
    
    .profile-info {
        flex-direction: column;
        gap: 15px;
    }
    
    .invite-stats {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    
    .stat-card {
        min-width: 110px;
        padding: 15px;
    }
    
    .stat-value {
        font-size: 24px;
        margin-bottom: 5px;
    }
    
    .invite-actions {
        flex-direction: column;
    }
    
    .dashboard-container h1 {
        font-size: 28px;
    }
    
    .link-wrapper {
        flex-direction: column;
    }
    
    .floating-telegram-btn {
        bottom: 20px;
        right: 16px;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .support-darkweb-section {
        flex-direction: column;
        padding: 20px;
    }
    
    .support-darkweb-divider {
        width: 80%;
        height: 1px;
        min-height: 1px;
        max-height: 1px;
        margin: 15px 0;
    }
    
    .support-darkweb-half h3 {
        font-size: 20px;
    }
    
    .tiers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .payment-options {
        flex-direction: column;
        align-items: center;
    }
    
    .payment-option {
        max-width: 100%;
        width: 100%;
    }
    
    .crypto-options {
        flex-direction: column;
    }
    
    .address-display {
        flex-direction: column;
    }
    
    .page-header h1 {
        font-size: 28px;
    }
    
    .tiers-section h2,
    .payment-section h2 {
        font-size: 24px;
    }
    
    .alert-content {
        flex-direction: column;
        text-align: center;
    }
    
    .payment-methods-list {
        justify-content: center;
    }
    
    .qr-code {
        width: 120px;
        height: 120px;
    }
    
    /* Mobile - navbar continua no topo */
    .nav-container {
        height: 48px;
        padding: 0;
    }
    
    .nav-menu {
        justify-content: space-around;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .nav-item {
        margin: 0;
        flex: 1;
        text-align: center;
    }
    
    .nav-link {
        flex-direction: column;
        padding: 8px 0;
        font-size: 12px;
        border-radius: 0;
    }
    
    .nav-link i {
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .nav-link span {
        display: block;
        font-size: 12px;
    }
    
    .nav-link.active::after {
        display: none;
    }
    
    /* Only hide logo when navbar has menu (dashboard); purchase page keeps logo */
    .nav-container:has(.nav-menu) .logo {
        display: none;
    }
    .user-profile-container {
        display: none;
    }
}

/* Invites Management Section */

/* Responsive adjustments */
@media (max-width: 768px) {
    .invite-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .invite-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #dc2626;
    color: #000000;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    font-weight: 500;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Telegram Alert Box */
.telegram-alert-box {
    background: rgba(0, 102, 204, 0.15);
    border: 1px solid #0066cc;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.telegram-alert-box .alert-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.telegram-alert-box .fab.fa-telegram {
    font-size: 32px;
    color: #0088cc;
}

.telegram-alert-box .alert-text h4 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.telegram-alert-box .alert-text p {
    color: #cccccc;
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.btn-telegram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-telegram:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

/* CashApp Alert Box */
.cashapp-alert-box {
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid #ffa500;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.cashapp-alert-box .alert-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cashapp-alert-box .fas.fa-exclamation-triangle {
    font-size: 32px;
    color: #ffa500;
}

.cashapp-alert-box .alert-text h4 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.cashapp-alert-box .alert-text p {
    color: #cccccc;
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Tier Warning Box - Want a Personalized Tier (mesmo estilo do backup group, alinhado ao grid de tiers) */
.tier-warning-box {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 0 auto 24px auto;
    width: 100%;
    max-width: 880px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.tier-warning-box .warning-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.tier-warning-box .warning-text h4 {
    color: #fff;
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.tier-warning-box .warning-text p {
    color: #999;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.tier-warning-box .btn-telegram {
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}

.tier-warning-box .btn-telegram:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
}

.tier-warning-box .fab.fa-telegram,
.tier-warning-box .fa-question-circle {
    font-size: 20px;
    color: #fff;
}

.tier-warning-box .fas.fa-exclamation-triangle {
    font-size: 24px;
    color: #ffcc00;
}

.btn-telegram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-telegram:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    text-decoration: none;
    color: #fff;
}

/* CashApp Warning Box */
.cashapp-warning-box {
    background: #0b0d12;
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 20px 0;
    text-align: center;
}

.cashapp-warning-box .warning-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cashapp-warning-box .fas.fa-exclamation-triangle {
    font-size: 28px;
    color: #ffa500;
}

/* Dark Web Modal */
.dark-web-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 13, 18, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.dark-web-modal {
    background: #0b0d12;
    border: 1px solid #252525;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #252525;
}

.modal-header h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #888888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    max-height: 55vh;
    overflow-y: auto;
    text-align: center;
    padding: 20px 10px; /* More padding for a cleaner look */
    box-sizing: border-box;
    color: #cccccc;
}

.modal-body p {
    margin-bottom: 20px; /* Increase margin for better spacing */
    line-height: 1.6; /* Slightly more line height for readability */
    font-size: 16px; /* Slightly larger font for better readability */
}

.modal-body ol {
    margin: 16px 0;
    padding-left: 20px;
}

.modal-body li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.modal-body a {
    color: #dc2626;
    text-decoration: none;
}

.modal-body a:hover {
    text-decoration: underline;
}

.modal-body strong {
    color: #ffffff;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
}

.modal-btn.secondary {
    background: #0b0d12;
    color: #ccc;
    border: 1px solid #252525;
    border-radius: 12px;
}

.modal-btn.secondary:hover {
    background: #0b0d12;
    border-color: #444;
    color: #fff;
}

.modal-btn.primary {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.modal-btn.primary:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

.cashapp-warning-box .warning-text h4 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
}

.cashapp-warning-box .warning-text p {
    color: #cccccc;
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.tutorial-video {
    margin-top: 16px;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #0b0d12;
}

.tutorial-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ========== Responsive: Tablet (1024px) ========== */
@media (max-width: 1024px) {
    .dashboard-main {
        padding: 24px 24px 80px 24px;
    }
    .dashboard-container {
        padding: 24px 0;
    }
    .page-header {
        padding: 24px 0;
        margin-bottom: 32px;
    }
    .page-header h1 {
        font-size: 26px;
    }
    .page-header p {
        font-size: 14px;
        max-width: 100%;
    }
    .tiers-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
    .premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .tier-card-style-3 .tier-card-body {
        padding: 12px 12px 14px;
    }
    .tier-warning-box {
        flex-direction: column;
        padding: 20px 16px;
        gap: 16px;
        text-align: center;
    }
    .tier-warning-box .warning-content {
        justify-content: center;
    }
    .payment-section {
        padding: 24px 20px;
    }
    .selected-tier-header h2 {
        font-size: 20px;
    }
    .selected-tier-header p {
        font-size: 14px;
    }
    .previews-section h2 {
        font-size: 18px;
    }
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
}

/* ========== Responsive: Mobile (480px) ========== */
@media (max-width: 480px) {
    body {
        padding-top: 72px;
    }
    .navbar {
        padding: 8px 12px;
    }
    .nav-container {
        height: 56px;
        padding: 0 8px;
    }
    .text-logo {
        font-size: 18px;
    }
    .logo-img {
        height: 38px;
    max-width: 170px;
    }
    .dashboard-main {
        padding: 16px 12px 80px 12px;
    }
    .dashboard-container {
        padding: 16px 0;
    }
    .page-header {
        padding: 16px 0;
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 22px;
    }
    .page-header p {
        font-size: 13px;
    }
    .tiers-section {
        margin-bottom: 40px;
    }
    .tiers-section h2 {
        font-size: 16px;
        margin-bottom: 14px;
    }
    .tiers-section h2:not(:first-child) {
        margin-top: 32px;
    }
    .tiers-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .tier-card-style-3 .tier-card-body {
        padding: 12px 12px 14px;
    }
    .tier-card-style-3 .tier-price {
        font-size: 16px;
    }
    .tier-warning-box {
        padding: 16px 12px;
        margin-bottom: 20px;
    }
    .tier-warning-box .warning-text h4 {
        font-size: 15px;
    }
    .tier-warning-box .warning-text p {
        font-size: 13px;
    }
    .tier-warning-box .btn-telegram {
        width: 100%;
        justify-content: center;
    }
    .payment-section {
        padding: 20px 16px;
        border-radius: 12px;
    }
    .payment-section h2 {
        font-size: 18px;
        margin-bottom: 18px;
    }
    .selected-tier-header h2 {
        font-size: 18px;
    }
    .selected-tier-header p {
        font-size: 13px;
    }
    .selected-tier-header .btn-secondary {
        padding: 12px 16px;
        font-size: 14px;
    }
    .purchase-modal .payment-options .purchase-payment-option,
    .payment-option {
        padding: 12px 16px;
        font-size: 13px;
    }
    .payment-form h3 {
        font-size: 16px;
    }
    .payment-form p {
        font-size: 13px;
    }
    .crypto-option {
        min-width: 0;
        padding: 12px 16px;
    }
    .crypto-option span {
        font-size: 14px;
    }
    .address-display {
        flex-direction: column;
        gap: 12px;
    }
    .btn-primary,
    .btn-secondary {
        padding: 12px 18px;
        font-size: 14px;
    }
    .success-actions {
        flex-direction: column;
        width: 100%;
    }
    .success-actions .btn-primary,
    .success-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .floating-telegram-btn,
    .support-fab {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
        left: auto;
    }
    .floating-telegram-btn {
        padding: 12px 14px;
        font-size: 13px;
    }
    .support-fab {
        width: 52px;
        height: 52px;
        bottom: max(20px, env(safe-area-inset-bottom));
        right: max(20px, env(safe-area-inset-right));
        font-size: 22px;
    }
    .notification-toast {
        left: 12px;
        right: 12px;
        bottom: max(20px, env(safe-area-inset-bottom));
        width: auto;
    }
    .notification-container {
        width: calc(100% - 24px);
        left: 12px;
        right: 12px;
        max-width: none;
    }
    .previews-section {
        margin-bottom: 40px;
    }
    .previews-section h2 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .video-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .pagination button {
        min-width: 40px;
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ========== Responsive & Clean - Mobile / Desktop ========== */

/* Mobile-only layer: desktop styles stay untouched */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* (base video-cards keep original fixed-height thumbnails on desktop) */

/* tablet/desktop tiers keep the original responsive grid */

/* ===== Landscape phones / small tablets ===== */
@media (max-width: 768px) {
    body {
        padding-top: calc(76px + env(safe-area-inset-top, 0px));
    }
    button,
    input,
    textarea,
    select {
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    .form-group input,
    .address-display input,
    .link-wrapper input,
    #giftcardCode,
    #transactionId,
    #cashappTransactionId,
    #walletAddress,
    #cashappWalletAddress {
        font-size: 16px;
    }
    .tier-card-buy,
    .purchase-payment-option,
    .payment-option,
    .crypto-option,
    .btn-primary,
    .btn-secondary,
    .modal-btn,
    .faq-question-btn,
    .pagination button {
        min-height: 44px;
    }
    .play-icon {
        width: 64px;
        height: 64px;
        font-size: 36px;
    }
    .tier-card-image-wrap,
    .tier-card-style-3 .tier-card-image-wrap {
        max-height: 120px;
    }
}

/* ===== Phones: stack the page, no horizontal carousel ===== */
@media (max-width: 600px) {
    body {
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
    }
    .navbar {
        padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    }
    .dashboard-main {
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) 88px max(12px, env(safe-area-inset-left, 0px));
    }
    .dashboard-container {
        padding: 8px 0 24px;
    }
    .page-header {
        padding: 8px 0 4px;
        margin-bottom: 18px;
    }
    .page-header h1 {
        font-size: 22px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .page-header p {
        font-size: 13px;
        padding: 0 4px;
    }
    .video-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    .video-thumbnail {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .video-thumbnail .play-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }
    .video-info {
        padding: 12px;
    }
    .video-info h3 {
        font-size: 14px;
        white-space: normal;
    }
    .crypto-options {
        gap: 10px;
    }
    .crypto-option {
        padding: 12px 14px;
    }
    .payment-options {
        gap: 10px;
        width: 100%;
    }
    .tiers-section {
        margin-bottom: 28px;
    }
    .tiers-grid,
    #tiersGrid,
    #specialTiersGrid {
        display: grid;
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
        overflow: visible;
        overscroll-behavior-x: auto;
        scroll-snap-type: none;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 12px;
    }
    .tiers-grid .tier-card {
        width: 100%;
        max-width: none;
        scroll-snap-align: unset;
    }
    .tiers-grid .tier-card-image-wrap,
    .tiers-grid .tier-card-style-3 .tier-card-image-wrap {
        max-height: none;
        aspect-ratio: 2 / 1;
        border-radius: 12px 12px 0 0;
    }
    .tiers-grid .tier-card-body,
    .tiers-grid .tier-card-style-3 .tier-card-body {
        padding: 12px 14px 14px;
    }
    .tiers-grid .tier-card .tier-card-buy {
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
        min-height: 44px;
    }
    .faq-section {
        margin: 28px 0 16px;
        padding: 0;
        max-width: none;
    }
    .site-footer {
        padding: 16px max(12px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        margin-top: 16px;
    }
}

/* ===== Compact phones ===== */
@media (max-width: 480px) {
    body {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
    }
    .navbar {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
    }
    .nav-container {
        height: 48px;
        padding: 0;
    }
    .logo-img {
        height: 34px;
        max-width: 120px;
    }
    .video-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .video-modal {
        padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
        align-items: stretch;
        backdrop-filter: blur(6px);
    }
    .video-modal .video-modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 16px;
        margin: 0;
        background: linear-gradient(180deg, #0b0d12 0%, #12151d 100%);
        box-shadow: 0 12px 40px rgba(0,0,0,0.6);
        overflow: hidden;
    }
    .video-modal .video-modal-header {
        background: rgba(11, 13, 18, 0.8);
        backdrop-filter: blur(8px);
        padding: 6px 10px;
        min-height: 44px;
    }
    .video-modal .video-modal-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
        background: rgba(255, 255, 255, 0.18);
    }
    .video-modal #videoPlayer {
        max-height: none;
        flex: 1;
        background: radial-gradient(ellipse at center, #1a1d26 0%, #0b0d12 100%);
        border-radius: 0 0 16px 16px;
    }
    .video-modal #videoPlayer video,
    .video-modal #videoPlayer .modal-video-player {
        max-height: calc(100dvh - 64px);
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    .modal-content {
        width: calc(100% - 24px);
        max-width: 100%;
        margin: 12px;
        padding: 24px 16px;
    }
    .purchase-modal-overlay.purchase-modal-overlay {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }
    .purchase-modal.purchase-modal {
        max-width: 100%;
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
    .purchase-modal.purchase-modal .payment-section {
        padding: 16px 14px max(20px, env(safe-area-inset-bottom, 0px));
        padding-top: 12px;
        border-radius: 0;
        border-bottom: none;
    }
    .purchase-modal-close.purchase-modal-close {
        top: max(10px, env(safe-area-inset-top, 0px));
        right: 10px;
    }
    .support-popout-overlay.support-popout-overlay {
        padding: 12px;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }
    .success-section {
        padding: 24px 14px;
    }
    .success-section h2 {
        font-size: 22px;
    }
    .success-section p {
        font-size: 14px;
    }
    .detail-item {
        gap: 10px;
        flex-wrap: wrap;
    }
    .detail-item .value {
        text-align: left;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .age-gate-box {
        padding: 24px 16px;
        max-width: 100%;
        border-radius: 14px;
    }
    .age-gate-box h2 {
        font-size: 1.25rem;
    }
    .age-gate-box .age-warning {
        font-size: 0.9rem;
    }
    .age-gate-buttons {
        flex-direction: column;
    }
    .age-gate-buttons button {
        width: 100%;
    }
    .faq-list {
        gap: 10px;
    }
    .faq-question-btn {
        padding: 14px 14px;
        font-size: 14px;
    }
    .faq-answer {
        padding: 0 14px 14px 14px;
    }
    .support-fab,
    .floating-telegram-btn {
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
    }
    .back-to-top {
        bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 72px));
        left: max(12px, env(safe-area-inset-left, 0px));
    }
    .pagination {
        gap: 6px;
        padding: 0 0 8px;
    }
    .pagination button {
        min-width: 40px;
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* desktop container keeps original max-width */

@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .video-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
    .tiers-grid {
        grid-template-columns: 1fr !important;
    }
    .premium-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===== Keep floating buttons above the bottom nav ===== */
.support-fab,
.floating-telegram-btn {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}
.back-to-top {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 600px) {
    .support-fab,
    .floating-telegram-btn {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px));
    }
    .back-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px));
    }
}
/* ===== Tier videos section (tier1..tier6) ===== */
.tier-section {
    margin-bottom: 34px;
}

.tier-section .catalog-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tier-lock-badge,
.tier-unlock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: inherit;
}

.tier-lock-badge {
    color: #ffb4b4;
    background: rgba(220, 60, 60, 0.14);
    border: 1px solid rgba(220, 60, 60, 0.35);
}

.tier-unlock-badge {
    color: #9ee6b0;
    background: rgba(60, 190, 110, 0.14);
    border: 1px solid rgba(60, 190, 110, 0.35);
}

.tier-section .tier-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Card bloqueado: mantem o layout mas indica que precisa de compra */
.video-card-locked {
    cursor: pointer;
}

.video-card-locked .video-thumbnail img {
    filter: grayscale(0.6) brightness(0.55);
}

.video-card-locked:hover .video-thumbnail img {
    filter: grayscale(0.4) brightness(0.65);
}

.video-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(11, 13, 18, 0.55);
    pointer-events: none;
}

.video-lock-overlay i {
    font-size: 26px;
}

.video-card-locked .play-icon {
    display: none;
}
/* Hero Section (restored) */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(11, 13, 18, 0.98) 0%, rgba(11, 13, 18, 0.6) 100%);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 14px;
    overflow: hidden;
    padding: 12px 16px;
    margin-bottom: 12px;
    min-height: 80px;
}
.hero-bg {
    position: absolute !important;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
}
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.15;
}
.hero-title-accent { color: #dc2626; }
.hero-subtitle {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-size: 15px;
}
.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
.hero-btn-primary {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
}
.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 768px) {
    .hero-section { padding: 16px; }
    .hero-bg { width: 100%; opacity: 0.3; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-btn { width: 100%; justify-content: center; }
}
/* Auth modal + payment details (restored/minimal) */
.auth-modal-content { max-width: 420px; width: 92%; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #252525; background: #0b0d12; color: #ccc; cursor: pointer; font-weight: 600; }
.auth-tab.active { background: #dc2626; color: #fff; border-color: #dc2626; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-error { color: #ff6b6b; font-size: 13px; margin-bottom: 10px; min-height: 18px; }
.captcha-image { min-height: 40px; background: #111; border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.captcha-refresh { background: #0b0d12; border: 1px solid #252525; color: #dc2626; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.crypto-amount { display: flex; gap: 6px; align-items: center; margin: 8px 0; color: #fff; }
.payment-expiration { margin: 8px 0; color: #ccc; }
.video-lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(11,13,18,0.55); color: #fff; pointer-events: none; }
.lock-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#dc2626,#b91c1c); }
.lock-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
/* Auth state toggle (logged in/out) */
body:not(.is-logged-in) .user-profile { display: none !important; }
body:not(.is-logged-in) .login-btn-nav { display: inline-flex !important; }
body.is-logged-in .user-profile { display: flex !important; }
body.is-logged-in .login-btn-nav { display: none !important; }
/* Mobile polish */
@media (max-width: 480px) {
    .dashboard-main { padding: 16px 12px 80px !important; }
    .hero-title { font-size: 24px; }
    .catalog-arrow.prev { left: 4px; }
    .catalog-arrow.next { right: 4px; }
    .bottom-nav-btn { font-size: 10px; padding: 8px 2px; }
    .bottom-nav-btn i { font-size: 18px; }
}
/* Bottom nav mobile fix */
@media (max-width: 768px) {
    .bottom-nav {
        grid-template-columns: repeat(4, 1fr) !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    .bottom-nav-btn {
        min-height: 56px;
        justify-content: center;
    }
}
/* GB badge on buy cards */
.tier-card-gb {
    display: inline-block;
    margin: 6px 0 10px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
}
/* Cards de compra: layout em grade (preço grande, tamanho, checks, Buy Now / Contact) */
.tier-card-layout {
    background: #0b0d12;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    box-shadow: none;
}
.tier-card-layout::before,
.tier-card-layout::after {
    display: none;
}
.tier-card-layout:hover {
    border-color: #444;
    box-shadow: none;
}
.tier-card-layout.tier-card-featured {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35), 0 0 24px rgba(220, 38, 38, 0.15);
}
.tier-card-layout .tier-card-body {
    padding: 16px;
}
.tier-card-layout .tier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
    margin-bottom: 14px;
}
.tier-card-layout .tier-card-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9a9a;
}
.tier-card-layout .tier-card-badge {
    margin: 0;
    padding: 4px 9px;
    background: #dc2626;
    color: #fff;
    border: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tier-card-layout .tier-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.tier-card-layout .tier-price {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.tier-card-layout .tier-price sup {
    font-size: 14px;
    font-weight: 700;
    vertical-align: top;
    margin-right: 2px;
}
.tier-card-layout .tier-price span.tier-price-usd {
    font-size: 11px;
    color: #888;
    margin-left: 4px;
}
.tier-card-layout .tier-card-gb {
    margin: 0;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
}
.tier-card-layout .tier-card-features {
    flex: 1;
    margin: 0 0 16px;
}
.tier-card-layout .tier-card-features li {
    padding: 4px 0 4px 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}
.tier-card-layout .tier-card-features li::before {
    content: none;
}
.tier-card-layout .tier-card-features li i {
    position: absolute;
    left: 0;
    top: 7px;
    font-size: 11px;
    color: #34d399;
}
.tier-card-layout .tier-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}
.tier-card-layout .tier-card-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.tier-card-layout .tier-card-contact {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #15171c !important;
    border: 1px solid #2a2a2a !important;
    color: #ddd !important;
    -webkit-text-fill-color: #ddd;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.tier-card-layout .tier-card-contact i {
    color: #ddd !important;
}
.tier-card-layout .tier-card-contact:hover {
    background: #1d2028 !important;
    border-color: #3a3a3a !important;
    color: #fff !important;
}
@media (min-width: 601px) {
    #tiersGrid,
    #specialTiersGrid {
        grid-template-columns: repeat(auto-fill, 190px);
        justify-content: start;
        gap: 15px;
    }
    #tiersGrid .tier-card-layout,
    #specialTiersGrid .tier-card-layout {
        width: 190px;
        min-height: 315px;
    }
}

/* Buy: cabeçalho, abas Basic / Extras e faixa de aviso */
.buy-hero {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.10) 0%, #0b0d12 70%);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.buy-hero-top {
    display: flex;
    align-items: center;
    gap: 16px;
}
.buy-hero-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}
.buy-hero-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.buy-hero-title h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.buy-hero-pill {
    border: 1px solid rgba(220, 38, 38, 0.5);
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
}
.buy-hero-text p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #bbb;
}
.buy-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.buy-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #120c0d;
    border: 1px solid rgba(220, 38, 38, 0.2);
    color: #e5e5e5;
    font-size: 12px;
    font-weight: 600;
}
.buy-hero-chips i {
    color: #dc2626;
}

.buy-hero-chips .mega-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.buy-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    background: #0b0d12;
    margin-bottom: 16px;
}
.buy-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #888;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.buy-tab:not(.active):hover {
    color: #fff;
}
.buy-tab.active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.buy-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.08) 0%, #0b0d12 100%);
}
.buy-notice-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    font-size: 16px;
}
.buy-notice p {
    margin: 0;
    font-size: 14px;
    color: #bbb;
}
.buy-notice strong {
    color: #fff;
}

/* Premium: cabeçalho "Choose Your Plan" */
.premium-hero {
    text-align: center;
    margin: 0 0 28px;
}
.premium-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.08);
    color: #f87171;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 0 24px rgba(220, 38, 38, 0.18);
}
.premium-section .premium-hero-title {
    margin: 24px 0 10px;
    font-size: clamp(28px, 8vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #f1f5ff;
    text-align: center;
}
.premium-hero-sub {
    margin: 0;
    font-size: 16px;
    color: #8a8a8a;
}
.premium-hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
.premium-hero-divider::before,
.premium-hero-divider::after {
    content: '';
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dc2626);
}
.premium-hero-divider::after {
    background: linear-gradient(90deg, #dc2626, transparent);
}
.premium-hero-divider i {
    color: #f87171;
    font-size: 20px;
    text-shadow: 0 0 14px rgba(255, 59, 59, 0.6);
}

/* All Videos: 2 columns on mobile, auto on desktop */
#allVideosGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#allVideosGrid > .video-item {
    min-width: 0;
}
@media (min-width: 1024px) {
    #allVideosGrid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}
@media (max-width: 520px) {
    #allVideosGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== Hub Polish (area de previews para clientes) ===== */
#videosView .hero-section {
    border-radius: 20px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(220, 38, 38, 0.18) 0%, rgba(11, 13, 18, 0) 60%),
        linear-gradient(135deg, #12151d 0%, #0b0d12 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 28px 32px;
    min-height: 150px;
    margin-bottom: 24px;
}
#videosView .hero-bg img {
    opacity: 0.35;
    filter: saturate(1.2) blur(1px);
}
#videosView .hero-title {
    font-size: clamp(22px, 4vw, 34px);
    background: linear-gradient(135deg, #ffffff 0%, #f87171 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}
#videosView .hero-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 460px;
}
#videosView .hero-btn {
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#videosView .hero-btn:hover {
    transform: translateY(-2px);
}
#videosView .hero-btn-primary {
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
}
#videosView .hero-btn-primary:hover {
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.5);
}

#videosView .page-header {
    margin-bottom: 32px;
    padding: 8px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#videosView .page-header h1 {
    font-size: clamp(24px, 3.5vw, 32px);
    background: linear-gradient(135deg, #ffffff 0%, #b0b0b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
#videosView .page-header p {
    color: rgba(255, 255, 255, 0.55);
}

#videosView .video-catalog {
    margin-bottom: 40px;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}
#videosView .catalog-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
#videosView .catalog-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
}

#videosView .video-card {
    border-radius: 14px;
    background: #141821;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#videosView .video-card:hover {
    transform: translateY(-6px);
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(220, 38, 38, 0.15);
}
#videosView .video-thumbnail {
    border-radius: 14px 14px 0 0;
    aspect-ratio: 4 / 3;
    height: auto;
    background: linear-gradient(135deg, #1a1e28 0%, #0b0d12 100%);
}
#videosView .video-thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}
#videosView .video-thumbnail img {
    transition: transform 0.4s ease;
}
#videosView .video-card:hover .video-thumbnail img {
    transform: scale(1.06);
}
#videosView .video-thumbnail .play-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
    background: rgba(11, 13, 18, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.25);
}
#videosView .video-info {
    padding: 14px 16px 16px;
    background: linear-gradient(180deg, #141821 0%, #10131a 100%);
}
#videosView .video-info h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}
#videosView .video-carousel::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #dc2626, #b91c1c);
    border-radius: 8px;
}
#videosView .catalog-arrow {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 24, 33, 0.9);
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}
#videosView .catalog-arrow:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
    transform: translateY(-50%) scale(1.05);
}

@media (max-width: 768px) {
    #videosView .hero-section { padding: 20px 18px; min-height: 120px; }
    #videosView .video-catalog { padding: 16px; border-radius: 14px; }
    #videosView .video-card { border-radius: 12px; }
    #videosView .video-thumbnail { aspect-ratio: 4 / 3; height: auto; }


    #videosView .catalog-arrow { display: flex; width: 34px; height: 34px; font-size: 12px; }
}

/* ===== Hub Mobile Polish ===== */
@media (max-width: 768px) {
    #videosView .hero-section {
        border-radius: 16px;
        padding: 18px 16px;
        min-height: 128px;
        margin-bottom: 18px;
    }
    #videosView .hero-title {
        font-size: 22px;
        line-height: 1.1;
    }
    #videosView .hero-subtitle {
        font-size: 13px;
        max-width: 100%;
    }
    #videosView .hero-actions {
        gap: 8px;
        margin-top: 10px;
    }
    #videosView .hero-btn {
        padding: 11px 14px;
        font-size: 13px;
        border-radius: 10px;
    }
    #videosView .page-header {
        margin-bottom: 20px;
        padding: 4px 0 16px;
    }
    #videosView .page-header h1 {
        font-size: 22px;
    }
    #videosView .page-header p {
        font-size: 13px;
    }
    #videosView .video-catalog {
        padding: 14px 12px;
        margin-bottom: 22px;
        border-radius: 14px;
    }
    #videosView .catalog-title {
        font-size: 16px;
        margin-bottom: 14px;
        gap: 8px;
    }
    #videosView .catalog-title::before {
        height: 14px;
    }
    #videosView .video-carousel {
        gap: 12px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }
    #videosView .video-carousel .video-card {
        flex: 0 0 60vw;
        max-width: 140px;
        scroll-snap-align: center;
    }
    #videosView .video-thumbnail {
        aspect-ratio: 4 / 3;
        height: auto;
    }
    #videosView .video-info {
        padding: 12px 13px 14px;
    }
    #videosView .video-info h3 {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    #videosView .hero-section {
        padding: 16px 14px;
    }
    #videosView .hero-title {
        font-size: 20px;
    }
    #videosView .hero-bg {
        opacity: 0.22;
    }
    #videosView .video-catalog {
        padding: 12px 10px;
    }
    #videosView .video-carousel .video-card {
        flex: 0 0 65vw;
    }
    #videosView .video-thumbnail {
        aspect-ratio: 4 / 3;
        height: auto;
    }
    #videosView .video-info h3 {
        font-size: 13px;
    }
}
/* Smooth scrolling for hub carousels */
#videosView .video-carousel {
    -webkit-overflow-scrolling: touch;
}
/* Active bottom nav highlight glow */
.bottom-nav-btn.active {
    color: #dc2626;
}
.bottom-nav-btn.active i {
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.5));
}

/* ===== Contorno mais bonito dos videos da Home ===== */
#videosView .video-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    isolation: isolate;
}
#videosView .video-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.0), rgba(220, 38, 38, 0.35), rgba(220, 38, 38, 0.0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
#videosView .video-card:hover::before {
    opacity: 1;
}
#videosView .video-card:hover {
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(220, 38, 38, 0.2),
        0 0 24px rgba(220, 38, 38, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#videosView .video-thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
#videosView .video-card:hover .video-thumbnail {
    border-color: rgba(220, 38, 38, 0.25);
}
/* Brilho sutil no topo do card */
#videosView .video-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.7), transparent);
    opacity: 0.6;
    pointer-events: none;
    z-index: 3;
}

/* ===== Sem borda nos videos da Home ===== */
#videosView .video-card {
    border: none !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
#videosView .video-card::before,
#videosView .video-card::after {
    display: none !important;
    content: none !important;
}
#videosView .video-card:hover {
    border: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 28px rgba(220, 38, 38, 0.12);
}
#videosView .video-thumbnail {
    border: none !important;
    box-shadow: none !important;
}

/* ===== Com borda nos videos da Home (restaurado) ===== */
#videosView .video-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
#videosView .video-card::before,
#videosView .video-card::after {
    display: block !important;
}
#videosView .video-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(220, 38, 38, 0.2),
        0 0 24px rgba(220, 38, 38, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#videosView .video-thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

/* ===== Fix: restaurar content dos pseudo-elementos ===== */
#videosView .video-card::before,
#videosView .video-card::after {
    content: "" !important;
}

/* ===== Ajuste de tamanho dos titulos de categoria (sem engolir palavras) ===== */
#videosView .catalog-title,
#videosView .page-header h1,
#videosView .previews-section h2 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
}
#videosView .catalog-title {
    font-size: clamp(16px, 4vw, 22px) !important;
}
#videosView .page-header h1 {
    font-size: clamp(20px, 5vw, 30px) !important;
}
@media (max-width: 480px) {
    #videosView .catalog-title {
        font-size: 14px !important;
        letter-spacing: 0.06em !important;
    }
}

/* ===== Reduzir borda/sombra abaixo dos videos ===== */
#videosView .video-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}
#videosView .video-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(220, 38, 38, 0.1) !important;
}
#videosView .video-thumbnail::after {
    display: none !important;
    content: none !important;
}
#videosView .video-catalog {
    box-shadow: none !important;
}

/* ===== Hub Glass (vidro) ===== */
#videosView .video-catalog {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#videosView .video-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
#videosView .video-card:hover {
    border-color: rgba(248, 113, 113, 0.4) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3), 0 0 20px rgba(220, 38, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#videosView .video-thumbnail {
    background: rgba(0, 0, 0, 0.25) !important;
}
#videosView .video-info {
    background: rgba(255, 255, 255, 0.03) !important;
}
#videosView .hero-section {
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(220, 38, 38, 0.15) 0%, rgba(11, 13, 18, 0) 60%),
        rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* Hero image cover */
#videosView .hero-bg img {
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.45 !important;
}

/* Desktop: thumbs maiores na home */
@media (min-width: 1024px) {
    #videosView .video-carousel .video-card,
    #videosView .video-carousel .video-item {
        flex: 0 0 260px;
        max-width: 260px;
        width: 260px;
    }
    #videosView .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Free Videos: 2 colunas no mobile, thumbs menores no desktop */
.free-videos-grid {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 769px) {
    .free-videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
}

/* ===== Site preenche a tela no PC ===== */
@media (min-width: 1024px) {
    .dashboard-main {
        padding: 0 24px 100px 24px !important;
        align-items: stretch !important;
    }
    .dashboard-container {
        max-width: 100% !important;
        padding: 0 24px 40px !important;
    }
}

/* ===== Reduzir borda/espaco embaixo dos catalogos de video ===== */
#videosView .video-catalog {
    padding: 18px 18px 10px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}
#videosView .video-carousel {
    padding-bottom: 4px !important;
}
#videosView .video-catalog .previews-section {
    margin-bottom: 0 !important;
}

/* ===== Remover borda de fundo dos catalogos, manter contorno apenas nos videos ===== */
#videosView .video-catalog {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 0 4px !important;
}
#videosView .video-card {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ===== Espacamento entre nome da categoria e os videos ===== */
#videosView .catalog-title {
    margin-bottom: 16px !important;
}
#videosView .previews-section h2 {
    margin-bottom: 16px !important;
}

/* ===== Evitar videos sobrepondo o titulo da categoria seguinte ===== */
#videosView .video-catalog {
    margin-bottom: 40px !important;
    padding-top: 8px !important;
}
#videosView .video-carousel {
    margin-bottom: 8px !important;
}

/* ===== Hub: sidebar de videos no modal ===== */
.video-modal-body {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex: 1;
    min-height: 0;
    width: 100%;
}
.video-modal-body #videoPlayer {
    flex: 1 1 auto;
    min-width: 0;
}
.video-sidebar {
    flex: 0 0 300px;
    max-width: 35%;
    overflow-y: auto;
    padding: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.25);
}
.video-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 4px 0 10px;
}
.video-sidebar-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.video-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.video-sidebar-thumb {
    flex: 0 0 96px;
    height: 54px;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
}
.video-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-sidebar-info {
    flex: 1;
    min-width: 0;
}
.video-sidebar-name {
    font-size: 12px;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-sidebar-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
@media (max-width: 768px) {
    .video-modal-body {
        flex-direction: column;
    }
    .video-sidebar {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        max-height: 200px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .video-sidebar-thumb {
        flex: 0 0 80px;
        height: 45px;
    }
}

/* ===== Correcao do hub lateral: layout estavel ===== */
.video-modal .video-modal-content {
    max-width: min(96vw, 1200px) !important;
}
.video-modal-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}
.video-modal-body #videoPlayer {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}
.video-sidebar {
    min-height: 0 !important;
    max-height: 100% !important;
    border-radius: 8px !important;
}
@media (max-width: 900px) {
    .video-modal-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
    }
    .video-sidebar {
        max-height: 180px !important;
    }
}

/* ===== Modal preenche mais a tela ===== */
.video-modal .video-modal-content {
    max-width: 98vw !important;
    max-height: 96vh !important;
    width: 100% !important;
    height: 96vh !important;
}
.video-modal-body {
    height: calc(96vh - 56px) !important;
}
.video-sidebar {
    flex: 0 0 360px !important;
    max-width: 38% !important;
}

/* ===== Sidebar "More videos" mais limpa ===== */
.video-sidebar {
    background: #0f1116 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 8px !important;
}
.video-sidebar-title {
    font-size: 12px !important;
    color: #9aa0ac !important;
    margin: 2px 4px 10px !important;
    letter-spacing: 0.1em !important;
}
.video-sidebar-item {
    gap: 10px !important;
    padding: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
.video-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.video-sidebar-thumb {
    flex: 0 0 88px !important;
    height: 50px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #1a1e28 !important;
}
.video-sidebar-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.video-sidebar-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}
.video-sidebar-name {
    font-size: 12px !important;
    color: #e6e6e6 !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
}
.video-sidebar-meta {
    font-size: 10px !important;
    color: #f87171 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ===== Correcao mobile da sidebar ===== */
@media (max-width: 900px) {
    .video-modal-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    .video-sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 220px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 0 0 8px 8px !important;
    }
    .video-sidebar-thumb {
        flex: 0 0 72px !important;
        height: 40px !important;
    }
}

/* ===== Player mais estavel (estilo YouTube) ===== */
.video-modal-body #videoPlayer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.video-modal #videoPlayer video,
.video-modal #videoPlayer .modal-video-player {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ===== Mobile/tablet: sidebar abaixo do player (estilo YouTube) ===== */
@media (max-width: 1024px) {
    .video-modal-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    .video-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        max-height: 200px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 0 0 8px 8px !important;
    }
    .video-sidebar-thumb {
        flex: 0 0 72px !important;
        height: 40px !important;
    }
}

/* ===== Sidebar mais larga no PC ===== */
@media (min-width: 1025px) {
    .video-modal-body {
        grid-template-columns: minmax(0, 1fr) 420px !important;
        gap: 16px !important;
        padding: 16px !important;
    }
    .video-sidebar {
        max-width: none !important;
        width: 420px !important;
        flex: 0 0 420px !important;
    }
    .video-sidebar-thumb {
        flex: 0 0 120px !important;
        height: 68px !important;
    }
}

/* ===== Contagem de views falsa abaixo dos videos ===== */
.video-item {
    display: block;
    align-self: flex-start;
}
.video-carousel .video-item {
    flex: 0 0 140px;
    width: 140px;
    scroll-snap-align: start;
}
.video-carousel .video-item > .video-card {
    flex: 0 0 auto;
    width: 100%;
}
.video-views {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 2px 0;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.video-views span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.video-views i {
    font-size: 11px;
}
@media (max-width: 768px) {
    #videosView .video-carousel .video-item {
        flex: 0 0 60vw;
        max-width: 140px;
        scroll-snap-align: center;
    }
}
@media (max-width: 480px) {
    #videosView .video-carousel .video-item {
        flex: 0 0 65vw;
    }
}

/* ===== Card centralizado de aviso Premium ===== */
.premium-page-warning-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 20, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px;
    box-sizing: border-box;
}
.premium-page-warning-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, #0b1224 0%, #0a1020 100%);
    border: 1px solid rgba(59,130,246,0.45);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 30px rgba(59,130,246,0.15);
}
.premium-page-warning-card .ppw-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(59,130,246,0.4);
}
.premium-page-warning-card h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.premium-page-warning-card p {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
    max-width: 320px;
}
.premium-page-warning-card .ppw-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}
.premium-page-warning-card .ppw-actions button {
    flex: 1 1 0;
    min-width: 0;
}
.premium-page-warning-card .ppw-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59,130,246,0.35);
}
.premium-page-warning-card .ppw-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #333;
    border-radius: 999px;
    background: #1a1e28;
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Aviso Premium nas paginas bloqueadas ===== */
.video-premium-warning {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(29,78,216,0.08) 100%);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 16px;
}
.video-premium-warning .vpw-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(59,130,246,0.4);
}
.video-premium-warning h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.video-premium-warning p {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
    max-width: 360px;
}
.video-premium-warning .vpw-primary {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59,130,246,0.35);
}

/* ===== Etiqueta FREE na thumb ===== */
.video-free-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.45);
}

/* ===== Etiqueta de CATEGORIA na thumb ===== */
.video-category-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.45);
}
.video-premium-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45);
}

/* ===== Badge de duracao falsa nos videos ===== */
#videosView .video-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}

/* Modal do video: so a lista "More Videos" rola, o card fica fixo */
.video-modal .video-modal-content {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.video-modal .video-modal-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.video-modal .video-modal-body > #videoPlayer,
.video-modal .video-modal-body > .video-details {
    flex: 0 0 auto !important;
}
.video-modal .video-modal-body > .vm-more {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}
.video-modal .vm-more-head {
    flex: 0 0 auto;
}
.video-modal .vm-more-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible !important;
    overscroll-behavior: auto;
}
.video-modal {
    overflow: hidden !important;
    overscroll-behavior: contain;
}
.vp-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 4;
    cursor: pointer;
}
.vp-progress-fill {
    height: 100%;
    width: 0;
    background: #dc2626;
}
/* Esconde o tempo real dos controles nativos: so a duracao falsa aparece */
.video-modal #videoPlayer video::-webkit-media-controls-current-time-display,
.video-modal #videoPlayer video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}
@media (max-width: 900px) {
    .video-modal .video-modal-body > #videoPlayer {
        flex: 0 0 auto !important;
        height: min(56vw, 42dvh) !important;
        min-height: 0 !important;
    }
    .video-modal .video-modal-body > #videoPlayer video,
    .video-modal .video-modal-body > #videoPlayer .modal-video-player {
        height: 100% !important;
        max-height: 100% !important;
    }
    .video-modal .video-modal-body > .video-details {
        flex: 0 0 auto !important;
    }
}

/* ===== Menu lateral (botao de 3 pontos na navbar) ===== */
.side-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2200;
    margin-right: 0;
    background: none;
    border: 1px solid #252525;
    border-radius: 10px;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.side-menu-btn:hover {
    color: #dc2626;
    border-color: #dc2626;
}
.side-menu-btn[aria-expanded="true"] {
    color: #dc2626;
    border-color: #dc2626;
}
.nav-container > .side-menu-btn + .logo {
    margin-right: auto;
    padding-right: 0;
}
.nav-container:has(.side-menu-btn) {
    max-width: none;
    gap: 8px;
}

.side-menu-overlay {
    display: none;
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
}
.side-menu-overlay.open {
    display: block;
}

.side-menu {
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    z-index: 2100;
    width: min(280px, 80vw);
    display: flex;
    flex-direction: column;
    background: #0b0d12;
    border-right: 1px solid #252525;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-sizing: border-box;
    padding: 0 16px 16px;
    padding-top: 0;
}
.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #252525;
}
.side-menu-close {
    background: none;
    border: none;
    color: #8b93a7;
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
}
.side-menu-close:hover {
    color: #ffffff;
}

.side-menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
}
.side-menu-section {
    display: flex;
    flex-direction: column;
}
.side-menu-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 8px 6px;
    background: none;
    border: none;
    color: #7d7d86;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
.side-menu-section-title:hover {
    color: #ffffff;
}
.side-menu-section-title i {
    font-size: 12px;
    transition: transform .2s ease;
}
.side-menu-section.collapsed .side-menu-section-title i {
    transform: rotate(-90deg);
}
.side-menu-section.collapsed .side-menu-section-body {
    display: none;
}
.side-menu-section-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.side-menu-link > span:first-of-type {
    flex: 1;
}
.side-menu-badge {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid #dc2626;
    border-radius: 999px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(220, 38, 38, .35);
}
.side-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    padding: 10px 12px;
    background: #15171d;
    border: 1px solid #252525;
    border-radius: 10px;
    color: #7d7d86;
}
.side-menu-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
}
.side-menu-categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.side-menu-categories .side-menu-link i {
    color: #7d7d86;
}
.side-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #b9bcc6;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.side-menu-link i {
    width: 22px;
    text-align: center;
    font-size: 18px;
}
.side-menu-link:hover {
    color: #ffffff;
    background: #15171d;
}
.side-menu-link.active {
    color: #ffffff;
    font-weight: 600;
    background: #15171d;
    border-color: #991b1b;
}
.side-menu-link.active i {
    color: #dc2626;
}
.side-menu-link.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: #dc2626;
}

/* Checkout sempre centralizado na tela */
#purchaseModal.purchase-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
}
@media (max-width: 768px) {
    #purchaseModal.purchase-modal-overlay {
        align-items: stretch !important;
    }
}

/* Fundo azul do site visivel por tras do conteudo */
.dashboard-container,
.dashboard-main,
#videosView,
#purchaseView {
    background: transparent !important;
}

/* Hero da home: so logo LAND e imagem visivel */
#videosView .hero-bg {
    width: 100% !important;
}
#videosView .hero-bg img {
    opacity: 1 !important;
    filter: none !important;
}
#videosView .hero-section {
    min-height: 240px;
    padding: 12px 24px;
    background: #0b0d12 !important;
}
#videosView .hero-bg img {
    object-position: center 30% !important;
}
.hero-logo {
    font-size: clamp(60px, 12vw, 120px);
    background: none;
    color: #eff6ff;
    -webkit-text-fill-color: #eff6ff;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.6),
        0 0 8px rgba(248, 113, 113, 0.7),
        0 0 18px rgba(220, 38, 38, 0.45);
}

/* ===== Atalho de compra no topo (sem texto), a esquerda do icone de perfil ===== */
.nav-buy-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.45);
    border-radius: 10px;
    color: #f87171;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.nav-buy-shortcut:hover {
    background: rgba(220, 38, 38, 0.26);
    border-color: #dc2626;
    color: #fca5a5;
    transform: translateY(-1px);
}

.nav-buy-shortcut:active {
    transform: translateY(0);
}

.nav-buy-shortcut:focus-visible {
    outline: 2px solid #fca5a5;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .nav-buy-shortcut {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 9px;
    }
}
/* So aparece se a pessoa tiver conta criada/logada */
body.is-logged-in .nav-buy-shortcut {
    display: inline-flex !important;
}
/* Atalho Premium (coroa) ao lado do de compra */
.nav-premium-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.nav-premium-shortcut:hover {
    background: rgba(251, 191, 36, 0.26);
    border-color: #f59e0b;
    color: #fcd34d;
    transform: translateY(-1px);
}

.nav-premium-shortcut:active {
    transform: translateY(0);
}

.nav-premium-shortcut:focus-visible {
    outline: 2px solid #fcd34d;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .nav-premium-shortcut {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 9px;
    }
}

body.is-logged-in .nav-premium-shortcut {
    display: inline-flex !important;
}

/* Oculta bottom nav no computador (desktop) */
@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Cabecalho da categoria: titulo a esquerda, setas a direita */
.catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.catalog-header .catalog-title {
    margin-bottom: 0;
}

.catalog-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.catalog-arrows .catalog-arrow {
    position: static;
    transform: none !important;
    top: auto;
    left: auto;
    right: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.catalog-arrows .catalog-arrow:hover {\n    transform: scale(1.05) !important;\n}

}

@media (max-width: 768px) {\n    #allVideosGrid {\n        max-width: 85% !important;\n        margin: 0 auto !important;\n    }\n}\n

/* Scrollbar do menu lateral (evita branco na quina) */
.side-menu,
.side-menu-links {
    color-scheme: dark;
    background-color: #0b0d12;
}
.side-menu-links::-webkit-scrollbar {
    width: 10px !important;
}
.side-menu-links::-webkit-scrollbar-track {
    background: #0b0d12 !important;
}
.side-menu-links::-webkit-scrollbar-thumb {
    background: #3a3a3a !important;
    border-radius: 5px !important;
    border: 2px solid #0b0d12 !important;
}
.side-menu-links::-webkit-scrollbar-thumb:hover {
    background: #dc2626 !important;
}
.side-menu-links {
    scrollbar-width: thin !important;
    scrollbar-color: #3a3a3a #0b0d12 !important;
}

/* Desabilita zoom de dois toques no mobile */\n* { touch-action: manipulation; }\n

.pagination-ellipsis { padding: 0 6px; color: #888; font-weight: 700; }