/* Material Design 3 Tokens - Sleek Dark Theme */
:root {
    /* Backgrounds */
    --md-sys-color-background-start: #1A1A1E;
    --md-sys-color-background-end: #0D0D0E;
    --md-sys-color-on-background: #FFFFFF;

    /* Bottom Panel */
    --panel-bg: #2B2930;
    /* surfaceContainer */
    --panel-icon: #E6E1E5;
    /* onSurface */
    --panel-active-right: #7D5260;
    /* muted burgundy-pink */
    --panel-pill-indicator: #4A4458;
    /* active pill background */
    --panel-icon-active: #E8DEF8;

    /* Cards */
    --card-bg: #D0CEDE;
    /* surfaceContainerHigh-like cold grey-lavender */
    --card-bg-side: #D9D9DF;
    /* slightly lighter surfaceVariant */
    --card-text: #1C1B1F;
    --card-text-variant: #49454F;
    --card-icon: rgba(73, 69, 79, 0.5);
    /* onSurfaceVariant with opacity */

    /* Action Colors */
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-tertiary: #FF9F0A;

    /* Animation settings */
    --md-sys-typescale-font-family: 'Roboto', sans-serif;
    --bounce-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --slide-timing: cubic-bezier(0.25, 1, 0.5, 1);

    /* Layout */
    --nav-height: 72px;
    --modal-bg: rgba(0, 0, 0, 0.85);
}

/* Auth Overlay - Premium Glassmorphism */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(26, 26, 30, 0.8) 0%, #0D0D0E 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.auth-overlay.active {
    opacity: 1;
    visibility: visible;
}

.auth-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 40px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    transform: translateY(20px);
    transition: transform 0.6s var(--bounce-timing);
}

.auth-overlay.active .auth-box {
    transform: translateY(0);
}

.auth-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, #9067FF 100%);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(208, 188, 255, 0.3);
}

.auth-logo .material-symbols-rounded {
    font-size: 40px;
    color: var(--md-sys-color-on-primary);
    opacity: 1 !important; /* Force visible */
}

.auth-box h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #FFFFFF;
}

.auth-box p {
    font-size: 15px;
    color: var(--panel-icon);
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 32px;
}

#telegram-login-container {
    display: flex;
    justify-content: center;
    min-height: 40px;
}

