:root {
    --bg: rgba(9, 12, 18, 0.82);
    --panel: rgba(20, 24, 33, 0.9);
    --panel2: rgba(17, 21, 30, 0.82);
    --stroke: rgba(255, 255, 255, 0.12);
    --stroke2: rgba(255, 255, 255, 0.2);
    --text: rgba(245, 248, 255, 0.92);
    --muted: rgba(245, 248, 255, 0.62);
    --muted2: rgba(245, 248, 255, 0.42);
    --accent: rgba(104, 196, 255, 0.95);
    --danger: rgba(255, 96, 96, 0.95);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --radius: 14px;
    --radius2: 10px;
    --font:
        ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
        sans-serif;
}

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

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 16px;
    border-radius: var(--radius2);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
    user-select: none;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

.btn:active {
    transform: scale(0.98);
}

.btn-close {
    background: rgba(255, 96, 96, 0.1);
    border-color: rgba(255, 96, 96, 0.25);
    color: rgba(255, 220, 220, 0.95);
    font-weight: bold;
}

.btn-close:hover {
    background: rgba(255, 96, 96, 0.2);
    border-color: rgba(255, 96, 96, 0.35);
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}
