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

:root {
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-data: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --status-online: #34d399;
    --status-offline: #f87171;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --border-anim-color: rgba(255, 255, 255, 0.95);
    --border-anim-color-soft: rgba(163, 224, 255, 0);
}

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

html[data-theme="dark"] {
    --bg-0: #070c14;
    --bg-1: #0d1826;
    --glass-fill: rgba(255, 255, 255, 0.055);
    --glass-fill-strong: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-strong: rgba(255, 255, 255, 0.26);
    --glass-highlight: rgba(255, 255, 255, 0.35);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --text-primary: #eef2f6;
    --text-secondary: #ffffff;
    --text-muted: #6c7c8c;
    --panel-recess: #050a10;
    --grad-warm: linear-gradient(135deg, #5e392c, #3f251c);
    --grad-cool: linear-gradient(135deg, #233c50, #162736);
}

body {
    font-family: var(--font-ui);
    background: var(--bg-0);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: background .5s var(--ease), color .5s var(--ease);
}

.liquid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg-1);
    opacity: 0.4;
}

.liquid-bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    animation: drift 30s ease-in-out infinite alternate;
    will-change: transform;
}

.liquid-bg span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    left: -10%;
    top: -12%;
}

.liquid-bg span:nth-child(2) {
    width: 40vw;
    height: 40vw;
    right: -8%;
    top: 6%;
    animation-delay: -6s;
}

.liquid-bg span:nth-child(3) {
    width: 36vw;
    height: 36vw;
    left: 20%;
    bottom: -18%;
    animation-delay: -12s;
}

@keyframes drift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(4%, 6%) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-bg span {
        animation: none;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border-strong);
    border-radius: 8px;
}

.glass {
    background: var(--glass-fill);
    backdrop-filter: blur(0px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
}

.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, var(--glass-highlight), transparent 40%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
}

@keyframes rotate-border {
    to { --border-angle: 360deg; }
}

.glass,
.panel,
.lane-form,
.lane-btn,
.back-button,
.badge-lane,
.camera-status,
.clear-btn,
.snapshot-placeholder,
.camera-video-wrapper,
.gps-canvas {
    contain: paint;
}

.glass::after,
.panel::after,
.lane-form::after,
.lane-btn::after,
.back-button::after,
.badge-lane::after,
.camera-status::after,
.clear-btn::after,
.snapshot-placeholder::after,
.camera-video-wrapper::after,
.gps-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(from var(--border-angle), transparent 0deg, var(--border-anim-color) 26deg, var(--border-anim-color-soft) 60deg, transparent 140deg, transparent 220deg, var(--border-anim-color) 300deg, transparent 340deg, transparent 360deg);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-border 8s linear infinite;
    pointer-events: none;
    z-index: 2;
    transform: translateZ(0);
    backface-visibility: hidden;
}

body.is-scrolling .glass,
body.is-scrolling .camera-placeholder {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.is-scrolling .glass::after,
body.is-scrolling .panel::after,
body.is-scrolling .lane-form::after,
body.is-scrolling .lane-btn::after,
body.is-scrolling .back-button::after,
body.is-scrolling .badge-lane::after,
body.is-scrolling .camera-status::after,
body.is-scrolling .clear-btn::after,
body.is-scrolling .snapshot-placeholder::after,
body.is-scrolling .camera-video-wrapper::after,
body.is-scrolling .gps-canvas::after,
body.is-scrolling .liquid-bg span {
    animation-play-state: paused;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #62d1ff;
    outline-offset: 2px;
}

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