:root {
    --viewport-gap: 16px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.container {
    width: min(var(--container, 1240px), calc(100% - (var(--viewport-gap) * 2)));
    margin-left: auto;
    margin-right: auto;
}

.panel-card,
.card,
.glass-card,
.hero-panel,
.hero-side,
.announcement-card,
.feature-card,
.cta-panel,
.footer-wrap,
.wiki-modal-dialog {
    max-width: 100%;
}

.panel-card-body,
.card-body,
.table-wrap,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
}

@media (min-width: 1200px) {
    .container {
        width: min(1360px, calc(100% - (var(--viewport-gap) * 2)));
    }

    .section {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }

    .hero,
    .hero-main,
    .hero-panel {
        min-height: unset !important;
        padding: 28px !important;
    }

    .hero-shell,
    .hero-grid,
    .layout,
    .news-layout,
    .content-grid {
        gap: 18px !important;
    }

    .stats-grid,
    .showcase-grid,
    .grid,
    .wiki-card-row,
    .wiki-card-row.compact {
        gap: 16px !important;
    }

    .card,
    .panel-card,
    .announcement-card,
    .product-card,
    .detail-card,
    .stat-card,
    .feature-card,
    .glass-card,
    .cta-panel,
    .footer-wrap {
        border-radius: 22px !important;
    }

    .card-body,
    .panel-card-body,
    .product-body,
    .body,
    .stat-card,
    .hero-side,
    .side-card,
    .filter-bar {
        padding: 18px !important;
    }

    .thumb,
    .product-visual,
    .wiki-mini-media {
        height: 180px !important;
    }

    .hero h1,
    .hero-main h1,
    .hero-content h1 {
        font-size: clamp(2.8rem, 5vw, 4.8rem) !important;
    }

    .section-copy h2 {
        font-size: clamp(2rem, 4vw, 3.2rem) !important;
    }

    .hero p,
    .hero-main p,
    .hero-content p,
    .section-copy p,
    .body p,
    .product-body p {
        font-size: .96rem !important;
        line-height: 1.7 !important;
    }

    .global-header-main .container,
    .site-header .container {
        min-height: 74px !important;
    }

    .global-header-btn,
    .global-user-chip,
    .btn,
    .user-chip {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 1400px) {
    .hero-shell,
    .news-layout,
    .content-grid,
    .wiki-detail-layout,
    .wiki-home-layout {
        grid-template-columns: 1fr !important;
    }

    .stats-grid,
    .showcase-grid,
    .wiki-facts-grid,
    .wiki-relationship-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .hero-footer,
    .form-row,
    .stats-row {
        grid-template-columns: 1fr !important;
    }

    .site-header .container,
    .global-header-main .container,
    .header-actions,
    .global-header-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    :root {
        --viewport-gap: 12px;
    }

    .stats-grid,
    .showcase-grid,
    .wiki-facts-grid,
    .wiki-relationship-grid,
    .wiki-gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-panel,
    .hero-side,
    .panel-card,
    .card {
        border-radius: 22px;
    }
}

@media (max-width: 768px) {
    .utility-links,
    .global-utility-links,
    .nav,
    .global-nav,
    .header-actions,
    .global-header-actions {
        width: 100%;
    }

    .btn,
    .global-header-btn,
    .global-user-chip,
    .user-chip {
        max-width: 100%;
    }

    .panel-card,
    .card,
    .hero-panel,
    .hero-side,
    .announcement-card {
        min-width: 0;
    }
}