@import url('../fonts/fonts.css');

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
    --bg-primary: #06080f;
    --bg-secondary: #0c1020;
    --bg-card: rgba(14, 18, 36, 0.75);
    --bg-card-hover: rgba(20, 26, 50, 0.85);

    --text-primary: #eaecf5;
    --text-secondary: #a0a4be;
    --text-muted: #7a7f9e;

    --accent-cyan: #00d4ff;
    --accent-purple: #a855f7;
    --accent-blue: #3b82f6;
    /* --accent-pink: #ec4899; — reserved for future use */

    --glass-bg: rgba(12, 16, 32, 0.65);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4),
                   0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.15),
                        0 0 60px rgba(0, 212, 255, 0.05);

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════
   BASE & RESET
   ═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', 'Exo 2', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Background gradient + grid (fixed via pseudo to avoid Telegram issues) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.06), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(168, 85, 247, 0.04), transparent),
        linear-gradient(rgba(0, 212, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.015) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}


/* ═══════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════ */
.font-cyber {
    font-family: 'Orbitron', sans-serif;
}

.font-exo {
    font-family: 'Exo 2', sans-serif;
}

/* ═══════════════════════════════════════════
   HEADER — fixed, always visible
   ═══════════════════════════════════════════ */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(6, 8, 15, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
    .app-header {
        background: rgba(6, 8, 15, 0.75);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
    }
}



/* Back button in header (for browser mode) */
.header-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.header-back-btn:active {
    transform: scale(0.9);
    background: rgba(0, 212, 255, 0.12);
}




/* Logo */
.header-logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.header-logo-text {
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.header-action-btn {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.header-action-btn:hover {
    color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.1);
}

.header-action-btn:active {
    transform: scale(0.95);
    background: rgba(0, 212, 255, 0.12);
}




.support-btn {
    color: var(--accent-blue);
}

.profile-btn {
    color: var(--accent-purple);
}

/* Wide variant: icon + text label — stable at any screen width */
.profile-btn-wide {
    width: 148px;
    padding: 0 10px;
    gap: 6px;
    justify-content: center;
    overflow: visible;
}

/* Icon must never disappear */
.profile-btn-wide svg {
    flex-shrink: 0;
}

/* Text always shows in full */
.profile-btn-wide span {
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Help button icon text */
.help-btn span {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* On very small screens: collapse to icon-only */
@media (max-width: 360px) {
    .profile-btn-wide {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
    .profile-btn-wide span {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════ */
.app-main-content {
    padding-top: 64px;
}

/* ═══════════════════════════════════════════
   PRODUCT CARDS — CATALOG
   ═══════════════════════════════════════════ */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-card);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.03), transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.product-card:active {
    transform: scale(0.97);
}

.product-card:hover,
.product-card:active {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-card), 0 0 30px rgba(0, 212, 255, 0.06);
}

.product-card:hover::before,
.product-card:active::before {
    opacity: 1;
}

/* Accent stripe on left */
.product-card .accent-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

/* Icon container */
.product-icon-wrap {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    background: #000;
    border: 1px solid var(--icon-border-color, rgba(255, 255, 255, 0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    transition: all var(--transition-smooth);
    box-shadow: 0 0 10px var(--icon-glow-color, transparent),
                inset 0 0 12px rgba(0, 0, 0, 0.6);
}



.product-icon-img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    border-radius: 8px;
}

/* Product info */
.product-info {
    flex: 1;
    min-width: 0;
    margin-left: 14px;
}

.product-text-block {
    margin-bottom: 4px;
}

.product-price-block {
}

.product-name {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-bottom: 1px;
}

.name-line {
    display: block;
    white-space: nowrap;
}

.product-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.product-price {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 13px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.05em;
}

.card-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.product-card:active .card-arrow {
    transform: translateX(3px);
}

/* ═══════════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════════ */
.detail-container {
    max-width: 800px;
    margin: 0 auto;
}

.detail-hero {
    position: relative;
    padding: 40px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, var(--hero-glow, rgba(0, 212, 255, 0.08)), transparent 70%);
    pointer-events: none;
}

.detail-icon-wrap {
    width: 140px;
    height: 140px;
    border-radius: 30px;
    background: #000;
    border: 1px solid var(--icon-border-color, rgba(255, 255, 255, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 18px var(--icon-glow-color, transparent),
                0 0 40px var(--icon-glow-color-soft, transparent),
                inset 0 0 16px rgba(0, 0, 0, 0.7);
}



.product-icon-detail-img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    border-radius: 12px;
}

.detail-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.detail-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.detail-price {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 16px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

/* ═══════════════ DESCRIPTION TEXT ═══════════════ */
.detail-description {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 0 16px;
    margin-top: -12px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-card);
}

.detail-description-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.detail-description-text {
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    white-space: pre-line;
}

/* ═══════════════════════════════════════════
   LEFT COLUMN WRAPPER (detail page)
   Mobile: transparent (display:contents),
   Desktop: becomes a real grid-column item (see @media 1024px)
   ═══════════════════════════════════════════ */
.detail-left-col {
    display: contents;
}

/* ── Mobile order: description after hero, warnings/buy after description ── */
.detail-container > .detail-description {
    order: 2;
}
.detail-hero {
    order: 1;
}
.detail-info-card {
    order: 3;
}
.active-sub-warning {
    order: 4;
}
.expiring-notice {
    order: 4;
}
.flex-spacer {
    order: 5;
}
.buy-btn-container {
    order: 6;
}

/* ═══════════════════════════════════════════
   BUY BUTTON (for browser mode)
   ═══════════════════════════════════════════ */
.buy-btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(to top, var(--tg-theme-bg-color, var(--bg-primary)) 60%, transparent);
    z-index: 90;
}

.buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3),
                0 0 40px rgba(168, 85, 247, 0.1);
    transition: all var(--transition-fast);
}

.buy-btn:active {
    transform: scale(0.97);
}

.buy-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.buy-btn:hover::after {
    transform: translateX(100%);
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.3);
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════ */

/* Skip-to-content link — visible only on keyboard focus */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 12px 24px;
    background: var(--accent-cyan);
    color: var(--bg-primary);
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 12px;
    outline: none;
}

/* Focus-visible ring — cyberpunk neon glow */
*:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove default outline for mouse clicks */
*:focus:not(:focus-visible) {
    outline: none;
}

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

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

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

.slide-up {
    animation: slideUp 0.45s ease-out both;
}

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

@keyframes neon-scroll {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

@keyframes neon-scroll-reverse {
    0% { background-position: -200% 0; }
    100% { background-position: 0% 0; }
}

/* ═══════════════════════════════════════════
   EDGE NEON LINES (TOP & BOTTOM)
   ═══════════════════════════════════════════ */
.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--accent-cyan) 0%, 
        var(--bg-primary) 20%, 
        var(--accent-purple) 40%, 
        var(--bg-primary) 60%, 
        var(--accent-blue) 80%, 
        var(--accent-cyan) 100%
    );
    background-size: 200% 100%;
    animation: neon-scroll 3s linear infinite;
    box-shadow: 0 1px 12px rgba(0, 212, 255, 0.4), 0 1px 24px rgba(168, 85, 247, 0.3);
    z-index: 101;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--accent-purple) 0%, 
        var(--bg-primary) 20%, 
        var(--accent-blue) 40%, 
        var(--bg-primary) 60%, 
        var(--accent-cyan) 80%, 
        var(--accent-purple) 100%
    );
    background-size: 200% 100%;
    animation: neon-scroll-reverse 4s linear infinite;
    box-shadow: 0 -1px 12px rgba(168, 85, 247, 0.4), 0 -1px 24px rgba(0, 212, 255, 0.3);
    z-index: 9999;
    pointer-events: none;
}

.card-enter {
    animation: cardEnter 0.35s ease-out both;
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.slide-in-right { animation: slideInRight 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.slide-in-left { animation: slideInLeft 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ═══════════════════════════════════════════
   SEARCH & FILTERS
   ═══════════════════════════════════════════ */
.catalog-header-wrap {
    padding: 16px 16px 0;
    margin-bottom: 2px;
}

/* 1. Chips Row with Search Button */
.category-chips-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
}

.cat-chip-search {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cat-chip-search:hover {
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent-cyan);
    border-color: rgba(0, 212, 255, 0.3);
}

.cat-chip-search:active {
    transform: scale(0.92);
}

.cat-chip-search.active {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-cyan);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.chips-scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* allows child to shrink and scroll */
}

.scroll-arrow {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 48px;
    z-index: 10;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.scroll-arrow:hover {
    color: #fff;
}

.scroll-arrow:active {
    transform: scale(0.9);
}

.scroll-arrow.arrow-left {
    left: -8px;
    justify-content: flex-start;
    padding-left: 12px;
    background: linear-gradient(to right, var(--bg-primary) 40%, rgba(6, 8, 15, 0.8) 60%, transparent);
}

.scroll-arrow.arrow-right {
    right: -8px;
    justify-content: flex-end;
    padding-right: 12px;
    background: linear-gradient(to left, var(--bg-primary) 40%, rgba(6, 8, 15, 0.8) 60%, transparent);
}

.category-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 6px;
    pointer-events: auto;
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch;
    flex: 1;
    align-items: center;
}

.category-chips::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.chip-emoji {
    display: none;
}

.cat-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.cat-chip.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(168, 85, 247, 0.15));
    border-color: rgba(0, 212, 255, 0.3);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 212, 255, 0.2);
}

.cat-chip:active {
    transform: scale(0.95);
}

/* 2. Search overlay (covers entire chips row including search button) */
.search-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    align-items: center;
    background: var(--bg-primary);
    z-index: 15;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.search-overlay-open {
    opacity: 1;
    transform: translateX(0);
}

.search-overlay .search-bar {
    width: 100%;
}