/* Elegant Font Loading Fix */
.material-symbols-rounded {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.fonts-loaded .material-symbols-rounded {
    opacity: 1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--md-sys-color-background-end);
    color: var(--md-sys-color-on-background);
    font-family: var(--md-sys-typescale-font-family);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

/* Application Container */
.app-container {
    width: 100%;
    /* Removed max-width to allow full-screen layout on PC */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    background: linear-gradient(180deg, var(--md-sys-color-background-start) 0%, var(--md-sys-color-background-end) 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.app-header {
    padding: clamp(16px, 4vw, 24px) 20px 16px;
    flex-shrink: 0;
    z-index: 10;
}

.app-header h1 {
    font-size: clamp(24px, 6vw, 28px);
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.3s var(--slide-timing);
}

/* Views Area */
.views {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Mobile: Horizontal sliding animation */
@media (max-width: 767px) {
    .view-wrapper {
        display: flex;
        width: 500%;
        /* Total 5 views: Tariffs, Connection, Settings, Profile, History */
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .view {
        flex: 0 0 20%;
        /* Each view takes 100% of the screen width */
        width: 100%;
        height: 100%;
        padding: 0 20px calc(var(--nav-height) + 40px);
        opacity: 0;
        transition: opacity 0.4s ease;
        visibility: visible;
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: none;
    }

    .view.active {
        opacity: 1;
        pointer-events: all;
    }
}

/* Desktop: Classic vertical fade animation */
@media (min-width: 768px) {
    .view-wrapper {
        display: block;
        width: 100%;
        height: 100%;
        transform: none !important;
    }

    .view {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 24px 40px;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        visibility: hidden;
        overflow-y: auto;
    }

    .view.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
        visibility: visible;
        position: relative;
    }
}

/* Wrapper for views (to constrain width on PC) */
.view-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Bounce Animation Utility */
.bounce {
    transition: transform 0.4s var(--bounce-timing), background-color 0.3s ease, box-shadow 0.4s var(--bounce-timing);
    cursor: pointer;
}

.bounce:active {
    transform: scale(0.9);
}

.extend-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.extend-option:active {
    background: rgba(255, 255, 255, 0.1);
}

.extend-option .ext-months {
    font-size: 14px;
    font-weight: 500;
    color: #E6E1E5;
}

.extend-option .ext-price {
    font-size: 13px;
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Tariffs View */
#view-tariffs {
    padding: 0 20px calc(var(--nav-height) + 40px);
}

.card-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 20px calc(var(--nav-height) + 40px);
    height: 100%;
    scrollbar-width: none;
}

.card-list::-webkit-scrollbar {
    display: none;
}

.tariff-card {
    background-color: #252429;
    /* Muted dark grey-purple */
    color: var(--panel-icon);
    border-radius: 28px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.tariff-card.highlight {
    background-color: #2D2B33;
    /* Slightly lighter muted variant */
    border: 1px solid rgba(208, 188, 255, 0.1);
}

.tariff-card .card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.tariff-card .card-header .icon {
    font-size: 24px;
    color: var(--md-sys-color-primary);
    background: rgba(208, 188, 255, 0.05);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    opacity: 0.8;
}

.tariff-card h3 {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    opacity: 0.9;
}

.tariff-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tariff-card .description {
    font-size: 14px;
    color: var(--card-text-variant);
    line-height: 1.5;
    margin-bottom: 8px;
}

.tariff-card .features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tariff-card .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--card-text-variant);
}

.tariff-card .feature span.material-symbols-rounded {
    font-size: 18px;
    color: var(--md-sys-color-primary);
}

.tariff-card .card-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tariff-card .price {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.buy-btn {
    background-color: rgba(208, 188, 255, 0.1);
    color: var(--md-sys-color-primary);
    border: 1px solid rgba(208, 188, 255, 0.2);
    border-radius: 16px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
}

.tariff-card .badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(208, 188, 255, 0.15);
    color: var(--md-sys-color-primary);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Connection View */
.subscription-info {
    width: 100%;
    background-color: var(--panel-bg);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-item .label {
    color: var(--panel-icon);
    opacity: 0.7;
    font-size: 14px;
}

.info-item .value {
    font-weight: 500;
}

.server-selector {
    width: 100%;
    background-color: var(--panel-bg);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.server-info .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-size: 28px;
}

.server-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-name {
    font-weight: 500;
    font-size: 16px;
}

.server-ping {
    font-size: 12px;
    color: var(--panel-icon);
    opacity: 0.7;
}

.server-icon-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-img {
    width: 28px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
}

/* Settings View — MD3 redesign */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.settings-section-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
    opacity: 0.85;
}

.settings-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--panel-icon);
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    padding: 3px 10px 3px 6px;
}

.settings-block {
    background-color: var(--panel-bg);
    border-radius: 20px;
    overflow: hidden;
}

.settings-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 16px;
}

/* Device row */
.device-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.device-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(208, 188, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.device-row-icon .material-symbols-rounded {
    font-size: 22px;
    color: var(--md-sys-color-primary);
}

.device-row-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.device-row-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--panel-icon);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-row-meta {
    font-size: 12px;
    color: var(--panel-icon);
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-delete-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(239, 83, 80, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #EF5350;
}

.device-delete-btn .material-symbols-rounded {
    font-size: 20px;
}

.device-delete-btn:hover {
    background: rgba(239, 83, 80, 0.18);
}

/* Empty state */
.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--panel-icon);
    opacity: 0.35;
    font-size: 14px;
}

.settings-empty .material-symbols-rounded {
    font-size: 36px;
}

/* Slot purchase row */
.slot-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.slot-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(208, 188, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slot-info-icon .material-symbols-rounded {
    font-size: 22px;
    color: var(--md-sys-color-primary);
}

.slot-info-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slot-info-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--panel-icon);
}

.slot-info-sub {
    font-size: 12px;
    color: var(--panel-icon);
    opacity: 0.45;
}

