:root {
    --night-sky: #060d1a;
    --star-light: #a594d0;
    --white-hot: #ede8ff;
    --cosmic-grid: rgba(165, 148, 208, 0.2);
    --glass-dark: rgba(6, 13, 26, 0.55);
}

[id] { scroll-margin-top: 150px; }

html {
    background-color: var(--night-sky);
}

body {
    background-color: var(--night-sky);
    color: white;
    scrollbar-color: auto transparent;
}

.glass {
    color: white;
    background: var(--cosmic-grid);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--cosmic-grid);
}

.glass-dark {
    color: white;
    background: var(--glass-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-glass {
    background: rgba(6, 13, 26, 0.6);
}

.share-contact-btn:focus,
.share-contact-btn:focus-visible,
.share-contact-btn:active,
.share-contact-btn:disabled,
.beacon-crew-btn:focus,
.beacon-crew-btn:focus-visible,
.beacon-crew-btn:active,
.beacon-crew-btn:disabled {
    opacity: 1;
    box-shadow: none;
    border-color: var(--cosmic-grid) !important;
    background: rgba(165, 148, 208, 0.20) !important;
    outline: none;
}

.modal-check {
    color: var(--star-light);
    font-size: 1.1rem;
    filter: drop-shadow(0 0 4px rgba(165, 148, 208, 0.7));
}

.btn-glass {
    color: white;
    background: rgba(165, 148, 208, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--cosmic-grid);
}

.btn-glass:hover {
    color: white;
    background: rgba(165, 148, 208, 0.35);
}

.btn-glass-success {
    background: rgba(40, 167, 69, 0.25);
}

.btn-glass-success:hover {
    background: rgba(40, 167, 69, 0.45);
}

.btn-glass-danger {
    background: rgba(220, 53, 69, 0.25);
}

.btn-glass-danger:hover {
    background: rgba(220, 53, 69, 0.45);
}

.dropdown-menu-glass {
    color: white;
    background: var(--cosmic-grid);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--cosmic-grid);
}

.dropdown-menu-glass .dropdown-item {
    color: white;
}

.dropdown-menu-glass .dropdown-item:hover,
.dropdown-menu-glass .dropdown-item:focus {
    background: rgba(165, 148, 208, 0.20);
    color: white;
}

.glass-no-blur {
    color: white;
    background: rgba(165, 148, 208, 0.10);
    border: 1px solid var(--cosmic-grid);
}

.border-grid {
    --bs-border-color: var(--cosmic-grid);
    --bs-border-width: 1px;
    --bs-offcanvas-border-color: var(--cosmic-grid);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--cosmic-grid);
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 9999px;
}

a, a:hover,
.nav-link, .nav-link:hover {
    color: var(--star-light);
}

.collapse, .collapsing {
    transition: none !important;
}

.no-caret::after {
    display: none !important;
}

.rounded-card {
    border-radius: 16px !important;
}

.btn-transparent {
    color: white;
    background-color: transparent;
    border: none;
}

.glow-on-focus:has(:focus),
.glow-on-focus:focus {
    outline: none;
    border-color: var(--white-hot) !important;
    box-shadow: 0 0 10px var(--white-hot) !important;
    border: none;
}

.popover-dark {
    --bs-popover-bg: #212529;
    --bs-popover-header-bg: #343a40;
    --bs-popover-header-color: #fff;
    --bs-popover-body-color: #fff;
    --bs-popover-border-color: #495057;
    --bs-popover-arrow-border: #495057;
}

.help-block, .form-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-bar::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.search-form {
    max-width: 576px;
}

.feeder {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.feeder-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--star-light);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%   { box-shadow: 0 0 4px 4px rgba(165, 148, 208, 0.2); }
    50%  { box-shadow: 0 0 16px 8px rgba(165, 148, 208, 0.5); }
    100% { box-shadow: 0 0 4px 4px rgba(165, 148, 208, 0.2); }
}

.profile-tabs .nav-link {
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    padding: 1rem 1.5rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.profile-tabs .nav-link:hover {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.3);
}
.profile-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(to top, rgba(165, 148, 208, 0.2) 0%, rgba(165, 148, 208, 0.05) 25%, transparent 50%);
    border-bottom: 2px solid var(--star-light);
    text-shadow: 0 0 10px rgba(165, 148, 208, 0.8);
}