/* 2b. Search Bar Row (legacy, kept for compat) */
.search-bar-row {
    width: 100%;
    animation: fadeIn 0.2s ease-out;
}

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
}

#catalog-search {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius-sm);
    padding: 12px 42px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    outline: none;
    transition: all var(--transition-fast);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.15);
    -webkit-appearance: none;
}

#catalog-search::placeholder {
    color: var(--text-muted);
}

.search-close-btn {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast);
    border-radius: 50%;
}

.search-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.search-close-btn:active {
    transform: scale(0.9);
}

/* ═══════════════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}



/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 380px) {
    .product-icon-wrap {
        width: 80px;
        height: 80px;
    }
    .product-name {
        font-size: 14px;
    }
    .product-price {
        font-size: 12px;
    }
    .detail-title {
        font-size: 20px;
    }
    .detail-description {
        padding: 16px;
        margin: 0 12px;
    }
    .detail-description-text {
        font-size: 13.5px;
    }
}

/* ═══════════════════════════════════════════
   DISCOUNT PRICE
   ═══════════════════════════════════════════ */

/* --- Card variant --- */
.product-price-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

/* --- Detail variant --- */
.detail-price-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Old (struck-through) price */
.price-old {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.04em;
}

.detail-price-wrap .price-old {
    font-size: 14px;
}

/* New (discounted) price */
.price-new {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-cyan);
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
    letter-spacing: 0.05em;
}

.detail-price-wrap .price-new {
    font-size: 16px;
    color: var(--accent-cyan);
    text-shadow: 0 0 16px rgba(0, 212, 255, 0.4);
}

/* Red discount badge */
.price-discount-badge {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.detail-price-wrap .price-discount-badge {
    font-size: 13px;
    padding: 3px 9px;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════
   VERSION BADGE
   ═══════════════════════════════════════════ */
.version-badge {
    position: fixed;
    bottom: 8px;
    right: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 0.05em;
    z-index: 999;
    pointer-events: none;
    user-select: none;
}

/* ═══════════════════════════════════════════
   PROFILE (PERSONAL CABINET)
   ═══════════════════════════════════════════ */
.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 24px;
    position: relative;
    overflow: hidden;
}

.profile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(168, 85, 247, 0.08), transparent 70%);
    pointer-events: none;
}

.profile-avatar-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(168, 85, 247, 0.3);
    padding: 4px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}


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

.profile-name {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.profile-username {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--accent-purple);
    position: relative;
    z-index: 1;
}

/* Subscription Cards */
.subs-section {
    padding: 0 16px 40px;
}

.subs-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    padding-left: 4px;
}

.sub-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(20, 26, 50, 0.4));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--shadow-card);
}


.sub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent-cyan);
    border-radius: 2px 0 0 2px;
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sub-name {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.sub-status-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.sub-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
}

.sub-days-left {
    font-weight: 600;
    color: var(--accent-cyan);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   HELP BUTTON + MODAL
   ═══════════════════════════════════════════ */
.help-btn { color: var(--accent-cyan); }

.help-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: overlayIn 0.2s ease-out;
}
@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.help-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: rgba(12, 16, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    padding: 28px 24px calc(36px + env(safe-area-inset-bottom, 0));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: modalUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -8px 60px rgba(0, 0, 0, 0.6),
                0 0 60px rgba(0, 212, 255, 0.04);
}
@keyframes modalUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.help-modal-icon  { font-size: 38px; margin-bottom: 4px; }
.help-modal-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary);
}
.help-modal-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    text-align: center;
    max-width: 300px;
}
.help-modal-admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 20px;
    margin-top: 8px;
    border: none;
    border-radius: 14px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25);
    transition: all var(--transition-fast);
}
.help-modal-admin-btn:active { transform: scale(0.97); }
.help-modal-close-btn {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: color var(--transition-fast);
}
.help-modal-close-btn:hover { color: var(--text-secondary); }

/* ═══════════════════════════════════════════
   PAYMENT METHOD BOTTOMSHEET
   ═══════════════════════════════════════════ */
.payment-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    transition: background 0.3s ease;
}

.payment-sheet-overlay.visible {
    background: rgba(0, 0, 0, 0.6);
}

.payment-sheet {
    width: 100%;
    background: #0d1120;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px 24px 0 0;
    padding: 12px 16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
}

.payment-sheet.visible {
    transform: translateY(0);
}

.payment-sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin: 0 auto 18px;
}

.payment-sheet-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 4px;
}

.payment-sheet-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
}

.payment-sheet-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.payment-method-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.payment-method-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
}

