:root {
    --bg-main: #f8f4e8;
    --bg-soft: #fffdf7;
    --ink: #1f2f32;
    --ink-muted: #607477;
    --line: #d9d2c3;
    --accent: #0d9488;
    --accent-strong: #0b766c;
    --accent-alt: #d97706;
    --card-bg: rgba(255, 255, 255, 0.78);
    --shadow: 0 18px 40px rgba(27, 42, 49, 0.14);
    --radius-lg: 22px;
    --radius-md: 14px;
    --bg-radial-a: #ffffff;
    --bg-radial-b: #ffe7bf;
    --bg-grad-a: #f8f4e8;
    --bg-grad-b: #f3f8f2;
    --bg-grad-c: #f7efe1;
    --grid-color: rgba(41, 59, 61, 0.03);
    --mesh-opacity: 0.45;
    --surface-1: rgba(255, 255, 255, 0.62);
    --surface-border: rgba(72, 96, 92, 0.16);
    --field-bg: #fffcf5;
    --logs-bg: #f6fffd;
    --card-border: rgba(70, 95, 98, 0.17);
    --transition-theme: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-theme="dark"] {
    --bg-main: #0c1318;
    --bg-soft: #111c24;
    --ink: #e2f0f2;
    --ink-muted: #9ab6bb;
    --line: #2a3e44;
    --accent: #1cb0a2;
    --accent-strong: #149084;
    --accent-alt: #e58e22;
    --card-bg: rgba(17, 28, 36, 0.82);
    --shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
    --bg-radial-a: #143342;
    --bg-radial-b: #3e2f1d;
    --bg-grad-a: #070f14;
    --bg-grad-b: #0d1a23;
    --bg-grad-c: #111923;
    --grid-color: rgba(144, 176, 183, 0.08);
    --mesh-opacity: 0.28;
    --surface-1: rgba(12, 21, 29, 0.72);
    --surface-border: rgba(130, 160, 166, 0.22);
    --field-bg: #0d1a23;
    --logs-bg: #0d2028;
    --card-border: rgba(120, 152, 158, 0.24);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 12%, var(--bg-radial-a) 0%, transparent 42%),
        radial-gradient(circle at 88% 22%, var(--bg-radial-b) 0%, transparent 40%),
        linear-gradient(140deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 50%, var(--bg-grad-c) 100%);
    overflow-x: hidden;
    transition: background var(--transition-theme), color var(--transition-theme);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: -3;
}

body::after {
    content: "";
    position: fixed;
    inset: -30%;
    background:
        radial-gradient(circle at 18% 34%, rgba(13, 148, 136, 0.25) 0%, transparent 44%),
        radial-gradient(circle at 78% 72%, rgba(217, 119, 6, 0.2) 0%, transparent 40%);
    opacity: var(--mesh-opacity);
    pointer-events: none;
    z-index: -4;
    animation: meshFlow 18s ease-in-out infinite alternate;
}

#navbarMount,
#controlPanelMount,
#modalReportMount {
    display: block;
}

.container {
    max-width: 1250px;
    margin: 26px auto 48px;
    padding: 0 24px;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}

.container.top-layout {
    grid-template-columns: minmax(0, 1fr);
}

.page-body {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    align-content: start;
}

.site-footer {
    max-width: 1250px;
    margin: 0 auto 26px;
    padding: 0 24px 20px;
}

@media (max-width: 980px) {
    .container {
        grid-template-columns: 1fr;
        margin-top: 18px;
        padding: 0 14px 18px;
    }

    .site-footer {
        padding: 0 14px 14px;
    }
}