.slot-buy-btn {
    background: rgba(208, 188, 255, 0.12);
    color: var(--md-sys-color-primary);
    border: 1px solid rgba(208, 188, 255, 0.2);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.slot-buy-btn:hover {
    background: rgba(208, 188, 255, 0.18);
}

/* Legacy classes kept for other views */
.settings-card {
    background-color: var(--panel-bg);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.section {
    margin-bottom: 0;
}

.section h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    margin-bottom: 16px;
}

.device-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.device-item {
    background-color: transparent;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.device-item .material-symbols-rounded:not(.action-icon) {
    color: var(--panel-icon);
    opacity: 0.7;
    font-size: 24px;
}

.device-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.device-name {
    font-size: 16px;
    font-weight: 500;
}

.device-hwid {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.action-icon {
    color: var(--md-sys-color-error);
    cursor: pointer;
    transition: opacity 0.2s;
}

.action-icon:active {
    opacity: 0.5;
}


.action-btn {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Profile View */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar .material-symbols-rounded {
    font-size: 32px;
}

.user-info h2 {
    font-size: 24px;
    font-weight: 500;
}

.user-info .userid {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}

.balance-card {
    background-color: var(--md-sys-color-surface);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.balance-card .label {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}

.balance-card .amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.topup-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 100px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 8px;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-item {
    background-color: var(--md-sys-color-surface);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-item.admin-btn-item {
    background: linear-gradient(90deg, rgba(255, 159, 10, 0.08) 0%, rgba(255, 159, 10, 0.02) 100%);
    border: 1px solid rgba(255, 159, 10, 0.15);
    margin-bottom: 12px;
}

.settings-item.admin-btn-item:active {
    background: rgba(255, 159, 10, 0.12);
}

.settings-item span:not(.material-symbols-rounded) {
    flex-grow: 1;
    font-size: 16px;
}

.settings-item .arrow {
    color: var(--md-sys-color-on-surface-variant);
}

/* Bottom Navigation (Mobile default) */
.bottom-nav {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 20px;
    right: 20px;
    height: var(--nav-height);
    display: flex;
    gap: 12px;
    z-index: 100;
}

.nav-pill {
    flex-grow: 1;
    background-color: var(--panel-bg);
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.nav-profile {
    width: var(--nav-height);
    height: var(--nav-height);
    background-color: var(--panel-bg);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.nav-profile.active-bg {
    background-color: var(--panel-active-right);
}

.nav-item {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--panel-icon);
    opacity: 0.7;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease, transform 0.4s var(--bounce-timing);
}

.nav-profile .nav-item {
    width: 100%;
    border-radius: 16px;
}

.nav-item:hover {
    opacity: 0.9;
}

.nav-item:active {
    transform: scale(0.85);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item.active {
    color: var(--panel-icon-active);
    opacity: 1;
}

.nav-indicator {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    background-color: var(--panel-pill-indicator);
    border-radius: 100px;
    z-index: 1;
    transition: transform 0.5s var(--bounce-timing), top 0.5s var(--bounce-timing), width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* Media Queries */
@media (max-width: 360px) {
    :root {
        --nav-height: 64px;
    }

    .nav-profile {
        border-radius: 20px;
    }

    .bottom-nav {
        gap: 8px;
        left: 16px;
        right: 16px;
    }

    .tariff-card {
        padding: 20px;
    }
}

/* Desktop Adaptation (Material Design 3 PC) */
@media (min-width: 768px) {
    .app-header {
        padding: 32px 40px 16px;
    }

    .app-header h1 {
        font-size: 32px;
    }

    /* Center view content and limit width for better readability */
    .view-content-wrapper {
        max-width: 800px;
        margin: 0 auto;
        padding-top: 16px;
    }

    /* Transform Bottom Nav into a Side Navigation Rail */
    .bottom-nav {
        flex-direction: column;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: 100px;
        height: 100vh;
        padding: 32px 16px;
        gap: 16px;
        background-color: var(--md-sys-color-background-start);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4);
    }

    .nav-pill {
        flex-direction: column;
        flex-grow: 0;
        height: auto;
        gap: 16px;
        padding: 16px 8px;
        border-radius: 100px;
    }

    .nav-item {
        width: 100%;
        height: 64px;
        flex: none;
    }

    .nav-indicator {
        left: 8px;
        right: 8px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 64px;
    }

    .nav-profile {
        width: 100%;
        height: 68px;
        margin-top: auto;
    }

    /* Adjust views to account for side navigation */
    .views {
        margin-left: 100px;
    }

    .app-header {
        margin-left: 100px;
    }

    /* Layout cards beautifully on PC */
    .card-list {
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        gap: 24px;
        padding: 24px 40px calc(var(--nav-height) + 40px);
        overflow-x: hidden;
        height: auto;
        min-height: 100%;
    }

    .tariff-card {
        flex: 0 1 380px;
        min-height: 320px;
        scroll-snap-align: none;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-box {
    background-color: var(--panel-bg);
    width: 100%;
    max-width: 320px;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transform: scale(0.8);
    transition: transform 0.4s var(--bounce-timing);
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.modal-icon {
    width: 64px;
    height: 64px;
    background-color: rgba(208, 188, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-icon span {
    font-size: 32px;
    color: var(--md-sys-color-primary);
}

.modal-box h3 {
    font-size: 20px;
    font-weight: 700;
}

.modal-box p {
    font-size: 14px;
    color: var(--panel-icon);
    opacity: 0.8;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.modal-btn {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.modal-btn.primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.modal-btn.secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--panel-icon);
}

.modal-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: #FFFFFF;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    text-align: center;
    transition: border-color 0.3s ease;
}

.modal-input:focus {
    border-color: var(--md-sys-color-primary);
}

/* Active Subscription Banner */
.active-subscription-card {
    background: linear-gradient(135deg, rgba(208, 188, 255, 0.15) 0%, rgba(208, 188, 255, 0.05) 100%);
    border: 1px solid rgba(208, 188, 255, 0.2);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 24px rgba(208, 188, 255, 0.1);
}

.sub-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sub-icon {
    width: 48px;
    height: 48px;
    background-color: var(--md-sys-color-primary);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-icon span {
    color: var(--md-sys-color-on-primary);
    font-size: 28px;
}

.sub-info {
    display: flex;
    flex-direction: column;
}

.sub-label {
    font-size: 12px;
    color: var(--panel-icon);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sub-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
}

.sub-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
}

.sub-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
}

.sub-stat span.material-symbols-rounded {
    font-size: 18px;
}

/* Section Title */
.section-title {
    margin-top: 8px;
    margin-bottom: 16px;
}

.section-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    opacity: 0.9;
}

/* Vertical Tariff Cards */
.card-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}

.tariff-card-v2 {
    position: relative;
    border-radius: 24px;
    padding: 2px;
    /* For gradient border effect */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    overflow: hidden;
    display: flex;
}

.tariff-card-v2.highlight {
    background: linear-gradient(135deg, rgba(208, 188, 255, 0.4) 0%, rgba(208, 188, 255, 0.1) 100%);
}

.v2-card-bg {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: #222126;
    border-radius: 23px;
    z-index: 0;
}

.tariff-card-v2.highlight .v2-card-bg {
    background-color: #26242D;
}

.v2-card-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.v2-badge {
    position: absolute;
    top: 0;
    right: 24px;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 4px 12px;
    border-radius: 0 0 12px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.v2-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.tariff-card-v2.highlight .v2-icon-wrapper {
    background: rgba(208, 188, 255, 0.15);
}

.v2-icon-wrapper span {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.tariff-card-v2.highlight .v2-icon-wrapper span {
    color: var(--md-sys-color-primary);
}

.v2-title {
    display: flex;
    flex-direction: column;
}

.v2-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
}

.v2-desc {
    font-size: 13px;
    color: var(--card-text-variant);
    margin-top: 2px;
}

.v2-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #E6E1E5;
}

.v2-feature span.material-symbols-rounded {
    font-size: 16px;
    color: var(--md-sys-color-primary);
}

.v2-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.v2-price {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.v2-buy-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 100px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background-color: var(--panel-bg);
    border-radius: 24px;
    opacity: 0.8;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--panel-icon);
}

/* Loading Overlay and Success Animation */
.fullscreen-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.fullscreen-loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.spinner-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    position: absolute;
    width: 64px;
    height: 64px;
    border: 4px solid rgba(208, 188, 255, 0.2);
    border-top: 4px solid var(--md-sys-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 24px;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.success-icon-wrapper {
    position: absolute;
    display: none;
    width: 80px;
    height: 80px;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-icon-wrapper span {
    font-size: 40px;
    color: var(--md-sys-color-on-primary);
    line-height: 1;
    display: block;
}

/* Pending Payment Banner */
.pending-payment-banner {
    flex-shrink: 0;
    padding: 10px 20px;
    margin: 8px 20px 0;
    background: var(--panel-bg);
    border: 1px solid rgba(208, 188, 255, 0.12);
    border-radius: 16px;
    animation: slideDown 0.4s var(--slide-timing);
}

.pending-payment-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.pending-payment-icon {
    font-size: 22px;
    color: var(--md-sys-color-primary);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pending-payment-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pending-payment-title {
    font-size: 14px;
    font-weight: 500;
    color: #E6E1E5;
}

.pending-payment-subtitle {
    font-size: 12px;
    color: var(--panel-icon);
    opacity: 0.5;
}

.pending-payment-close {
    font-size: 20px;
    color: var(--panel-icon);
    opacity: 0.4;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: opacity 0.2s, background 0.2s;
}

.pending-payment-close:hover {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.06);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fullscreen-loading-overlay.success .spinner {
    display: none;
}

.fullscreen-loading-overlay.success .success-icon-wrapper {
    display: flex;
}

/* Toggle Switch UI */
.switch-ui {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}

.switch-ui input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-ui .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 24px;
}

.switch-ui .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #FFF;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-ui input:checked + .slider {
    background-color: var(--md-sys-color-primary);
}

.switch-ui input:checked + .slider:before {
    transform: translateX(20px);
}

/* Instruction Carousel Modal */
.instruction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.instruction-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

.instruction-overlay.active .instruction-modal {
    transform: scale(1) !important;
}

.instruction-modal {
    background: var(--panel-bg);
    border-radius: 28px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.instruction-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.instruction-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.instruction-close {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 4px;
}

.instruction-close:active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    flex: 1;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s var(--slide-timing);
    width: 400%;
    /* 4 slides */
}

.carousel-slide {
    width: 25%;
    /* 1/4 of track */
    flex-shrink: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.slide-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.slide-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(208, 188, 255, 0.1);
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.slide-icon .material-symbols-rounded {
    font-size: 32px;
}

.slide-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.slide-content p {
    font-size: 14px;
    color: var(--panel-icon);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

.platform-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.platform-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    text-decoration: none;
    color: var(--md-sys-color-on-background);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-btn.recommended {
    border: 2px solid var(--md-sys-color-primary);
    background: rgba(208, 188, 255, 0.15);
}

.platform-btn.recommended::after {
    content: "Рекомендуется";
    font-size: 10px;
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.instruction-images {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    overflow-x: auto;
    padding: 0 5%;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.instruction-images::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.instruction-images::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 0 10%;
}

.instruction-images::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.instruction-images::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.instruction-images img {
    flex: 0 0 90%;
    height: auto;
    max-height: 40vh;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    scroll-snap-align: center;
    pointer-events: none; /* prevent native image drag interference */
}

.instruction-images.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}

.gallery-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s, width 0.3s;
}

.gallery-dots .dot.active {
    background: var(--md-sys-color-primary);
    width: 14px;
    border-radius: 3px;
}

.carousel-footer {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: var(--panel-bg);
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s, width 0.3s;
}

.carousel-dots .dot.active {
    background: var(--md-sys-color-primary);
    width: 20px;
    border-radius: 4px;
}

.carousel-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.carousel-btn {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s, opacity 0.2s;
}

.carousel-btn:active {
    background: rgba(208, 188, 255, 0.1);
}

.carousel-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.carousel-btn.next-btn {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 10px 20px;
}

.carousel-btn.next-btn:active {
    opacity: 0.8;
}