:root {
    --astraal-emerald: #009966;
    --astraal-emerald-dark: #00695C;
    --astraal-aqua: #00BBD4;
    --astraal-aqua-dark: #008BA3;
    --astraal-surface: #FFFFFF;
    --astraal-bg: #F7FAFC;
    --astraal-border: #D5DCE3;
    --astraal-muted: #5F6B73;
    --astraal-text: #23313A;
    --astraal-radius: 16px;
    --astraal-radius-sm: 10px;
    --astraal-shadow: 0 4px 24px rgba(0, 60, 50, 0.08);
}

body {
    background: var(--astraal-bg);
    color: var(--astraal-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.astraal-gradient-text {
    background: linear-gradient(90deg, var(--astraal-emerald), var(--astraal-aqua));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.astraal-navbar {
    background: var(--astraal-surface);
    border-bottom: 1px solid var(--astraal-border);
    box-shadow: var(--astraal-shadow);
}

.astraal-navbar .brand-logo { height: 36px; }

.astraal-sidebar {
    background: var(--astraal-surface);
    border-right: 1px solid var(--astraal-border);
    min-height: calc(100vh - 60px);
}

.astraal-sidebar .nav-link {
    color: var(--astraal-muted);
    border-radius: var(--astraal-radius-sm);
    padding: 10px 14px;
    margin-bottom: 4px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.astraal-sidebar .nav-link:hover { background: var(--astraal-bg); color: var(--astraal-text); }

.astraal-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(0,153,102,0.12), rgba(0,187,212,0.10));
    color: var(--astraal-emerald-dark);
    font-weight: 600;
}

.astraal-card {
    background: var(--astraal-surface);
    border: 1px solid var(--astraal-border);
    border-radius: var(--astraal-radius);
    box-shadow: var(--astraal-shadow);
}

.astraal-kpi { border-radius: var(--astraal-radius); padding: 20px; }
.astraal-kpi .kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--astraal-text); }
.astraal-kpi .kpi-label { color: var(--astraal-muted); font-size: .85rem; }

.astraal-btn-primary {
    background: linear-gradient(90deg, var(--astraal-emerald), var(--astraal-aqua-dark));
    border: none; color: #fff; border-radius: var(--astraal-radius-sm);
    font-weight: 600;
}
.astraal-btn-primary:hover { opacity: .92; color: #fff; }

.astraal-badge-ai {
    background: rgba(0,187,212,0.12); color: var(--astraal-aqua-dark);
    border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 600;
}

.astraal-login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, rgba(0,153,102,0.06), transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(0,187,212,0.08), transparent 40%),
                var(--astraal-bg);
}

.astraal-login-card { max-width: 420px; width: 100%; padding: 40px; }

.astraal-table thead th {
    color: var(--astraal-muted); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .04em; border-bottom: 1px solid var(--astraal-border);
}

.astraal-progress { height: 8px; border-radius: 999px; background: var(--astraal-bg); }
.astraal-progress .bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--astraal-emerald), var(--astraal-aqua)); }