.pm-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pm-icon-atol {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.pm-icon-stars {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.pm-icon-crypto {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.pm-icon-rub {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.pm-icon-other {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

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

.pm-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.pm-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-arrow {
    font-size: 22px;
    color: var(--text-muted);
    line-height: 1;
    flex-shrink: 0;
}

.payment-sheet-cancel {
    display: block;
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
    transition: color 0.18s ease;
}

.payment-sheet-cancel:active {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════
   VARIANT PICKER
   ═══════════════════════════════════════════ */

.variant-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 4px;
}

.variant-btn {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--bg-card);
    border: 1.5px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 8px;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    line-height: 1.3;
}

.variant-btn.selected {
    background: rgba(6, 182, 212, 0.12);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.variant-btn:active {
    transform: scale(0.97);
}

.variant-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

.variant-btn.selected .variant-price {
    color: var(--accent-cyan);
}

.variant-upsell {
    margin: 10px 20px 2px;
    padding: 10px 14px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px dashed rgba(139, 92, 246, 0.4);
    border-radius: 10px;
    color: #a78bfa;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s;
}

.variant-upsell:hover {
    background: rgba(139, 92, 246, 0.14);
}

/* ═══════════════════════════════════════════
   SHEET ANIMATIONS — slide-in from bottom + subtle fade
   ═══════════════════════════════════════════ */

.payment-sheet-overlay {
    opacity: 0;
    transition: opacity 0.28s ease;
}
.payment-sheet-overlay.visible {
    opacity: 1;
}

.payment-sheet {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s ease;
    will-change: transform, opacity;
}
.payment-sheet.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Slide-in from right for step 2 (payment methods after variant pick) */
.payment-sheet.slide-from-right {
    transform: translateX(48px) translateY(0);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}
.payment-sheet.slide-from-right.visible {
    transform: translateX(0) translateY(0);
    opacity: 1;
}

/* Payment method rows — staggered fade-in */
.payment-sheet-methods .payment-method-btn,
.payment-sheet-methods a.payment-method-btn {
    animation: pmRowIn 0.28s ease both;
}
.payment-sheet-methods .payment-method-btn:nth-child(1) { animation-delay: 0.04s; }
.payment-sheet-methods .payment-method-btn:nth-child(2) { animation-delay: 0.08s; }
.payment-sheet-methods .payment-method-btn:nth-child(3) { animation-delay: 0.12s; }
.payment-sheet-methods .payment-method-btn:nth-child(4) { animation-delay: 0.16s; }

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

/* ═══════════════════════════════════════════
   PRICE BLOCK — 2-line layout
   ═══════════════════════════════════════════ */

.price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    line-height: 1.2;
}

.price-main {
    font-family: 'Exo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: -0.3px;
    text-shadow: 0 0 14px rgba(0, 212, 255, 0.4);
}

.price-alt {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.1px;
}

.price-old-sm {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

/* ═══════════════════════════════════════════
   DESKTOP RESPONSIVE — PHASE 1-5
   ═══════════════════════════════════════════ */

/* ── Desktop container helper ── */
.desktop-container {
    width: 100%;
    margin: 0 auto;
}

/* ── Catalog grid — mobile defaults (overridden by media queries) ── */
.catalog-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 100px;
}

/* ── Skeleton grid — mobile defaults (overridden by media queries) ── */
.skeleton-grid {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══════ TABLET+ : ≥768px ═══════ */
@media (min-width: 768px) {

    /* ── Header ── */
    .app-header {
        padding: 14px 32px;
    }
    .header-logo-text {
        font-size: 24px;
    }
    .header-action-btn {
        height: 40px;
        border-radius: 12px;
    }
    .header-action-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .header-back-btn:hover {
        background: rgba(0, 212, 255, 0.15);
        border-color: rgba(0, 212, 255, 0.3);
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.1);
    }
    .profile-btn-wide {
        width: auto;
        padding: 0 16px;
        gap: 8px;
        border-radius: 12px;
        height: 40px;
    }

    /* ── Main container ── */
    .app-main-content {
        max-width: 960px;
        margin: 0 auto;
        padding-top: 72px;
    }

    /* ── Catalog grid (2 col) ── */
    .catalog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 24px 24px 100px;
    }

    /* ── Product card — vertical style on grid ── */
    .catalog-grid .product-card {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 0;
        min-height: 220px;
        justify-content: center;
    }
    .catalog-grid .card-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .catalog-grid .product-icon-wrap {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
    }
    .catalog-grid .product-info {
        margin-left: 0;
        text-align: center;
    }
    .catalog-grid .product-name {
        font-size: 17px;
        justify-content: center;
    }
    .catalog-grid .name-line {
        white-space: normal;
    }
    .catalog-grid .product-subtitle {
        font-size: 13px;
    }
    .catalog-grid .product-price-block {
        display: flex;
        justify-content: center;
    }
    .catalog-grid .product-price-block .price-block {
        justify-content: center;
    }
    .catalog-grid .price-main {
        font-size: 18px;
    }
    .catalog-grid .price-alt {
        font-size: 12px;
    }
    .catalog-grid .card-arrow {
        display: none;
    }
    .catalog-grid .accent-stripe {
        width: 100%;
        height: 3px;
        bottom: auto;
        top: 0;
        left: 0;
        right: 0;
        border-radius: 2px 2px 0 0;
    }

    /* ── Desktop hover for cards ── */
    .product-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: var(--shadow-card),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 40px rgba(0, 212, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }
    .product-card:active {
        transform: translateY(-2px) scale(1.0);
    }

    /* ── Detail page ── */
    .detail-container {
        max-width: 800px;
        margin: 0 auto;
        padding-bottom: 120px;
    }
    .detail-hero {
        padding: 48px 32px 36px;
    }
    .detail-icon-wrap {
        width: 160px;
        height: 160px;
        border-radius: 34px;
    }
    .detail-title {
        font-size: 28px;
    }
    .detail-description {
        margin: 0 24px;
        margin-top: -12px;
        padding: 24px;
    }
    .detail-description-text {
        font-size: 15px;
    }

    /* ── Buy button constrained ── */
    .buy-btn-container {
        max-width: 480px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .buy-btn:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 28px rgba(59, 130, 246, 0.4),
                    0 0 50px rgba(168, 85, 247, 0.15);
    }

    /* ── Profile ── */
    .profile-container {
        max-width: 700px;
        margin: 0 auto;
    }
    .profile-hero {
        padding: 40px 24px 28px;
    }
    .profile-avatar-wrap {
        width: 100px;
        height: 100px;
    }
    .profile-name {
        font-size: 24px;
    }

    /* ── Subscription cards ── */
    .subs-section {
        padding: 0 24px 40px;
    }

    /* ── Help modal — centered on desktop ── */
    .help-modal-overlay {
        align-items: center;
    }
    .help-modal {
        border-radius: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-width: 440px;
        padding: 32px 28px;
        animation: modalScale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes modalScale {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .help-modal-admin-btn:hover {
        box-shadow: 0 6px 28px rgba(0, 212, 255, 0.35);
        transform: translateY(-1px);
    }

    /* ── Payment sheet — centered modal on desktop ── */
    .payment-sheet-overlay {
        align-items: center;
        justify-content: center;
    }
    .payment-sheet {
        width: auto;
        min-width: 400px;
        max-width: 480px;
        border-radius: 24px;
        border-top: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin: 24px;
        transform: scale(0.9);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    }
    .payment-sheet.visible {
        transform: scale(1);
        opacity: 1;
    }
    .payment-sheet.slide-from-right {
        transform: scale(0.95) translateX(20px);
    }
    .payment-sheet.slide-from-right.visible {
        transform: scale(1) translateX(0);
    }
    .payment-method-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
        transform: translateX(4px);
    }

    /* ── Variant picker on desktop ── */
    .variant-picker {
        padding: 14px 24px 4px;
    }
    .variant-btn:hover {
        border-color: rgba(0, 212, 255, 0.3);
        background: rgba(0, 212, 255, 0.06);
    }

    /* ── Skeleton ── */
    .skeleton-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* ── Background grid larger ── */
    body::before {
        background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    }
}

/* ═══════ DESKTOP : ≥1024px ═══════ */
@media (min-width: 1024px) {

    /* ── Header wider ── */
    .app-header {
        padding: 14px 48px;
    }
    .header-logo-text {
        font-size: 26px;
    }

    /* ── Main container wider ── */
    .app-main-content {
        max-width: 1100px;
    }

    /* ── Catalog grid 3 columns ── */
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 32px 48px 48px;
    }

    /* ── Product card — Premium Glass-morphism ── */
    .catalog-grid .product-card {
        min-height: 240px;
        padding: 24px;
        background: rgba(15, 18, 30, 0.6);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 4px 24px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    /* Gradient border pseudo-element (hidden at rest) */
    .catalog-grid .product-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    /* ── Card hover — key wow effect ── */
    .catalog-grid .product-card:hover {
        transform: translateY(-8px);
        border-color: transparent;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                    0 0 30px rgba(0, 212, 255, 0.1),
                    0 0 60px rgba(168, 85, 247, 0.05),
                    inset 0 1px 0 rgba(0, 212, 255, 0.1);
    }
    .catalog-grid .product-card:hover::before {
        opacity: 1;
    }
    .catalog-grid .product-card:active {
        transform: translateY(-4px);
    }

    /* ── Accent stripe glow on hover ── */
    .catalog-grid .product-card:hover .accent-stripe {
        box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
    }

    /* ── Icon zoom on hover ── */
    .catalog-grid .product-icon-wrap {
        width: 88px;
        height: 88px;
        overflow: hidden;
    }
    .catalog-grid .product-icon-img {
        transition: transform 0.4s ease;
    }
    .catalog-grid .product-card:hover .product-icon-img {
        transform: scale(1.08);
    }

    .catalog-grid .product-name {
        font-size: 18px;
    }

    /* ── Price — Orbitron with glow ── */
    .catalog-grid .price-main {
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        font-size: 18px;
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        transition: text-shadow 0.4s ease;
    }
    .catalog-grid .product-card:hover .price-main {
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.5),
                     0 0 40px rgba(0, 212, 255, 0.2);
    }
    .catalog-grid .price-old,
    .catalog-grid .price-old-sm {
        opacity: 0.5;
        text-decoration: line-through;
    }

    /* ── Category chips desktop — overridden by FIX C-1 ── */
    .chips-fade-left,
    .chips-fade-right {
        display: none;
    }

    /* ── Skeleton grid desktop ── */
    .skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 32px 48px 100px;
    }
    .skeleton-grid .skeleton-item {
        background: rgba(15, 18, 30, 0.6);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        min-height: 240px;
    }

    /* ── Detail page — wider container ── */
    .detail-container {
        max-width: 860px;
    }
    .detail-hero {
        padding: 56px 40px 40px;
    }

    /* ── Profile wider ── */
    .profile-container {
        max-width: 800px;
    }

    /* ── Subscription cards grid (2 col) ── */
    .subs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .subs-grid .sub-card {
        margin-bottom: 0;
    }

    /* ── More prominent hover effects (non-grid cards, e.g. detail) ── */
    .product-card:not(.catalog-grid .product-card):hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: var(--shadow-card),
                    0 12px 40px rgba(0, 0, 0, 0.35),
                    0 0 60px rgba(0, 212, 255, 0.1);
    }
    .product-card:hover .product-icon-wrap {
        box-shadow: 0 0 20px var(--icon-glow-color, transparent),
                    0 0 40px var(--icon-glow-color, transparent),
                    inset 0 0 12px rgba(0, 0, 0, 0.6);
    }
}

/* ═══════ WIDE DESKTOP : ≥1440px ═══════ */
@media (min-width: 1440px) {

    /* ── Even wider spacing ── */
    .app-header {
        padding: 16px 64px;
    }
    .header-logo-text {
        font-size: 28px;
    }

    /* ── Main container max ── */
    .app-main-content {
        max-width: 1280px;
    }

    /* ── Catalog grid — 4 columns ── */
    .catalog-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        padding: 32px 48px 100px;
    }
    .catalog-grid .product-card {
        min-height: 260px;
        padding: 28px;
    }
    .catalog-grid .product-icon-wrap {
        width: 96px;
        height: 96px;
    }
    .catalog-grid .product-name {
        font-size: 17px;
    }
    .catalog-grid .price-main {
        font-size: 19px;
    }

    /* ── Skeleton grid — 4 columns ── */
    .skeleton-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        padding: 32px 48px 100px;
    }
    .skeleton-grid .skeleton-item {
        min-height: 260px;
    }

    /* ── Detail ── */
    .detail-container {
        max-width: 920px;
    }

    /* ── Profile ── */
    .profile-container {
        max-width: 900px;
    }

    /* ── Background grid even larger ── */
    body::before {
        background-size: 100% 100%, 100% 100%, 80px 80px, 80px 80px;
    }
}

/* ═══════════════════════════════════════════
   P1: CSS CLASSES FOR JS-GENERATED COMPONENTS
   Replaces inline styles from app.js
   ═══════════════════════════════════════════ */

/* ── Toast notification (showAlert browser fallback) ── */
#web-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #e2e8f0;
    padding: 14px 24px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 340px;
    text-align: center;
    animation: fadeInDown 0.3s ease;
}
#web-toast.toast-hiding {
    opacity: 0;
    transition: opacity 0.3s;
}

/* ── Catalog list pane ── */
/* NOTE: display/padding managed by .catalog-grid + media queries.
   .catalog-pane only adds mobile-default flex layout that the grid overrides. */
.catalog-pane {
    width: 100%;
}

/* ── Empty state ── */
.catalog-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-family: 'Exo 2', sans-serif;
}

/* ── Card content layout ── */
.card-content {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

/* ── Card arrow ── */
.card-arrow {
    position: relative;
    z-index: 1;
}

/* ── Profile container layout ── */
.profile-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    margin: 0 auto;
}

/* ── Profile controls row ── */
.profile-controls {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Profile pill buttons (email, notifications) ── */
.profile-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    border: 1px solid;
}
.profile-pill-btn:hover {
    opacity: 0.85;
}
.profile-pill-email {
    background: rgba(6,182,212,0.1);
    border-color: rgba(6,182,212,0.25);
}
.profile-pill-email:hover {
    background: rgba(6,182,212,0.18);
}
.profile-pill-notif-on {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.3);
}
.profile-pill-notif-off {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
}

