:root {
    color-scheme: light dark;
    --ma-focus: #14b8a6;
    --ma-surface-soft: color-mix(in srgb, var(--cyber-panel, #fff) 88%, transparent);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cyber-bg, #f5f7fb) 96%, #ffffff), var(--cyber-bg, #f5f7fb)),
        repeating-linear-gradient(90deg, rgba(127, 127, 127, .055) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(127, 127, 127, .045) 0 1px, transparent 1px 48px) !important;
}

[data-bs-theme="dark"] body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cyber-bg, #080b12) 92%, #18212f), var(--cyber-bg, #080b12)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px) !important;
}

#background {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cyber-bg, #080b12) 94%, transparent), var(--cyber-bg, #080b12)),
        repeating-linear-gradient(90deg, rgba(127, 127, 127, .05) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(0deg, rgba(127, 127, 127, .04) 0 1px, transparent 1px 46px) !important;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    transform: translateY(-160%);
    border-radius: 8px;
    background: var(--cyber-accent, #0f766e);
    color: #fff;
    padding: .65rem .9rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid color-mix(in srgb, var(--ma-focus) 65%, white);
    outline-offset: 3px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ma-focus) 78%, white);
    outline-offset: 3px;
}

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

.card,
.platform-panel,
.platform-tool-card,
.platform-stat,
.site-tool-card,
.site-feature-card {
    border-radius: 8px !important;
}

.ma-consent {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 1990;
    display: none;
    max-width: 720px;
    margin-inline: auto;
    border: 1px solid var(--cyber-line, rgba(127, 127, 127, .2));
    border-radius: 8px;
    background: var(--ma-surface-soft);
    color: var(--cyber-text, #17202a);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
    backdrop-filter: blur(16px);
}

.ma-consent.is-visible {
    display: block;
}

.ma-consent__inner {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.ma-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.ma-consent__text {
    margin: 0;
    color: var(--cyber-muted, #607080);
}

.ma-consent-reset {
    border: 0;
    background: transparent;
    color: inherit;
    padding: .5rem .75rem;
}

footer.fixed-bottom {
    position: static !important;
}

footer .nav {
    gap: .15rem;
    padding-block: .35rem;
}

footer .btn {
    white-space: normal;
}

@media (min-width: 768px) {
    .ma-consent__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}