:root {
    --ds-bg: #010516;
    --ds-surface: #090c1a;
    --ds-surface-2: #0b0f26;
    --ds-text: #d0d0ff;
    --ds-text-soft: #a0a0d0;
    --ds-border: rgba(100, 100, 255, 0.2);
    --ds-primary: #5566ff;
    --ds-primary-2: #7788ff;
    --ds-accent: #77bbff;
    --ds-accent-soft: #9ac7ff;
    --ds-glow: 0 0 12px rgba(119, 187, 255, .35);
}

body.bg-deepspace { background: var(--ds-bg); font-family: 'Segoe UI', Arial, sans-serif; }
.text-deepspace { color: var(--ds-text); }

/* Navbar — transparent + blur, matches API/account */
.deepspace-nav {
    background: transparent;
    border-bottom: 1px solid var(--ds-border);
    backdrop-filter: blur(14px);
}
.deepspace-nav .navbar-brand { color: var(--ds-accent) !important; }
.deepspace-nav .nav-link { color: #a0a0d0 !important; transition: color 0.2s; }
.deepspace-nav .nav-link:hover { color: var(--ds-accent) !important; }

/* Offcanvas (mobile) */
.deepspace-offcanvas { background: var(--ds-surface); border-left: 1px solid var(--ds-border); color: var(--ds-text); }
.deepspace-offcanvas .offcanvas-title { color: var(--ds-text); }
.deepspace-offcanvas .nav-link { color: var(--ds-text) !important; }
.deepspace-offcanvas .nav-link:hover { color: var(--ds-accent) !important; }
.deepspace-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ds-border); }
@media (max-width: 991.98px) {
    .deepspace-offcanvas .nav-item .btn { width: 100%; margin-top: .5rem; }
    .deepspace-offcanvas .navbar-nav { gap: .25rem; }
}

/* Main + footer spacing */
.deepspace-main { padding-top: 6rem; }
@media (min-width: 992px) { .deepspace-main { padding-top: 7rem; } }
.deepspace-footer { background: var(--ds-surface); color: var(--ds-text-soft); border-top: 1px solid var(--ds-border); }

/* Buttons — pill gradient, matches api-home/navbar.css */
.btn-primary {
    background: linear-gradient(90deg, var(--ds-primary), #7a80c8);
    border: none; border-radius: 25px; padding: 0.55rem 1.6rem;
    font-size: 0.95rem; font-weight: 500;
    box-shadow: 0 4px 6px rgba(0,0,0,.4);
}
.btn-primary:hover {
    background: linear-gradient(90deg, #7a80c8, var(--ds-primary));
    transform: translateY(-1px);
    box-shadow: 0 6px 9px rgba(0,0,0,.6);
}
.btn-outline-light {
    background: transparent !important; color: #f8f9fa !important;
    border: 1px solid #f8f9fa !important; border-radius: 25px;
    padding: 0.55rem 1.6rem; font-size: 0.95rem; font-weight: 500;
}
.btn-outline-light:hover {
    background: linear-gradient(45deg, #7a80c8, var(--ds-primary)) !important;
    border-color: var(--ds-primary) !important;
}
.btn-outline-danger {
    border-radius: 25px;
    padding: 0.55rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-width: 1px;
}
/* Links */
a { color: var(--ds-accent); }
a:hover { color: var(--ds-accent-soft); }

/* Surface cards */
.surface-card {
    background: radial-gradient(ellipse at top left, #090c1a 0%, #06070d 100%);
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(0, 100, 255, 0.05);
}

/* Code */
pre, code { background: #10142a; color: #c8d0ff; }
pre { border-radius: 8px; padding: 1rem; border: 1px solid var(--ds-border); }
code { border-radius: 4px; padding: .2rem .4rem; }

/* Tables */
.table { color: var(--ds-text); }
.table thead th { background: var(--ds-surface); border-bottom: 2px solid var(--ds-border); }