/* ── Profile pill inner spans ── */
.pill-icon {
    font-size: 14px;
}
.pill-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pill-notif-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* ── Email edit section ── */
.email-edit-section {
    display: none;
    margin: 0 16px 16px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.email-edit-section.is-visible {
    display: block;
}
.email-edit-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

/* ── Generic form input ── */
.form-input {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.form-input:focus {
    border-color: var(--accent-cyan);
}
.form-input.input-error {
    border-color: #ef4444;
}

/* ── Form button row ── */
.form-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ── Primary gradient button ── */
.btn-primary {
    flex: 1;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    border: none;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-primary:hover {
    opacity: 0.85;
}

/* ── Secondary/cancel button ── */
.btn-secondary {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
}

/* ── Skeleton placeholder ── */
.skeleton-block {
    height: 100px;
    border-radius: var(--radius-md);
}

/* ── Detail page container ── */
.detail-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    padding-bottom: 100px;
}

/* ── Detail info card (instruction, upsell) ── */
.detail-info-card {
    margin: 16px 24px 0;
    padding: 15px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.detail-info-card:hover {
    transform: scale(1.01);
}

.detail-instruction-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.18) 0%, rgba(59,130,246,0.18) 100%);
    border: 1px solid rgba(139,92,246,0.4);
    box-shadow: 0 0 20px rgba(139,92,246,0.12);
}
.detail-instruction-card:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.28) 0%, rgba(59,130,246,0.28) 100%);
    box-shadow: 0 0 28px rgba(139,92,246,0.25);
}

.detail-upsell-card {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(6,182,212,0.18) 100%);
    border: 1px solid rgba(59,130,246,0.4);
    box-shadow: 0 0 20px rgba(59,130,246,0.12);
}
.detail-upsell-card:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.28) 0%, rgba(6,182,212,0.28) 100%);
    box-shadow: 0 0 28px rgba(59,130,246,0.25);
}
.detail-upsell-card > svg {
    flex-shrink: 0;
}

/* ── Info card inner elements ── */
.info-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.info-card-icon-instruction {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}
.info-card-icon-upsell {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.info-card-small-label {
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.info-card-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}
.info-card-upsell-text {
    color: #93c5fd;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}

/* ── Active subscription warning ── */
.active-sub-warning {
    margin: 16px 24px;
    padding: 16px;
    background: rgba(234,179,8,0.1);
    border: 1px dashed rgba(234,179,8,0.4);
    border-radius: 12px;
    text-align: center;
}
.active-sub-title {
    color: #eab308;
    font-weight: 600;
    margin-bottom: 8px;
}
.active-sub-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
}
.active-sub-btn {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
}

/* ── Expiring soon notice ── */
.expiring-notice {
    margin: 16px 24px;
    padding: 12px 16px;
    background: rgba(6,182,212,0.08);
    border: 1px dashed rgba(6,182,212,0.35);
    border-radius: 12px;
    text-align: center;
}
.expiring-notice-text {
    color: var(--accent-cyan);
    font-size: 13px;
}

/* ── Flex spacer ── */
.flex-spacer {
    flex: 1;
}

/* ── Email prompt overlay ── */
.email-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    backdrop-filter: blur(4px);
}
.email-prompt-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.email-prompt-icon {
    font-size: 28px;
    text-align: center;
    margin-bottom: 12px;
}
.email-prompt-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}
.email-prompt-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}
.email-prompt-input {
    background: var(--bg-card);
    border: 1.5px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.email-prompt-input:focus {
    border-color: var(--accent-cyan);
}
.email-prompt-error {
    color: #ef4444;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    min-height: 18px;
    margin-top: 6px;
    text-align: center;
}
.email-prompt-submit {
    margin-top: 8px;
    width: 100%;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    border: none;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.email-prompt-submit:hover {
    opacity: 0.88;
}
.email-prompt-cancel {
    margin-top: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
}

/* ── Login form ── */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 32px 24px;
    text-align: center;
}
.login-icon-wrap {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}
.login-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.login-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
    max-width: 320px;
}
.login-step {
    width: 100%;
    max-width: 300px;
}
.login-step-hidden {
    display: none;
}
.login-input {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.login-input:focus {
    border-color: var(--accent-cyan);
}
.login-input.input-error {
    border-color: #ef4444;
}
.login-error {
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #ef4444;
    min-height: 20px;
}
.login-btn {
    width: 100%;
    padding: 14px;
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    opacity: 0.9;
    transition: opacity 0.3s;
}
.login-btn:hover {
    opacity: 1;
}

/* ── OTP code input ── */
.login-code-input {
    width: 100%;
    padding: 16px;
    text-align: center;
    font-family: 'Exo 2', monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.login-code-input:focus {
    border-color: var(--accent-cyan);
}

/* ── Login divider ── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.login-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}
.login-divider-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Back to email link ── */
.login-back-link {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
    text-decoration: underline;
}

/* ── Spam hint in OTP step ── */
.login-spam-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ── Telegram link button on login page ── */
.login-telegram-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #0088cc, #229ED9);
    border: none;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login-telegram-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.3);
}
.login-telegram-btn svg {
    flex-shrink: 0;
}

/* ── Telegram Login Widget container ── */
.tg-widget-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0 8px;
    min-height: 44px;
}
.tg-widget-wrap iframe {
    border-radius: 12px !important;
}

/* Spinner while TG widget loads */
.tg-widget-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}
.tg-widget-spinner .spinner-icon {
    animation: tg-spin 0.8s linear infinite;
}
@keyframes tg-spin {
    to { transform: rotate(360deg); }
}

/* Fallback when widget fails to load */
.tg-widget-fallback {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    font-style: italic;
}
.tg-widget-fallback-state {
    animation: none;
}
.tg-widget-fallback-state .spinner-icon {
    display: none;
}

/* ── Web profile ── */
.web-profile-container {
    padding: 20px 16px;
    max-width: 480px;
    margin: 0 auto;
}
.web-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.web-profile-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.web-profile-logout {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.3s;
}
.web-profile-logout:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* ── Settings card ── */
.settings-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}
.settings-card-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.settings-card-sublabel {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.settings-card-row {
    display: flex;
    gap: 8px;
}
.settings-input {
    flex: 1;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}
.settings-input-with-prefix {
    padding-left: 26px;
}
.settings-prefix {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    pointer-events: none;
}
.settings-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.settings-save-btn {
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.settings-save-cyan {
    background: var(--accent-cyan);
}
.settings-save-purple {
    background: var(--accent-purple);
}
.settings-status {
    margin-top: 6px;
    font-size: 12px;
    min-height: 16px;
}

/* ── Subscription card (web profile) ── */
.web-sub-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
}
.web-sub-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.web-sub-card-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.web-sub-card-date {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Notification toggle row ── */
.notif-toggle-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}
.notif-toggle-row:hover {
    background: rgba(255,255,255,0.05);
}
.notif-toggle-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
}
.notif-toggle-sublabel {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.notif-toggle-switch {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
    margin-left: 12px;
}
.notif-toggle-switch-on {
    background: var(--accent-cyan);
}
.notif-toggle-switch-off {
    background: rgba(255,255,255,0.1);
}
.notif-toggle-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 2px;
    transition: all 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.notif-toggle-switch-on .notif-toggle-knob {
    right: 2px;
    left: auto;
}
.notif-toggle-switch-off .notif-toggle-knob {
    left: 2px;
    right: auto;
}

/* ── Settings section divider ── */
.settings-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 20px;
}
.settings-section-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}

/* ── No subs message (web) ── */
.web-no-subs {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}

