:root {
    --bg-primary: #121212;
    --bg-secondary: #1A1A1A;
    --bg-card: #242424;

    --pink-primary: #FF4D6D;
    --pink-light: #FF8FA3;
    --pink-dark: #C9184A;

    --primary: var(--pink-primary);
    --primary-hover: var(--pink-dark);
    --accent: var(--pink-light);

    --text-primary: #EAEAEA;
    --text-secondary: #B0B0B0;
    --text-muted: #808080;

    --border: #333333;
    --input-bg: #181818;
    --shadow: rgba(0,0,0,0.5);

    --glow-pink: rgba(255, 77, 109, 0.3);

    --success: #28c76f;
    --warning: #ff9f43;
    --error: #ea5455;
}

/* ==========================================================
   Responsive foundation: desktop, laptop, tablet and mobile
   Added to normalize layouts across all pages in this project.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, picture, video, canvas, svg, iframe { max-width: 100%; height: auto; }
img { display: block; }
a, button, input, select, textarea { max-width: 100%; }
button, .btn, [class*="btn"], a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }
table { width: 100%; border-collapse: collapse; }

.container,
.wrapper,
.page,
.section,
.hero,
.content,
.main,
.auth-container,
.dashboard,
.profile-wrap,
.news-wrap,
.article-wrap,
.magazine-wrap,
.subscription-wrap {
    max-width: min(1320px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

[class*="grid"],
.cards,
.card-grid,
.model-grid,
.news-grid,
.article-grid,
.magazine-grid,
.professional-grid,
.portfolio-grid,
.stats-grid,
.pricing-grid,
.features-grid,
.status-grid,
.form-grid,
.nav-form-grid,
.check-grid,
.nav-check-grid {
    min-width: 0;
}

.card,
[class*="card"],
.panel,
[class*="panel"],
.box,
[class*="box"],
.tile,
[class*="tile"],
.profile-card,
.news-card,
.article-card,
.magazine-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.table-responsive,
.admin-table,
.data-table,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
    .container,
    .wrapper,
    .page,
    .section,
    .hero,
    .content,
    .main,
    .profile-wrap,
    .news-wrap,
    .article-wrap,
    .magazine-wrap,
    .subscription-wrap { max-width: calc(100% - 40px); }

    .hero,
    .hero-grid,
    .feature-grid,
    .features-grid,
    .stats-grid,
    .pricing-grid,
    .professional-grid,
    .profile-layout,
    .details-grid,
    .content-grid,
    .layout,
    .two,
    .grid.two,
    .about-grid,
    .tools-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    h1 { font-size: clamp(32px, 8vw, 56px) !important; }
    h2 { font-size: clamp(26px, 6vw, 42px) !important; }
    h3 { font-size: clamp(20px, 4.8vw, 30px) !important; }

    .hero,
    .hero-grid,
    .feature-grid,
    .features-grid,
    .stats-grid,
    .pricing-grid,
    .professional-grid,
    .profile-layout,
    .details-grid,
    .content-grid,
    .layout,
    .two,
    .grid.two,
    .about-grid,
    .tools-panel,
    .top,
    .dashboard-grid,
    .admin-grid {
        grid-template-columns: 1fr !important;
    }

    .sidebar,
    aside,
    .sticky,
    [class*="sticky"] {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .hero,
    .section,
    .page { padding-left: 20px !important; padding-right: 20px !important; }
    .hero-img,
    .hero-image,
    .profile-hero img { width: 100%; }
}

@media (max-width: 768px) {
    .container,
    .wrapper,
    .page,
    .section,
    .hero,
    .content,
    .main,
    .auth-container,
    .profile-wrap,
    .news-wrap,
    .article-wrap,
    .magazine-wrap,
    .subscription-wrap { max-width: calc(100% - 24px); }

    body { font-size: 15px; }
    p { line-height: 1.65; }

    .row,
    .top,
    .nav-row,
    .actions,
    .button-row,
    .btn-row,
    .hero-actions,
    .profile-actions,
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .btn,
    button,
    input[type="submit"],
    .btn-nav,
    .btn-pink,
    .nav-submit-onboarding,
    .hero-actions a,
    .hero-actions button,
    .profile-actions a,
    .profile-actions button {
        min-height: 44px;
    }

    .form-grid,
    .nav-form-grid,
    .check-grid,
    .nav-check-grid,
    .status-grid,
    .cards,
    .card-grid,
    .model-grid,
    .news-grid,
    .article-grid,
    .magazine-grid,
    .portfolio-grid,
    .pricing-grid,
    .features-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .card,
    [class*="card"],
    .panel,
    [class*="panel"],
    .box,
    [class*="box"],
    .modal-content,
    .nav-onboarding-box {
        border-radius: 18px !important;
    }

    .modal,
    .nav-onboarding-modal { padding: 10px !important; }
    .modal-content,
    .nav-onboarding-box {
        width: min(100%, calc(100vw - 20px)) !important;
        max-height: calc(100vh - 20px) !important;
        margin: 10px auto !important;
    }

    .portfolio-slider,
    .reel-slider,
    .horizontal-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .footer { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 576px) {
    .container,
    .wrapper,
    .page,
    .section,
    .hero,
    .content,
    .main,
    .auth-container,
    .profile-wrap,
    .news-wrap,
    .article-wrap,
    .magazine-wrap,
    .subscription-wrap { max-width: calc(100% - 20px); }

    body { font-size: 14px; }
    h1 { font-size: clamp(28px, 10vw, 42px) !important; }
    h2 { font-size: clamp(23px, 8vw, 34px) !important; }

    .hero,
    .section,
    .page,
    .main,
    .dashboard-main,
    .auth-card,
    .login-card,
    .signup-card,
    .form-card,
    .card,
    [class*="card"],
    .panel,
    [class*="panel"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .logo { font-size: 22px !important; }
    .nav-inner { padding-left: 14px !important; padding-right: 14px !important; gap: 12px !important; }
    .mobile-panel { padding-left: 18px !important; padding-right: 18px !important; max-height: calc(100vh - 70px); overflow-y: auto; }

    .nav-onboarding-head,
    .nav-onboarding-form,
    .nav-form-section { padding: 18px !important; }
    .nav-onboarding-tabs { padding-left: 18px !important; padding-right: 18px !important; }

    .table-responsive table,
    .admin-table table,
    .data-table table,
    .table-wrap table { min-width: 640px; }
}

@media (max-width: 380px) {
    .logo { font-size: 19px !important; }
    .mobile-toggle { width: 38px !important; height: 38px !important; }
    .hero,
    .section,
    .page,
    .main { padding-left: 12px !important; padding-right: 12px !important; }
}