:root {
    --bg: rgb(52, 48, 58);
    --bg-light: rgba(255, 255, 255, 0.02);
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-hover-strong: rgba(255, 255, 255, 0.04);
    --input-bg: rgb(63, 63, 63);
    --text: white;
    --text-muted: #aaa;
    --text-dim: #ccc;
    --link: rgb(119, 205, 255);
    --border: #555;
    --scrollbar-thumb: #424242;
    --scrollbar-thumb-hover: #555;
    --overlay-bg: rgba(10, 9, 13, 0.92);
    --menu-bg: rgb(45, 42, 51);

    --accent-blue: rgb(153, 197, 255);
    --accent-blue-bg: rgba(153, 201, 255, 0.15);
    --accent-purple: rgb(205, 146, 253);
    --accent-pink: rgb(255, 153, 212);
    --accent-peach: rgb(255, 200, 186);
    --accent-mint: rgb(186, 255, 238);
    --accent-orange: rgb(255, 186, 130);
    --danger: rgb(255, 130, 130);
    --danger-bg: rgba(255, 130, 130, 0.15);
    --success: rgb(170, 255, 130);
    --like: rgb(255, 143, 195);
    --warn: rgb(255, 186, 130);
    --warn-text: rgb(255, 210, 170);

    --sidebar-width: 180px;
    --feed-max: 700px;
    --avatar-sm: 42px;
    --avatar-md: 40px;
    --avatar-lg: 70px;
    --avatar-xl: 84px;
    --badge-size: 14px;
    --banner-height: 140px;
    --transition: 0.15s ease;
}

* {
    font-family: "MS UI Gothic", "MS PGothic", sans-serif;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

a {
    color: var(--link);
}

button,
input,
textarea {
    font-family: inherit;
}

button,
a,
.like-btn,
.post-action,
.nav-link,
.btn,
.tab,
.media-item img,
.media-item video {
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition);
}