/* ── Status text colors ── */
.status-success { color: #22c55e; }
.status-error { color: #ef4444; }
.color-notif-on { color: #4ade80; }
.color-notif-off { color: #f87171; }
.color-email { color: var(--text-secondary); }
.color-no-email { color: var(--text-muted); }

/* ── Payment sheet close animation ── */
.payment-sheet-overlay.closing {
    opacity: 0;
    transition: opacity 0.22s ease;
}
.payment-sheet.closing {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4,0.2,0,1), opacity 0.2s ease;
}
.payment-sheet.sliding-left {
    transform: translateX(-56px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}

/* ── Subscription status badge variants ── */
.sub-status-badge-sponsor {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border-color: rgba(239,68,68,0.3);
}
.sub-status-badge-pending {
    background: rgba(234,179,8,0.12);
    color: #eab308;
    border-color: rgba(234,179,8,0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-status-badge-expiring {
    background: rgba(234,179,8,0.15);
    color: #eab308;
    border-color: rgba(234,179,8,0.35);
}
.sub-status-badge-expired {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border-color: rgba(239,68,68,0.3);
}
.pending-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(234,179,8,0.3);
    border-top-color: #eab308;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Subscription detail lines (donation) ── */
.sub-detail-thanks {
    color: var(--text-secondary);
    font-style: italic;
}
.sub-detail-count-value {
    color: var(--accent-cyan);
}

/* ── Support link at bottom of subs ── */
.support-link-wrap {
    text-align: center;
    margin-top: 24px;
    padding-bottom: 24px;
}
.support-link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}
.support-link-btn:hover {
    color: white;
}


/* ── Error loading state ── */
.error-state {
    text-align: center;
    color: #ef4444;
    padding: 60px 20px;
    font-size: 15px;
}

.skeleton-item {
    height: 160px;
    border-radius: var(--radius-md);
}

/* ── No subscriptions empty state ── */
.no-subs-box {
    text-align: center;
    color: var(--text-muted);
    padding: 30px 20px;
    font-family: 'Exo 2', sans-serif;
    background: var(--bg-card);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
}

/* ── Sub card no gap ── */
.sub-card-no-gap {
    margin-bottom: 0;
}

/* ── Payment sheet link styling ── */
.pm-link-btn {
    text-decoration: none;
}
.pm-link-other {
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 8px;
}

/* ── Catalog wrapper ── */
.catalog-wrapper {
    position: relative;
    overflow-x: hidden;
    width: 100%;
}
.catalog-top-section {
    padding: 12px 16px 0;
    margin-bottom: 8px;
}

/* ── Variant sheet pm-icon ── */
.pm-icon-variant {
    background: rgba(6,182,212,0.12);
    color: var(--accent-cyan);
}

/* ── Web profile subs wrapper ── */
.web-subs-wrap {
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════
   DESKTOP UI/UX ENHANCEMENTS
   ═══════════════════════════════════════════ */

/* ── P0: Allow text selection on desktop ── */
@media (min-width: 1024px) {
    html, body {
        user-select: auto;
        -webkit-user-select: auto;
    }
}

/* ═══════════════════════════════════════════
   P2: DESKTOP UI/UX LAYOUT ENHANCEMENTS
   Non-destructive additions via media queries
   ═══════════════════════════════════════════ */

/* ── Header inner max-width (≥768px) ── */
@media (min-width: 768px) {

    /* ── Smooth card transitions ── */
    .product-card {
        transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1),
                    box-shadow 0.25s ease,
                    border-color 0.25s ease;
    }

    /* ── Email prompt modal — desktop centering ── */
    .email-prompt-overlay {
        align-items: center;
        justify-content: center;
    }
    .email-prompt-modal {
        border-radius: 20px;
        max-width: 400px;
        animation: modalScale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* ── Login form desktop ── */
    .login-container {
        max-width: 480px;
        margin: 0 auto;
    }
    .login-input:hover {
        border-color: rgba(255,255,255,0.18);
    }
    .login-btn:hover {
        opacity: 1;
        box-shadow: 0 4px 20px rgba(6,182,212,0.3);
    }
    .login-code-input:hover {
        border-color: rgba(255,255,255,0.18);
    }

    /* ── Web profile desktop ── */
    .web-profile-container {
        max-width: 600px;
    }
    .settings-card {
        transition: border-color 0.2s ease;
    }
    .settings-card:hover {
        border-color: rgba(255,255,255,0.12);
    }
    .settings-input:hover {
        border-color: rgba(255,255,255,0.18);
    }
    .settings-input:focus {
        border-color: var(--accent-cyan);
        outline: none;
    }
    .settings-save-btn {
        transition: opacity 0.2s, box-shadow 0.2s;
    }
    .settings-save-btn:hover {
        opacity: 0.85;
        box-shadow: 0 2px 12px rgba(6,182,212,0.25);
    }

    /* ── Web sub cards hover ── */
    .web-sub-card {
        transition: border-color 0.2s ease;
    }
    .web-sub-card:hover {
        border-color: rgba(255,255,255,0.12);
    }

    /* ── Notification toggle ── */
    .notif-toggle-row {
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    /* ── Subscription cards hover ── */
    .sub-card {
        transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .sub-card:hover {
        border-color: rgba(255,255,255,0.12);
        transform: translateY(-1px);
    }

    /* ── Support link ── */
    .support-link-btn:hover {
        color: var(--text-primary);
    }

    /* ── Detail info cards hover ── */
    .detail-info-card {
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .detail-info-card:hover {
        border-color: rgba(255,255,255,0.15);
        transform: translateY(-1px);
    }
}

/* ── Desktop 1024px+ additions ── */
@media (min-width: 1024px) {
    /* ── Header content centering ── */
    .app-header {
        display: flex;
        justify-content: center;
    }

    /* ── Login wider on desktop ── */
    /* NOTE: .login-container max-width overridden in FIX C-5 block (line ~5013) */
    /* NOTE: .login-step max-width overridden in FIX C-5 block (line ~5085) */

    /* ── Web profile wider ── */
    .web-profile-container {
        max-width: 680px;
    }

    /* ── Detail info cards — side by side when both present ── */
    .detail-instruction-card,
    .detail-upsell-card {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════
   FOOTER — hidden on mobile (Telegram WebApp)
   ═══════════════════════════════════════════ */
.site-footer {
    display: none;
}

/* ═══════════════════════════════════════════
   DESKTOP PREMIUM DESIGN — 1024px+
   Header + Footer + Global enhancements
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ── GLOBAL: Selection color ── */
    ::selection {
        background: rgba(0, 212, 255, 0.3);
        color: #fff;
    }
    ::-moz-selection {
        background: rgba(0, 212, 255, 0.3);
        color: #fff;
    }

    /* ── GLOBAL: Focus-visible accessibility ── */
    *:focus-visible {
        outline: 2px solid var(--accent-cyan);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15);
    }

    /* ── GLOBAL: Scrollbar wider on desktop ── */
    ::-webkit-scrollbar {
        width: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        transition: background 0.2s ease;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 212, 255, 0.4);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
    }

    /* ── GLOBAL: All buttons smooth transition ── */
    button,
    [role="button"],
    .header-action-btn,
    .product-card,
    .footer-link {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── GLOBAL: Main content container ── */
    .app-main-content {
        max-width: 1440px;
        padding-left: 48px;
        padding-right: 48px;
        margin: 0 auto;
    }

    /* ── GLOBAL: Text blocks max-width for readability ── */
    .detail-description,
    .footer-tagline,
    .detail-text-block,
    .help-modal-text {
        max-width: 75ch;
    }

    /* ══════════════════════════════════════
       HEADER — Premium Desktop Navigation
       ══════════════════════════════════════ */

    /* Inner layout: centered with max-width */
    .app-header {
        height: 72px;
        padding: 0 48px;
        align-items: center;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent) 1;
    }

    /* Enhanced glass-morphism */
    @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
        .app-header {
            background: rgba(6, 8, 15, 0.7);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
        }
    }

    /* Logo — larger with cyan glow */
    .header-logo-text {
        font-size: 28px;
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.1);
        transition: text-shadow 0.3s ease;
        overflow: visible;
    }
    .header-logo-text:hover {
        text-shadow: 0 0 24px rgba(0, 212, 255, 0.5), 0 0 48px rgba(0, 212, 255, 0.2);
    }

    /* Header action buttons — cyan glow underline on hover */
    .header-action-btn {
        position: relative;
        height: 44px;
        border-radius: 12px;
        overflow: visible;
    }
    .header-action-btn::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--accent-cyan);
        border-radius: 1px;
        transform: translateX(-50%);
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    }
    .header-action-btn:hover::after {
        width: 70%;
    }

    /* Profile button — premium hover */
    .profile-btn-wide {
        padding: 0 20px;
        gap: 10px;
        height: 44px;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .profile-btn-wide span {
        display: inline;
        font-size: 14px;
    }
    .profile-btn-wide:hover {
        background: rgba(0, 212, 255, 0.08);
        border-color: rgba(0, 212, 255, 0.25);
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.1);
    }

    /* Help button — cyan glow on hover */
    .help-btn:hover {
        color: var(--accent-cyan);
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
    }

    /* ══════════════════════════════════════
       FOOTER — Fixed bottom bar (like header)
       ══════════════════════════════════════ */
    .site-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background: rgba(6, 8, 15, 0.92);
        border-top: 1px solid transparent;
        border-image: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent) 1;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
    }

    @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
        .site-footer {
            background: rgba(6, 8, 15, 0.7);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
        }
    }

    .footer-inner {
        margin: 0 auto;
        padding: 12px 48px;
    }

    .footer-gradient-line {
        display: none;
    }

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

    .footer-brand .footer-logo {
        font-size: 18px;
        font-weight: 700;
        background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: 0.05em;
    }

    .footer-tagline {
        display: none;
    }

    .footer-links {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .footer-link {
        color: var(--text-secondary);
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        transition: color 0.3s ease, text-shadow 0.3s ease;
        position: relative;
    }
    .footer-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--accent-cyan);
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .footer-link:hover {
        color: var(--accent-cyan);
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }
    .footer-link:hover::after {
        width: 100%;
    }

    .footer-copy {
        color: var(--text-muted);
        font-size: 12px;
        font-family: 'Inter', sans-serif;
    }
}

/* ── Wide desktop 1440px+ additions ── */
@media (min-width: 1440px) {
    .web-profile-container {
        max-width: 760px;
    }
    .login-container {
        max-width: 560px;
    }

    /* ── Footer wider padding ── */
    .footer-inner {
        padding: 12px 64px;
    }

    /* ── Header wider ── */
    .app-header {
        padding: 0 64px;
    }
}

/* ═══════════════════════════════════════════
   P3: DESKTOP PRODUCT PAGE + MODALS
   Premium two-column layout & glass-morphism modals
   ═══════════════════════════════════════════ */

/* ── Animated glow keyframe for CTA button ── */
@keyframes btnGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.2),
                    0 0 40px rgba(0, 212, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.3),
                    0 0 60px rgba(0, 212, 255, 0.15);
    }
}

