/* ===== Material Symbols ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ===== Base ===== */
body {
    background-color: #0b1326;
    color: #cac4cf;
    min-height: max(884px, 100dvh);
    overflow-x: hidden;
}

/* ===== Glassmorphism ===== */
.glass-panel {
    background: rgba(19, 27, 46, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(83, 209, 255, 0.1);
}

/* ===== Glow Effects ===== */
.glow-soft {
    box-shadow: 0 0 20px rgba(83, 209, 255, 0.15);
}
.glow-neon {
    box-shadow: 0 0 15px rgba(83, 209, 255, 0.4);
}
.glow-neon-strong {
    box-shadow: 0 0 25px rgba(83, 209, 255, 0.6);
}
.neon-glow,
.neon-text-glow,
.neon-border {
    text-shadow: 0 0 10px rgba(83, 209, 255, 0.5);
}

/* ===== Text Gradient ===== */
.text-gradient-primary {
    background: linear-gradient(to right, #53d1ff, #ffb0cd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Tags ===== */
.tag-neon {
    border: 1px solid rgba(83, 209, 255, 0.3);
    box-shadow: 0 0 8px rgba(83, 209, 255, 0.1);
}

/* ===== Terminal Cursor ===== */
.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background-color: #53d1ff;
    vertical-align: text-top;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    50% { opacity: 0; }
}

/* ===== Navigation Drawer ===== */
#nav-overlay {
    transition: opacity 0.3s ease;
}
#nav-overlay.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}
#nav-drawer {
    transition: transform 0.3s ease;
}
#nav-drawer.drawer-closed {
    transform: translateX(100%);
}

/* Active drawer nav link */
.nav-drawer-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #64748b;
    padding: 1rem 2rem;
    border-left: 4px solid transparent;
    transition: all 0.3s ease-in-out;
}
.nav-drawer-link:hover {
    background: rgba(83, 209, 255, 0.05);
    color: rgba(83, 209, 255, 0.8);
}
.nav-drawer-link.nav-active {
    background: rgba(83, 209, 255, 0.1);
    color: #53d1ff;
    border-left-color: #53d1ff;
    box-shadow: inset 10px 0 15px -10px rgba(83, 209, 255, 0.2);
    font-weight: 700;
}