/* Base theme tokens, reset and global background */
:root {
    --color-bg: #0a0a0a;
    --color-panel: rgba(255, 255, 255, 0.04);
    --color-panel-strong: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-text: #ffffff;
    --color-muted: rgba(255, 255, 255, 0.64);
    --color-faint: rgba(255, 255, 255, 0.42);
    --color-primary: #667eea;
    --color-primary-strong: #764ba2;
    --color-success: #34d399;
    --color-danger: #f87171;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --container-xl: 1400px;
}

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

html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Inter", "Segoe UI", sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

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

main,
section,
article,
aside,
header,
footer,
nav,
div {
    min-width: 0;
}

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

pre,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

pre {
    overflow-x: auto;
}

table {
    max-width: 100%;
}

.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

.animated-bg::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: bgScroll 20s linear infinite;
}

@keyframes bgScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

::selection {
    background: rgba(102, 126, 234, 0.38);
    color: #fff;
}

@media (max-width: 680px) {
    body {
        font-size: 15px;
    }

    .container,
    .settings-container,
    .admin-container,
    .admin-shell,
    .blogs-container,
    .message-detail-container,
    .media-container,
    .media-shell,
    .messages-container,
    .waf-container,
    .waf-shell,
    .lab-security-container,
    .lab-security-shell,
    .dashboard-container,
    .profile-container,
    .user-dashboard,
    .lab-report-page {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        width: max-content;
        min-width: 680px;
    }

    .stats-grid,
    .settings-grid,
    .feature-editor-grid,
    .form-grid,
    .filter-panel,
    .report-grid,
    .content-grid,
    .content-band,
    .about-band,
    .profile-grid,
    .dashboard-grid,
    .main-grid,
    .split-grid {
        grid-template-columns: 1fr !important;
    }

    .page-header,
    .dashboard-hero,
    .waf-hero,
    .lab-security-hero,
    .section-heading,
    .inline-heading,
    .admin-bar,
    .toolbar,
    .filter-bar,
    .search-box,
    .actions-row,
    .hero-actions,
    .cta-buttons {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .page-header > *,
    .dashboard-hero > *,
    .waf-hero > *,
    .lab-security-hero > *,
    .admin-bar > *,
    .toolbar > *,
    .filter-bar > *,
    .search-box > *,
    .actions-row > * {
        min-width: 0;
    }

    .search-box,
    .filter-bar {
        width: 100%;
    }

    .search-box input,
    .search-box select,
    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
        width: 100%;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .action-btn,
    .btn-action,
    .download-btn,
    .search-btn {
        max-width: 100%;
        white-space: normal;
    }
}