@media (min-width: 1024px) {

    /* ══════════════════════════════════════
       1. PRODUCT PAGE — Two-Column Layout
       ══════════════════════════════════════ */

    .detail-container {
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 0 48px;
        align-items: start;
        padding-bottom: 48px;
        min-height: auto;
    }

    /* Left column wrapper: sticky sidebar with hero + cards + buy btn */
    .detail-left-col {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 96px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-self: start;
    }

    /* Hero styling inside left column */
    .detail-hero {
        padding: 40px 32px;
        background: rgba(15, 18, 30, 0.6);
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 8px 40px rgba(0, 0, 0, 0.3),
                    0 0 60px rgba(0, 212, 255, 0.04);
        z-index: 1;
    }

    /* Description = right column */
    .detail-container > .detail-description {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    /* ── Hero icon — larger with stronger glow ── */
    .detail-icon-wrap {
        width: 160px;
        height: 160px;
        border-radius: 34px;
        box-shadow: 0 0 24px var(--icon-glow-color, transparent),
                    0 0 56px var(--icon-glow-color-soft, transparent),
                    inset 0 0 20px rgba(0, 0, 0, 0.7);
    }

    .product-icon-detail-img {
        width: 72%;
        height: 72%;
    }

    /* ── Hero radial glow enhanced ── */
    .detail-hero::before {
        background: radial-gradient(
            ellipse at center top,
            var(--hero-glow, rgba(0, 212, 255, 0.12)),
            transparent 70%
        );
    }

    /* ══════════════════════════════════════
       2. TYPOGRAPHY — Detail Page
       ══════════════════════════════════════ */

    .detail-title {
        font-family: 'Exo 2', sans-serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
    }

    .detail-subtitle {
        font-size: 16px;
        line-height: 1.6;
        max-width: 75ch;
        color: var(--text-secondary);
    }

    /* ── Description — glass card style ── */
    .detail-description {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 24px 32px;
        margin: 0;
        margin-top: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.2);
    }

    .detail-description-text {
        font-size: 15px;
        line-height: 1.75;
    }

    /* ══════════════════════════════════════
       3. INFO CARDS — Desktop Glass-morphism
       ══════════════════════════════════════ */

    .detail-info-card {
        margin: 16px 0 0;
        padding: 16px 20px;
        border-radius: 12px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease,
                    border-color 0.3s ease;
    }

    .detail-info-card:hover {
        transform: translateY(-4px) scale(1.0);
        border-color: rgba(0, 212, 255, 0.3);
    }

    .detail-instruction-card:hover {
        box-shadow: 0 8px 32px rgba(139, 92, 246, 0.25),
                    0 0 40px rgba(139, 92, 246, 0.1);
    }
    .detail-instruction-card:hover > svg {
        transform: translateX(4px);
    }

    .detail-upsell-card:hover {
        box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2),
                    0 0 40px rgba(0, 212, 255, 0.08);
    }
    .detail-upsell-card:hover > svg {
        transform: translateX(4px);
    }

    .detail-upsell-card > svg,
    .detail-instruction-card > svg {
        transition: transform 0.3s ease;
    }

    .info-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .info-card-title {
        font-size: 15px;
    }

    /* ── Warnings — right column, no margin overrides ── */
    .active-sub-warning,
    .expiring-notice {
        margin-left: 0;
        margin-right: 0;
    }

    /* ══════════════════════════════════════
       4. CTA BUTTON — Animated Glow Border
       ══════════════════════════════════════ */

    .buy-btn-container {
        position: static;
        padding: 0;
        padding-bottom: 0;
        background: none;
        margin-top: 24px;
    }

    .buy-btn {
        height: 56px;
        border-radius: 14px;
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(168, 85, 247, 0.15));
        border: 1px solid rgba(0, 212, 255, 0.4);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.2),
                    0 0 40px rgba(0, 212, 255, 0.1);
        animation: btnGlowPulse 3s ease-in-out infinite;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 24px;
    }

    .buy-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(168, 85, 247, 0.25));
        border-color: rgba(0, 212, 255, 0.6);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.35),
                    0 0 60px rgba(0, 212, 255, 0.15),
                    0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .buy-btn:active {
        transform: translateY(0) scale(0.99);
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.15),
                    0 0 32px rgba(0, 212, 255, 0.08);
    }

    /* ══════════════════════════════════════
       5. EMAIL PROMPT — Glass-morphism Center
       ══════════════════════════════════════ */

    .email-prompt-overlay {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .email-prompt-modal {
        max-width: 480px;
        background: rgba(15, 18, 30, 0.85);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5),
                    0 0 40px rgba(0, 212, 255, 0.05);
        animation: modalScale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .email-prompt-icon {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .email-prompt-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .email-prompt-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .email-prompt-input {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 12px;
        background: rgba(15, 18, 30, 0.6);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        transition: border-color 0.25s ease,
                    box-shadow 0.25s ease,
                    background 0.25s ease;
    }

    .email-prompt-input:focus {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15),
                    0 0 20px rgba(0, 212, 255, 0.1);
        background: rgba(0, 212, 255, 0.03);
    }

    .email-prompt-submit {
        height: 48px;
        border-radius: 12px;
        font-family: 'Exo 2', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
        border: 1px solid rgba(0, 212, 255, 0.4);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
        transition: all 0.3s ease;
    }

    .email-prompt-submit:hover {
        opacity: 1;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(168, 85, 247, 0.3));
        border-color: rgba(0, 212, 255, 0.6);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.25),
                    0 4px 20px rgba(0, 0, 0, 0.3);
        transform: translateY(-1px);
    }

    .email-prompt-cancel {
        font-size: 14px;
        padding: 8px 16px;
        border-radius: 8px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .email-prompt-cancel:hover {
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.04);
    }

    /* ══════════════════════════════════════
       6. PAYMENT SHEET — Center Modal + Glass
       ══════════════════════════════════════ */

    .payment-sheet-overlay {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .payment-sheet {
        max-width: 520px;
        background: rgba(15, 18, 30, 0.88);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 32px 28px 24px;
        padding-bottom: 24px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5),
                    0 0 40px rgba(0, 212, 255, 0.05);
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Hide mobile drag handle on desktop */
    .payment-sheet-handle {
        display: none;
    }

    .payment-sheet-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .payment-sheet-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    /* ── Payment method rows — glass highlight + glow ── */
    .payment-method-btn {
        padding: 16px 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .payment-method-btn:hover {
        background: rgba(0, 212, 255, 0.06);
        border-color: rgba(0, 212, 255, 0.25);
        border-left: 3px solid rgba(0, 212, 255, 0.6);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(0, 212, 255, 0.06);
        transform: translateX(4px);
    }

    /* ── Payment icons — larger glass circle ── */
    .pm-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 24px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .pm-name {
        font-size: 16px;
    }

    .pm-desc {
        font-size: 13px;
    }

    .payment-sheet-cancel {
        font-size: 15px;
        padding: 16px;
        border-radius: 12px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .payment-sheet-cancel:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.04);
    }

    /* ── Variant picker inside sheet ── */
    .variant-picker {
        gap: 10px;
    }

    .variant-btn {
        border-radius: 12px;
        padding: 12px 10px;
        transition: all 0.25s ease;
    }

    .variant-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .variant-btn.selected {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.15),
                    0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .variant-upsell {
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 13px;
        transition: all 0.25s ease;
    }

    .variant-upsell:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
    }

    /* ══════════════════════════════════════
       7. HELP MODAL — Enhanced Glass-morphism
       ══════════════════════════════════════ */

    .help-modal-overlay {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .help-modal {
        max-width: 480px;
        background: rgba(15, 18, 30, 0.88);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 40px 32px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5),
                    0 0 40px rgba(0, 212, 255, 0.05);
    }

    .help-modal-icon {
        font-size: 44px;
        margin-bottom: 8px;
    }

    .help-modal-title {
        font-size: 22px;
    }

    .help-modal-text {
        font-size: 15px;
        max-width: 360px;
    }

    .help-modal-admin-btn {
        padding: 16px 24px;
        border-radius: 14px;
        font-size: 16px;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
        border: 1px solid rgba(0, 212, 255, 0.4);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
        transition: all 0.3s ease;
    }

    .help-modal-admin-btn:hover {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(168, 85, 247, 0.3));
        border-color: rgba(0, 212, 255, 0.6);
        box-shadow: 0 6px 28px rgba(0, 212, 255, 0.35),
                    0 0 40px rgba(0, 212, 255, 0.1);
        transform: translateY(-2px);
    }

    .help-modal-close-btn {
        font-size: 15px;
        padding: 10px 20px;
        border-radius: 10px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .help-modal-close-btn:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.04);
    }
}

/* ── Wide desktop 1440px+ — Product page adjustments ── */
@media (min-width: 1440px) {
    .detail-container {
        max-width: 1080px;
        gap: 0 56px;
    }

    .detail-hero {
        padding: 48px 40px;
    }

    .detail-icon-wrap {
        width: 176px;
        height: 176px;
        border-radius: 38px;
    }

    .detail-title {
        font-size: 36px;
    }
}

/* ═══════════════════════════════════════════
   P4: DESKTOP PROFILE + SUBSCRIPTIONS
   Premium two-column layout & glass-morphism
   ═══════════════════════════════════════════ */

