:root {
    --sg-black: #0C0C0E;
    --sg-surface-1: #161618;
    --sg-surface-2: #232328;
    --sg-border: #2E2E36;
    --sg-purple-deep: #7B2FBE;
    --sg-purple: #A855F7;
    --sg-purple-light: #C084FC;
    --sg-yellow: #F5C400;
    --sg-white: #FAFAFA;
    --sg-muted: #A0A0A8;
    --sg-dim: #52525C;
}

body {
    background-color: var(--sg-black);
    color: var(--sg-white);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

.bg-surface-1 { background-color: var(--sg-surface-1); }
.bg-surface-2 { background-color: var(--sg-surface-2); }
.border-sg { border: 1px solid var(--sg-border); }

.text-purple { color: var(--sg-purple); }
.text-yellow { color: var(--sg-yellow); }
.text-muted { color: var(--sg-muted); }

.btn-primary {
    background: linear-gradient(135deg, var(--sg-purple-deep), var(--sg-purple));
    border: none;
    color: white;
}

.btn-outline-primary {
    border: 1px solid var(--sg-purple);
    color: var(--sg-purple);
}

.card {
    background-color: var(--sg-surface-1);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

/* Sidebar e Nav */
.sidebar {
    width: 280px;
    height: 100vh;
    position: fixed;
    background-color: var(--sg-surface-1);
    border-right: 1px solid var(--sg-border);
}

.main-content {
    margin-left: 280px;
    padding: 20px;
}

@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; margin-bottom: 70px; }
    .bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: var(--sg-surface-1);
        border-top: 1px solid var(--sg-border);
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        z-index: 1000;
    }
}