:root {
    --bg-0: #06070a;
    --bg-1: #0b0f14;
    --bg-2: #101722;
    --panel: rgba(13, 18, 27, 0.72);
    --panel-strong: rgba(15, 21, 31, 0.86);
    --panel-soft: rgba(255, 255, 255, 0.03);
    --border: rgba(160, 196, 255, 0.12);
    --border-strong: rgba(165, 203, 255, 0.22);
    --line: rgba(255, 255, 255, 0.08);
    --text-main: #edf3ff;
    --text-muted: #97a5bd;
    --text-secondary: #7f8ca3;
    --white-soft: rgba(255, 255, 255, 0.8);
    --accent: #d47cff;
    --accent-2: #7368ff;
    --danger: #eb5a96;
    --success: #c8bdd8;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.28);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --glass-bg: rgba(255, 255, 255, 0.035);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-hover-bg: rgba(255, 255, 255, 0.055);
    --glass-hover-border: rgba(122, 226, 255, 0.25);
    --bg-pure: var(--bg-0);
    --color-admin: #ffbedf;
    --color-mod: #beffff;
    --color-success: var(--success);
    --border-subtle: var(--line);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    color: var(--text-main);
    background: radial-gradient(circle at 18% 10%, rgba(235, 90, 150, 0.07), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(115, 104, 255, 0.09), transparent 24%),
    linear-gradient(180deg, #07080b 0%, #0a0c10 34%, #050608 100%);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
}

body::before {
    background: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15));
}

body::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.02));
    opacity: 0.55;
}

#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    opacity: 0.8;
}

a {
    color: inherit;
    text-decoration: none !important;
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: rgba(122, 226, 255, 0.22);
    color: #fff;
}

@keyframes zrx-animation {
    0% {
        text-shadow: -2px -1px 0 #eb055a, 2px 1px 0 #4632f0;
    }
    12% {
        text-shadow: 1.5px -1.8px 0 #eb055a, -1.5px 1.8px 0 #4632f0;
    }
    25% {
        text-shadow: 2px 1.2px 0 #eb055a, -2px -1.2px 0 #4632f0;
    }
    37% {
        text-shadow: -1.2px 1.9px 0 #eb055a, 1.2px -1.9px 0 #4632f0;
    }
    50% {
        text-shadow: 1.8px 1.5px 0 #eb055a, -1.8px -1.5px 0 #4632f0;
    }
    62% {
        text-shadow: -2px -1px 0 #eb055a, 2px 1px 0 #4632f0;
    }
    75% {
        text-shadow: -1.5px 2px 0 #eb055a, 1.5px -2px 0 #4632f0;
    }
    87% {
        text-shadow: 1.9px -1.2px 0 #eb055a, -1.9px 1.2px 0 #4632f0;
    }
    100% {
        text-shadow: -2px -1px 0 #eb055a, 2px 1px 0 #4632f0;
    }
}

.glitch-fx {
    position: relative;
    display: inline-block;
    z-index: 1;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
}

.glitch-fx::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    animation: zrx-animation 2s linear infinite;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
    text-align: inherit;
    z-index: -1;
}

.glitch-fx.glitch-left::after {
    text-align: left;
}

.main-logo:hover .glitch-fx::after,
.main-logo:focus-visible .glitch-fx::after,
a.glass-panel:hover .glitch-fx::after,
.thread-title:hover .glitch-fx::after,
.profile-name:hover .glitch-fx::after,
.profile-card:hover .profile-name .glitch-fx::after {
    opacity: 1;
}

.profile-name .glitch-fx::after {
    opacity: 1;
}