@media (min-width: 1024px) {

    /* ══════════════════════════════════════
       1. TG PROFILE — Two-Column Grid Layout
       ══════════════════════════════════════ */

    .profile-container:not(.web-profile-container):not(.login-container) {
        max-width: 960px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 32px;
        padding: 32px 24px 80px;
        min-height: auto;
    }

    /* Left column: hero + email edit section */
    .profile-container:not(.web-profile-container) .profile-hero {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 96px;
        align-self: start;
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        padding: 40px 32px 32px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 8px 40px rgba(0, 0, 0, 0.3),
                    0 0 60px rgba(168, 85, 247, 0.04);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .profile-container:not(.web-profile-container) .profile-hero:hover {
        border-color: rgba(168, 85, 247, 0.15);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 8px 40px rgba(0, 0, 0, 0.3),
                    0 0 80px rgba(168, 85, 247, 0.08);
    }

    .profile-container:not(.web-profile-container) .email-edit-section {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 20px 24px;
    }

    /* Right column: subscriptions — spans all rows */
    .profile-container:not(.web-profile-container) .subs-section {
        grid-column: 2;
        grid-row: 1 / 20;
        padding: 0;
    }

    /* ── Profile hero — avatar & typography ── */
    .profile-container:not(.web-profile-container) .profile-avatar-wrap {
        width: 96px;
        height: 96px;
        border: 2px solid rgba(168, 85, 247, 0.35);
        box-shadow: 0 0 24px rgba(168, 85, 247, 0.2),
                    0 0 48px rgba(168, 85, 247, 0.08);
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .profile-container:not(.web-profile-container) .profile-avatar-wrap:hover {
        border-color: rgba(168, 85, 247, 0.5);
        box-shadow: 0 0 32px rgba(168, 85, 247, 0.3),
                    0 0 64px rgba(168, 85, 247, 0.12);
    }

    .profile-container:not(.web-profile-container) .profile-name {
        font-family: 'Exo 2', sans-serif;
        font-size: 24px;
        font-weight: 700;
    }

    .profile-container:not(.web-profile-container) .profile-username {
        color: var(--accent-cyan);
        font-size: 15px;
    }

    /* ── Profile controls — pill buttons ── */
    .profile-container:not(.web-profile-container) .profile-controls {
        margin-top: 20px;
    }

    .profile-container:not(.web-profile-container) .profile-pill-btn {
        border-radius: 24px;
        padding: 8px 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .profile-container:not(.web-profile-container) .profile-pill-btn:hover {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    /* ── Subs section title ── */
    .profile-container:not(.web-profile-container) .subs-title {
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: 0;
        margin-bottom: 16px;
    }

    /* ── Subs grid — single column in right panel ── */
    .profile-container:not(.web-profile-container) .subs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ══════════════════════════════════════
       2. SUBSCRIPTION CARDS — Premium Glass
       ══════════════════════════════════════ */

    .sub-card {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        padding: 20px 24px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.3s ease,
                    box-shadow 0.3s ease;
    }

    .sub-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 40px rgba(0, 212, 255, 0.06);
    }

    /* ── Active sub glow (via :has selector) ── */
    .sub-card:has(.sub-status-badge:not(.sub-status-badge-sponsor):not(.sub-status-badge-pending):not(.sub-status-badge-expiring):not(.sub-status-badge-expired)) {
        border: 1px solid rgba(0, 212, 255, 0.3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(0, 212, 255, 0.08);
    }

    .sub-card:has(.sub-status-badge:not(.sub-status-badge-sponsor):not(.sub-status-badge-pending):not(.sub-status-badge-expiring):not(.sub-status-badge-expired)):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 32px rgba(0, 212, 255, 0.15);
    }

    /* ── Sponsor sub glow ── */
    .sub-card:has(.sub-status-badge-sponsor) {
        border: 1px solid rgba(239, 68, 68, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(239, 68, 68, 0.08);
    }

    .sub-card:has(.sub-status-badge-sponsor):hover {
        border-color: rgba(239, 68, 68, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 32px rgba(239, 68, 68, 0.12);
    }

    /* ── Sub card left accent bar — thicker ── */
    .sub-card::before {
        width: 3px;
        border-radius: 3px 0 0 3px;
    }

    /* ── Sub card typography ── */
    .sub-name {
        font-family: 'Exo 2', sans-serif;
        font-size: 16px;
        font-weight: 600;
    }

    /* ── Status badges — premium sizing ── */
    .sub-status-badge {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
    }

    .sub-status-badge-sponsor {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
    }

    .sub-status-badge-pending {
        box-shadow: 0 0 8px rgba(234, 179, 8, 0.25);
    }

    .sub-status-badge-expiring {
        box-shadow: 0 0 8px rgba(234, 179, 8, 0.3);
    }

    .sub-status-badge-expired {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
    }

    /* ══════════════════════════════════════
       3. NO-SUBS EMPTY STATE — Glass Card
       ══════════════════════════════════════ */

    .no-subs-box {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 48px 32px;
        font-size: 15px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.15);
    }

    .no-subs-box button {
        margin-top: 16px;
        padding: 12px 32px;
        font-family: 'Exo 2', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--accent-cyan);
        background: transparent;
        border: 1px solid rgba(0, 212, 255, 0.4);
        border-radius: 24px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.1);
    }

    .no-subs-box button:hover {
        background: rgba(0, 212, 255, 0.08);
        border-color: rgba(0, 212, 255, 0.6);
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.2),
                    0 4px 16px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }

    /* ══════════════════════════════════════
       4. WEB PROFILE — Two-Column Layout
       ══════════════════════════════════════ */

    .web-profile-container {
        max-width: 960px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 32px 24px 80px;
    }

    /* Header spans full width */
    .web-profile-container .web-profile-header {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .web-profile-container .web-profile-title {
        font-family: 'Exo 2', sans-serif;
        font-size: 24px;
        font-weight: 700;
    }

    .web-profile-container .web-profile-logout {
        border-radius: 10px;
        padding: 8px 20px;
        font-size: 14px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .web-profile-container .web-profile-logout:hover {
        background: rgba(239, 68, 68, 0.08);
        transform: translateY(-1px);
    }

    /* Subscriptions — left column */
    .web-profile-container .web-subs-wrap {
        grid-column: 1;
        grid-row: 2 / 20;
    }

    /* Settings — right column */
    .web-profile-container .settings-section {
        grid-column: 2;
        grid-row: 2;
        border-top: none;
        padding-top: 0;
    }

    /* ── Settings section title ── */
    .web-profile-container .settings-section-title {
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 600;
    }

    /* ══════════════════════════════════════
       5. SETTINGS CARDS — Glass-morphism
       ══════════════════════════════════════ */

    .settings-card {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 20px 24px;
        margin-bottom: 16px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.15);
        transition: border-color 0.3s ease,
                    box-shadow 0.3s ease,
                    transform 0.3s ease;
    }

    .settings-card:hover {
        border-color: rgba(255, 255, 255, 0.12);
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.25);
    }

    /* ── Settings inputs — glass background ── */
    .settings-input {
        background: rgba(15, 18, 30, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 14px;
        transition: border-color 0.25s ease,
                    box-shadow 0.25s ease,
                    background 0.25s ease;
    }

    .settings-input:hover {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .settings-input:focus {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12),
                    0 0 16px rgba(0, 212, 255, 0.08);
        background: rgba(0, 212, 255, 0.03);
        outline: none;
    }

    /* ── Save button — compact pill with gradient ── */
    .settings-save-btn {
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .settings-save-cyan {
        background: linear-gradient(135deg, var(--accent-cyan), rgba(0, 212, 255, 0.8));
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
    }

    .settings-save-cyan:hover {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.35),
                    0 4px 16px rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);
    }

    .settings-save-purple {
        background: linear-gradient(135deg, var(--accent-purple), rgba(168, 85, 247, 0.8));
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
    }

    .settings-save-purple:hover {
        opacity: 1;
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.35),
                    0 4px 16px rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);
    }

    /* ══════════════════════════════════════
       6. WEB SUB CARDS — Glass + Hover
       ══════════════════════════════════════ */

    .web-sub-card {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        padding: 20px 24px;
        margin-bottom: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.3s ease,
                    box-shadow 0.3s ease;
    }

    .web-sub-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 24px rgba(0, 212, 255, 0.06);
    }

    /* ── Active web sub card glow ── */
    .web-sub-card:has(.status-active) {
        border: 1px solid rgba(0, 212, 255, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.15),
                    0 0 20px rgba(0, 212, 255, 0.08);
    }

    .web-sub-card:has(.status-active):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 32px rgba(0, 212, 255, 0.15);
    }

    .web-sub-card-name {
        font-family: 'Exo 2', sans-serif;
        font-size: 16px;
        font-weight: 600;
    }

    .web-sub-card-date {
        font-size: 13px;
    }

    /* ── Web no-subs state ── */
    .web-no-subs {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 48px 32px;
        text-align: center;
        color: var(--text-muted);
        font-family: 'Exo 2', sans-serif;
        font-size: 15px;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ══════════════════════════════════════
       7. NOTIFICATION TOGGLE — Desktop Size
       ══════════════════════════════════════ */

    .notif-toggle-row {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 20px 24px;
        transition: background 0.3s ease,
                    border-color 0.3s ease,
                    box-shadow 0.3s ease,
                    transform 0.3s ease;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 4px 24px rgba(0, 0, 0, 0.15);
    }

    .notif-toggle-row:hover {
        background: rgba(15, 18, 30, 0.6);
        border-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 8px 32px rgba(0, 0, 0, 0.25);
    }

    .notif-toggle-label {
        font-size: 15px;
        font-weight: 500;
    }

    .notif-toggle-sublabel {
        font-size: 13px;
        margin-top: 4px;
    }

    /* ── Toggle switch — desktop size ── */
    .notif-toggle-switch {
        width: 52px;
        height: 28px;
        border-radius: 14px;
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .notif-toggle-switch-on {
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.3),
                    0 0 24px rgba(0, 212, 255, 0.1);
    }

    .notif-toggle-knob {
        width: 22px;
        height: 22px;
        top: 3px;
    }

    .notif-toggle-switch-on .notif-toggle-knob {
        right: 3px;
    }

    .notif-toggle-switch-off .notif-toggle-knob {
        left: 3px;
    }

    /* ══════════════════════════════════════
       8. SUPPORT LINK — Desktop Polish
       ══════════════════════════════════════ */

    .support-link-wrap {
        margin-top: 32px;
        padding-bottom: 0;
    }

    .support-link-btn {
        font-size: 14px;
        padding: 10px 16px;
        border-radius: 8px;
        transition: color 0.3s ease, background 0.3s ease;
    }

    .support-link-btn:hover {
        color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.04);
    }

    /* ══════════════════════════════════════
       9. EMAIL EDIT SECTION — Glass Form
       ══════════════════════════════════════ */

    .email-edit-section {
        background: rgba(15, 18, 30, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 20px 24px;
    }

    .email-edit-label {
        font-family: 'Exo 2', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }
}

/* ── Wide desktop 1440px+ — Profile adjustments ── */
@media (min-width: 1440px) {
    .profile-container:not(.web-profile-container):not(.login-container) {
        max-width: 1040px;
        gap: 40px;
    }

    .web-profile-container {
        max-width: 1040px;
        gap: 40px;
    }
}


/* ═══════════════════════════════════════════
   FIX C — Replaces Fix A + Fix B
   5 bugs: chips+search, buttons width, description stretch,
   sticky footer, login redesign
   Desktop only (min-width: 1024px)
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ══════════════════════════════════════
       FROM FIX A: Prices in catalog cards (vertical)
       ══════════════════════════════════════ */
    .catalog-grid .product-price-block {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .catalog-grid .product-price-block .price-block {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .catalog-grid .price-main {
        font-size: 20px;
        line-height: 1.3;
        display: block;
        width: 100%;
        text-align: center;
    }
    .catalog-grid .price-old,
    .catalog-grid .price-old-sm {
        font-size: 13px;
        display: block;
        text-align: center;
    }
    .catalog-grid .price-alt {
        font-size: 12px;
        display: block;
        text-align: center;
    }

    /* ══════════════════════════════════════
       FROM FIX A: Back button hidden on desktop
       ══════════════════════════════════════ */
    #header-back-btn,
    .header-back-btn {
        display: none !important;
    }

    /* Catalog wrapper — allow glow overflow on desktop */
    .catalog-wrapper {
        overflow-x: visible;
    }

    /* ══════════════════════════════════════
       FIX C-1: CHIPS + SEARCH TOOLBAR
       Inline search field + chips in one row
       ══════════════════════════════════════ */

    /* Top section: clean container */
    .catalog-top-section {
        display: flex;
        flex-direction: column;
        padding: 20px 0 0;
        gap: 0;
    }

    /* Chips row: horizontal flex, chips left, search right */
    .category-chips-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        position: relative;
        flex-wrap: nowrap;
        overflow: visible;
    }

    /* Hide toggle search button on desktop — search is always visible */
    .cat-chip-search {
        display: none !important;
    }

    /* Chips scroll wrapper — takes available space */
    .chips-scroll-wrap {
        flex: 1;
        min-width: 0;
        overflow: visible;
    }

    /* Chips container — single row with scroll on desktop */
    .category-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 8px 12px;
    }
    .category-chips::-webkit-scrollbar {
        display: none;
    }

    /* Hide scroll arrows on desktop */
    .scroll-arrow {
        display: none !important;
    }

    /* Show emoji on desktop */
    .chip-emoji {
        display: inline;
    }

    /* Individual chip — premium desktop style */
    .cat-chip {
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        white-space: nowrap;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        overflow: hidden;
    }
    .cat-chip:hover {
        background: rgba(0, 212, 255, 0.08);
        border-color: rgba(0, 212, 255, 0.2);
        color: var(--accent-cyan);
        transform: translateY(-1px);
    }
    .cat-chip.active {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(168, 85, 247, 0.15));
        border-color: rgba(0, 212, 255, 0.3);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 12px rgba(0, 212, 255, 0.2);
    }

    /* ── Search — always visible inline, right side ── */
    .search-overlay {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: flex !important;
        width: 280px;
        flex-shrink: 0;
        margin-top: 0;
        background: transparent;
        z-index: auto;
        opacity: 1 !important;
        transform: none !important;
        transition: none;
        overflow: visible;
    }
    .search-overlay .search-bar {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
    #catalog-search {
        padding: 10px 16px 10px 40px;
        font-size: 14px;
        border-radius: 20px;
        background: rgba(15, 18, 30, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }
    #catalog-search:focus {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.15),
                    0 0 40px rgba(0, 212, 255, 0.05);
        outline: none;
    }
    .search-close-btn {
        display: none;
    }
    .search-icon {
        color: var(--accent-cyan);
        opacity: 0.9;
        z-index: 2;
        pointer-events: none;
        top: 50%;
        transform: translateY(-50%);
        left: 14px;
        width: 16px;
        height: 16px;
    }

    /* ══════════════════════════════════════
       FIX C-4: STICKY FOOTER
       Reliable flex-column layout
       ══════════════════════════════════════ */
    
    /* Note: html,body already have min-height:100vh in base styles */

    /* ══════════════════════════════════════
       FROM FIX A: Header + Footer width alignment
       ══════════════════════════════════════ */
    .app-header,
    .site-footer .footer-inner {
        padding-left: max(48px, calc((100vw - 1440px) / 2 + 48px));
        padding-right: max(48px, calc((100vw - 1440px) / 2 + 48px));
    }

    /* ══════════════════════════════════════
       FROM FIX B: Content offset from fixed header + footer
       ══════════════════════════════════════ */
    .app-main-content {
        padding-top: 88px;
        padding-bottom: 64px;
    }

    /* Detail container extra spacing from header */
    .detail-container {
        padding-top: 16px;
    }

    /* ══════════════════════════════════════
       FIX C-2: PRODUCT PAGE — Left column items
       All items inside .detail-left-col wrapper
       ══════════════════════════════════════ */

    /* Info cards inside left col: full width, gap handles spacing */
    .detail-left-col .detail-info-card {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    /* Active sub warning inside left col */
    .detail-left-col .active-sub-warning {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* Expiring notice inside left col */
    .detail-left-col .expiring-notice {
        width: 100%;
        margin: 0;
    }

    /* Flex spacer: hidden on desktop */
    .detail-left-col .flex-spacer {
        display: none;
    }

    /* Buy button inside left col: full width */
    .detail-left-col .buy-btn-container {
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        left: auto;
        transform: none;
        position: static;
        padding: 0;
        background: none;
    }
    .detail-left-col .buy-btn-container .buy-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* ── Price block inside hero — enlarged & fancy ── */
    .detail-hero .price-block {
        margin-top: 16px;
        padding: 16px 20px;
        background: rgba(0, 212, 255, 0.04);
        border: 1px solid rgba(0, 212, 255, 0.12);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .detail-hero .price-main {
        font-family: 'Orbitron', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--accent-cyan);
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.4),
                     0 0 40px rgba(0, 212, 255, 0.15);
        letter-spacing: 0.02em;
    }
    .detail-hero .price-old-sm,
    .detail-hero .price-old {
        font-size: 16px;
        color: var(--text-muted);
    }
    .detail-hero .price-discount-badge {
        font-size: 14px;
        padding: 4px 12px;
        border-radius: 8px;
    }
    .detail-hero .price-alt {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    /* FIX C-3: removed — description now styled in main grid block above */

    /* ══════════════════════════════════════
       FIX C-5: LOGIN PAGE — Full redesign
       Centered glass card with clear hierarchy
       ══════════════════════════════════════ */

    .login-container {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        padding: 56px 44px 44px;
        background: rgba(15, 18, 30, 0.55);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 24px;
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4),
                    0 0 60px rgba(0, 212, 255, 0.03),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        /* Reset any grid from profile-container */
        grid-template-columns: none;
    }

    /* Vertically center login card in main area */
    .app-main-content:has(> .login-container) {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 88px);
    }

    /* ── Login icon — glowing circle ── */
    .login-icon-wrap {
        width: 88px;
        height: 88px;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(168, 85, 247, 0.1));
        border: 1px solid rgba(0, 212, 255, 0.15);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.15),
                    0 0 60px rgba(0, 212, 255, 0.05);
        margin-bottom: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-icon-wrap svg {
        width: 40px;
        height: 40px;
    }

    /* ── Login title ── */
    .login-title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 12px;
        background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── Login subtitle ── */
    .login-subtitle {
        font-size: 15px;
        max-width: 380px;
        margin-bottom: 32px;
        color: var(--text-secondary);
        line-height: 1.7;
    }

    /* ── Login step container ── */
    .login-step {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    /* Keep hidden step hidden (override display:flex above) */
    .login-step.login-step-hidden {
        display: none;
    }

    /* ── Email input — glass style, full width ── */
    .login-input {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
        background: rgba(15, 18, 30, 0.6);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: var(--text-primary);
        transition: border-color 0.3s ease,
                    box-shadow 0.3s ease,
                    background 0.3s ease;
        box-sizing: border-box;
    }
    .login-input:hover {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(15, 18, 30, 0.7);
    }
    .login-input:focus {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.15),
                    0 0 40px rgba(0, 212, 255, 0.05);
        background: rgba(15, 18, 30, 0.8);
        outline: none;
    }

    /* ── Login button — gradient CTA, full width ── */
    .login-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
        color: #fff;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25),
                    0 0 40px rgba(0, 212, 255, 0.08);
        transition: transform 0.2s ease,
                    box-shadow 0.3s ease,
                    opacity 0.3s ease;
        margin-top: 12px;
        letter-spacing: 0.02em;
    }
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0, 212, 255, 0.35),
                    0 0 60px rgba(0, 212, 255, 0.12);
        opacity: 1;
    }
    .login-btn:active {
        transform: translateY(0) scale(0.99);
    }

    /* ── OTP code input — cyberpunk monospace ── */
    .login-code-input {
        width: 100%;
        padding: 18px 16px;
        font-size: 32px;
        letter-spacing: 16px;
        text-align: center;
        background: rgba(15, 18, 30, 0.6);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: var(--accent-cyan);
        font-family: 'Orbitron', 'Exo 2', monospace;
        transition: border-color 0.3s ease,
                    box-shadow 0.3s ease;
        box-sizing: border-box;
    }
    .login-code-input:focus {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.2),
                    0 0 48px rgba(0, 212, 255, 0.06);
        outline: none;
    }

    /* ── Login divider ── */
    .login-divider {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .login-divider-line {
        flex: 1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        height: 1px;
    }
    .login-divider-text {
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* ── Back link ── */
    .login-back-link {
        margin-top: 16px;
        font-size: 14px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease;
        padding: 8px 16px;
        border-radius: 8px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .login-back-link:hover {
        color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.04);
    }

    /* ── Login error ── */
    .login-error {
        font-size: 13px;
        margin-top: 8px;
        width: 100%;
        text-align: center;
    }
}

/* ── FIX C: Wide desktop 1440px+ ── */
@media (min-width: 1440px) {
    .app-header,
    .site-footer .footer-inner {
        padding-left: calc((100vw - 1440px) / 2 + 48px);
        padding-right: calc((100vw - 1440px) / 2 + 48px);
    }

    .detail-container {
        grid-template-columns: minmax(360px, 1fr) 1.5fr;
    }

    .detail-hero .price-main {
        font-size: 32px;
    }

    .login-container {
        max-width: 520px;
        padding: 64px 56px 56px;
    }
}