@import url('site-bg-video.css');
@import url('file-protocol-banner.css');

    /* Site background: CSS plexus-style mesh (no stock image / watermark) */
    :root {
        --site-bg-mesh:
            radial-gradient(ellipse 90% 70% at 15% 25%, rgba(59, 107, 94, 0.22), transparent 55%),
            radial-gradient(ellipse 70% 55% at 85% 75%, rgba(40, 80, 70, 0.18), transparent 50%),
            radial-gradient(ellipse 50% 40% at 50% 10%, rgba(120, 180, 160, 0.08), transparent 45%),
            linear-gradient(165deg, #060e18 0%, #0a1628 45%, #0d1f2d 100%);
    }

    body.page-has-bg {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        background-color: #060e18;
        /* Keep negative-z canvas/pseudo layers behind all page content (Safari) */
        isolation: isolate;
    }

    /* Permanent teal crystal-glass background (whole page, behind all content) */
    #crystal-bg {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: -3;
        pointer-events: none;
        display: block;
    }

    /* Safari: negative z-index + fixed layers paint over content without this */
    html.safari #crystal-bg {
        z-index: 0;
    }

    html.safari body.page-has-bg > nav,
    html.safari body.page-has-bg > main,
    html.safari body.page-has-bg > section,
    html.safari body.page-has-bg > footer,
    html.safari body.page-has-bg > .sidebar,
    html.safari body.page-has-bg > .preloader,
    html.safari body.page-has-bg > .page-transition,
    html.safari body.page-has-bg > .skip-link {
        position: relative;
        z-index: 1;
    }

    html.safari .navbar {
        position: fixed;
        z-index: var(--z-fixed);
    }

    body.page-has-bg::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--site-bg-mesh);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* fixed attachment breaks iOS Safari — use fixed positioning only */
        background-attachment: scroll;
        /* let the crystal canvas show through */
        opacity: 0.28;
        pointer-events: none;
        z-index: -2;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }

    body.page-has-bg::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            180deg,
            var(--page-bg-tint-top, rgba(255, 255, 255, 0.88)) 0%,
            var(--page-bg-tint-bottom, rgba(249, 249, 249, 0.85)) 100%
        );
        pointer-events: none;
        z-index: -1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Safari (macOS + iOS): fixed ::before/::after often fail — paint on body */
    html.safari body.page-has-bg {
        background-image: linear-gradient(
            180deg,
            var(--page-bg-tint-top, rgba(10, 22, 40, 0.82)) 0%,
            var(--page-bg-tint-bottom, rgba(10, 18, 28, 0.88)) 100%
        ),
        var(--site-bg-mesh);
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    html.safari body:not(.dark-mode).page-has-bg,
    html.safari body[data-theme="light"].page-has-bg {
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(249, 249, 249, 0.85) 100%
        ),
        var(--site-bg-mesh);
    }

    html.safari body.page-has-bg::before,
    html.safari body.page-has-bg::after {
        display: none;
    }

    @supports (-webkit-touch-callout: none) {
        body.page-has-bg {
            background-image: linear-gradient(
                180deg,
                var(--page-bg-tint-top, rgba(10, 22, 40, 0.82)) 0%,
                var(--page-bg-tint-bottom, rgba(10, 18, 28, 0.88)) 100%
            ),
            var(--site-bg-mesh);
            background-attachment: scroll;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        body:not(.dark-mode).page-has-bg,
        body[data-theme="light"].page-has-bg {
            background-image: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.88) 0%,
                rgba(249, 249, 249, 0.85) 100%
            ),
            var(--site-bg-mesh);
        }

        body.page-has-bg::before,
        body.page-has-bg::after {
            display: none;
        }
    }

    /* Mobile / touch: avoid fixed pseudo-layer bugs — paint on body */
    @media (max-width: 1024px), (hover: none) and (pointer: coarse) {
        body.page-has-bg {
            background-image: linear-gradient(
                180deg,
                var(--page-bg-tint-top, rgba(10, 22, 40, 0.82)) 0%,
                var(--page-bg-tint-bottom, rgba(10, 18, 28, 0.88)) 100%
            ),
            var(--site-bg-mesh);
            background-attachment: scroll;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        body:not(.dark-mode).page-has-bg,
        body[data-theme="light"].page-has-bg {
            background-image: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.88) 0%,
                rgba(249, 249, 249, 0.85) 100%
            ),
            var(--site-bg-mesh);
        }

        body.page-has-bg::before,
        body.page-has-bg::after {
            display: none;
        }
    }

    body.dark-mode.page-has-bg::after,
    body[data-theme="dark"].page-has-bg::after {
        /* lighter tint so the teal crystal background shows through */
        --page-bg-tint-top: rgba(8, 16, 26, 0.45);
        --page-bg-tint-bottom: rgba(6, 12, 20, 0.55);
    }

    /* Hero / title section — same image, full strength */
    .hero.hero-plexus-bg,
    #home.hero-plexus-bg {
        background-color: #0a1628;
        background-image: none;
        position: relative;
        overflow: hidden;
    }

    #plexus-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: block;
        pointer-events: none;
    }

    .hero.hero-plexus-bg .hero-particles {
        display: none;
    }

    .hero.hero-plexus-bg .hero-content,
    .hero.hero-plexus-bg .hero-scroll-indicator {
        position: relative;
        z-index: 3;
    }

    .hero.hero-plexus-bg::before {
        z-index: 2;
    }

    .hero.hero-plexus-bg::before,
    #home.hero-plexus-bg::before {
        background: linear-gradient(
            180deg,
            rgba(0, 8, 16, 0.35) 0%,
            rgba(0, 10, 20, 0.55) 55%,
            rgba(0, 12, 22, 0.65) 100%
        );
    }

    body:not(.dark-mode).page-has-bg .hero.hero-plexus-bg::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(10, 22, 40, 0.5) 100%
        );
    }

    body.page-has-bg .about-section,
    body.page-has-bg .projects-section,
    body.page-has-bg .blog-section,
    body.page-has-bg .learn-by-role-section,
    body.page-has-bg .resources-section,
    body.page-has-bg .contact-section,
    body.page-has-bg .legal-page,
    body.page-has-bg .office-shell {
        background-color: transparent;
    }

    body.office-chat-body.page-has-bg {
        background: transparent;
    }

    body.page-has-bg .tailored-resumes-section,
    body.page-has-bg .download-section,
    body.page-has-bg .content-section {
        background-color: transparent;
    }

    body.page-has-bg .legal-container {
        background-color: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-radius: var(--border-radius, 12px);
        padding: 2rem 2.25rem;
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
        box-shadow: var(--box-shadow, 0 4px 20px rgba(0, 0, 0, 0.06));
    }

    body.dark-mode.page-has-bg .legal-container,
    body[data-theme="dark"].page-has-bg .legal-container {
        background-color: rgba(34, 34, 34, 0.9);
        border-color: var(--dark-border-color, rgba(255, 255, 255, 0.1));
    }

    body.page-has-bg .app-container {
        background-color: transparent;
    }

    body.page-has-bg .sidebar {
        background-color: rgba(243, 244, 246, 0.82);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    body[data-theme="dark"].page-has-bg .sidebar {
        background-color: rgba(31, 41, 55, 0.85);
    }

    body.page-has-bg .news-item {
        background-color: rgba(255, 255, 255, 0.92);
    }

    body[data-theme="dark"].page-has-bg .news-item {
        background-color: rgba(31, 41, 55, 0.92);
    }

    body.dark-mode.page-has-bg .about-section,
    body.dark-mode.page-has-bg .projects-section,
    body.dark-mode.page-has-bg .blog-section,
    body.dark-mode.page-has-bg .learn-by-role-section,
    body.dark-mode.page-has-bg .resources-section,
    body.dark-mode.page-has-bg .contact-section {
        background-color: transparent;
    }

    @media (prefers-reduced-motion: reduce) {
        body.page-has-bg::before {
            position: absolute;
        }
        body.page-has-bg::after {
            position: absolute;
        }
    }

    @media (min-width: 769px) {
        body.custom-cursor {
            cursor: none;
        }
        
        .custom-cursor {
            position: fixed;
            width: 40px;
            height: 40px;
            border: 2px solid rgba(255, 10, 10, 0.5);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
            transition: width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s, transform 0.1s;
            mix-blend-mode: difference;
        }
        
        .cursor-dot {
            position: fixed;
            width: 8px;
            height: 8px;
            background-color: var(--primary-color);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
            transition: transform 0.15s ease;
        }
        
        .cursor-hover {
            width: 60px;
            height: 60px;
            background-color: rgba(77, 55, 47, 0.06);
            border-color: var(--primary-color);
            mix-blend-mode: normal;
        }
        
        .cursor-down {
            width: 30px;
            height: 30px;
            background-color: rgba(255, 10, 10, 0.3);
        }
        
        .cursor-text {
            width: 5px;
            height: 30px;
            border-radius: 0;
            background-color: var(--primary-color);
            border: none;
            mix-blend-mode: normal;
        }
    }
    
    @media (max-width: 768px) {
        .custom-cursor,
        .cursor-dot {
            display: none !important;
        }
    }
    
    /* Enhanced form styling */
    .animated-input {
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .form-group {
        position: relative;
        overflow: hidden;
    }
    
    .form-group::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-color);
        transition: width 0.4s ease;
    }
    
    .input-focus::after {
        width: 100%;
    }
    
    .form-label {
        transition: transform 0.3s ease, color 0.3s ease, font-size 0.3s ease;
    }
    
    .input-focus .form-label {
        color: var(--primary-color);
    }
    
    /* Success/error message animations */
    .success-message,
    .error-container {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .success-message.active,
    .error-container.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Loading spinner style */
    .loading-spinner {
        display: none;
        margin-left: 10px;
    }
    
    /* Lazy data-src blur-up only */
    img[data-src]:not(.img-loaded) {
        opacity: 0.85;
        filter: blur(2px);
        transition: opacity 0.5s ease, filter 0.5s ease;
    }

    img[data-src].img-loaded {
        opacity: 1;
        filter: blur(0);
    }
    
    /* Enhance focus styles for better accessibility */
    :focus {
        outline: none;
    }
    
    :focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 4px;
    }
    
    /* Reduced motion media query */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    
    /* Additional Animations */
    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.05);
            opacity: 0.8;
        }
    }
    
    /* Input error styling */
    .input-error {
        border-color: var(--error-color) !important;
    }
    
    .error-message {
        color: var(--error-color);
        font-size: 0.85rem;
        margin-top: 5px;
    }
    
    /* Success message styling */
    .success-message {
        display: flex;
        padding: 20px;
        background-color: rgba(40, 167, 69, 0.1);
        border: 1px solid var(--success-color);
        border-radius: var(--border-radius);
        margin-top: 20px;
        align-items: center;
        position: relative;
    }
    
    .success-icon {
        font-size: 2rem;
        margin-right: 15px;
        color: var(--success-color);
    }
    
    .success-content {
        flex: 1;
    }
    
    .success-content h4 {
        margin-bottom: 5px;
    }
    
    .close-message {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1rem;
        color: inherit;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s;
    }
    
    .close-message:hover {
        opacity: 1;
    }
    
    /* Error container styling */
    .error-container {
        display: flex;
        padding: 20px;
        background-color: rgba(96, 18, 29, 0.067);
        border: 1px solid var(--error-color);
        border-radius: var(--border-radius);
        margin-top: 20px;
        align-items: center;
        position: relative;
    }
    
    .error-icon {
        font-size: 2rem;
        margin-right: 15px;
        color: var(--error-color);
    }
    
    .error-content {
        flex: 1;
    }
    
    .error-content h4 {
        margin-bottom: 5px;
    }
    
    /* Dark mode adjustments */
    body.dark-mode .success-message {
        background-color: rgba(40, 167, 69, 0.15);
        border-color: rgba(40, 167, 69, 0.4);
    }
    
    body.dark-mode .error-container {
        background-color: rgba(220, 53, 69, 0.15);
        border-color: rgba(220, 53, 69, 0.4);
    }
    
    /* Print styles */
    @media print {
        .navbar,
        .sidebar,
        .overlay,
        .preloader,
        .page-transition,
        .bottom-scrollbar-container,
        #back-to-top,
        .footer,
        .filter-buttons,
        .form-group button,
        .contact-social,
        .hero-scroll-indicator {
            display: none !important;
        }
        
        body {
            background-color: white !important;
            color: black !important;
        }
        
        .container {
            width: 100% !important;
            max-width: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        
        a {
            text-decoration: none !important;
            color: black !important;
        }
        
        img {
            max-width: 100% !important;
            page-break-inside: avoid;
        }
        
        h1, h2, h3, h4, h5, h6 {
            page-break-after: avoid;
            page-break-inside: avoid;
        }
        
        section {
            page-break-inside: avoid;
            break-inside: avoid;
        }
        
        .project-card-animated,
        .blog-card-animated,
        .resource-card-animated,
        .contact-item-animated,
        .profile-card-animated {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
            break-inside: avoid;
        }
    }
    
    /* Additional responsive enhancements */
    @media (max-width: 576px) {
        .hero h1 {
            font-size: 2.2rem;
        }
        
        .about-heading {
            font-size: 2.2rem;
        }
        
        .section-title {
            font-size: 1.8rem;
        }
        
        .form-grid {
            grid-template-columns: 1fr;
        }
        
        .contact-info-grid {
            grid-template-columns: 1fr;
        }
        
        .profile-card-animated,
        .project-card-animated,
        .blog-card-animated,
        .resource-card-animated {
            transform: none !important;
        }
    }
    
    /* Progressive enhancement for modern browsers */
    @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
        .navbar.scrolled {
            background-color: rgba(255, 255, 255, 0.8);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }
        
        body.dark-mode .navbar.scrolled {
            background-color: rgba(34, 34, 34, 0.8);
        }
    }

    /* ============================================================
       PLAYFUL "FUN BUT PRO" ACCENT LAYER  (site-wide, teal brand)
       Inspired by hyper-casual game UI (chunky glossy buttons,
       rounder cards, bubblier titles) but kept recruiter-friendly.
       Scoped away from the full-arcade game page.
       ============================================================ */
    :root {
        --fun-pill: 999px;
        --fun-card-radius: 22px;
        --fun-teal-glow: rgba(59, 107, 94, 0.30);
        --fun-teal-grad: linear-gradient(180deg, #4f8a79 0%, #3b6b5e 55%, #2d5247 100%);
        --fun-teal-grad-hover: linear-gradient(180deg, #5b9a88 0%, #437a6b 55%, #335f53 100%);
        --fun-pop: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    /* --- Chunky glossy primary buttons (3D press + teal glow) --- */
    body:not(.angel-fish-page) .btn:not(.btn-outline),
    body:not(.angel-fish-page) .animated-btn:not(.btn-outline),
    body:not(.angel-fish-page) .resume-btn-animated,
    body:not(.angel-fish-page) .contact-form button[type="submit"] {
        background: var(--fun-teal-grad);
        color: #fff;
        border: none;
        border-radius: var(--fun-pill);
        font-weight: 800;
        letter-spacing: 0.01em;
        box-shadow:
            0 5px 0 rgba(40, 73, 63, 0.55),
            0 12px 22px var(--fun-teal-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.38);
        transition: transform 0.16s var(--fun-pop),
                    box-shadow 0.2s ease,
                    background 0.25s ease;
    }

    body:not(.angel-fish-page) .btn:not(.btn-outline):hover,
    body:not(.angel-fish-page) .animated-btn:not(.btn-outline):hover,
    body:not(.angel-fish-page) .resume-btn-animated:hover,
    body:not(.angel-fish-page) .contact-form button[type="submit"]:hover {
        background: var(--fun-teal-grad-hover);
        color: #fff;
        transform: translateY(-3px);
        box-shadow:
            0 8px 0 rgba(40, 73, 63, 0.55),
            0 18px 30px var(--fun-teal-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.48);
    }

    body:not(.angel-fish-page) .btn:not(.btn-outline):active,
    body:not(.angel-fish-page) .animated-btn:not(.btn-outline):active,
    body:not(.angel-fish-page) .resume-btn-animated:active,
    body:not(.angel-fish-page) .contact-form button[type="submit"]:active {
        transform: translateY(2px);
        box-shadow:
            0 2px 0 rgba(40, 73, 63, 0.55),
            0 6px 14px var(--fun-teal-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    /* Outline buttons: rounder + chunkier border to match the playful set */
    body:not(.angel-fish-page) .btn-outline {
        border-radius: var(--fun-pill);
        border-width: 2.5px;
        font-weight: 800;
        transition: transform 0.16s var(--fun-pop),
                    background-color 0.25s ease,
                    color 0.25s ease;
    }
    body:not(.angel-fish-page) .btn-outline:hover {
        transform: translateY(-2px);
    }

    /* --- Pill filter / category tabs with a glossy active state --- */
    body:not(.angel-fish-page) .filter-btn,
    body:not(.angel-fish-page) .mm-cat-btn {
        border-radius: var(--fun-pill);
        font-weight: 700;
        transition: transform 0.16s var(--fun-pop),
                    box-shadow 0.2s ease,
                    background 0.25s ease,
                    color 0.2s ease;
    }
    body:not(.angel-fish-page) .filter-btn:hover,
    body:not(.angel-fish-page) .mm-cat-btn:hover {
        transform: translateY(-2px);
    }
    body:not(.angel-fish-page) .filter-btn.active,
    body:not(.angel-fish-page) .mm-cat-btn.active {
        background: var(--fun-teal-grad);
        color: #fff;
        box-shadow:
            0 4px 0 rgba(40, 73, 63, 0.5),
            0 8px 16px var(--fun-teal-glow);
    }

    /* --- Rounder, softer cards (gentle hover glow) --- */
    body:not(.angel-fish-page) .project-card,
    body:not(.angel-fish-page) .project-card-animated,
    body:not(.angel-fish-page) .blog-card-animated,
    body:not(.angel-fish-page) .resource-card,
    body:not(.angel-fish-page) .resource-card-animated,
    body:not(.angel-fish-page) .profile-card,
    body:not(.angel-fish-page) .profile-card-animated {
        border-radius: var(--fun-card-radius);
        box-shadow: 0 8px 26px rgba(20, 40, 35, 0.10);
        transition: transform 0.28s var(--fun-pop),
                    box-shadow 0.28s ease;
    }
    body:not(.angel-fish-page) .project-card:hover,
    body:not(.angel-fish-page) .project-card-animated:hover,
    body:not(.angel-fish-page) .blog-card-animated:hover,
    body:not(.angel-fish-page) .resource-card:hover,
    body:not(.angel-fish-page) .resource-card-animated:hover,
    body:not(.angel-fish-page) .profile-card-animated:hover {
        box-shadow:
            0 16px 36px rgba(20, 40, 35, 0.18),
            0 0 0 1px rgba(59, 107, 94, 0.12);
    }

    /* --- Bubblier section titles: thicker rounded underline --- */
    body:not(.angel-fish-page) .section-title::after {
        height: 6px;
        width: 84px;
        border-radius: var(--fun-pill);
        background: var(--fun-teal-grad);
        box-shadow: 0 2px 8px var(--fun-teal-glow);
    }
    body:not(.angel-fish-page) section.active .section-title::after {
        width: 120px;
    }

    /* --- Pill skill / card tags --- */
    body:not(.angel-fish-page) .card-tag {
        border-radius: var(--fun-pill);
        font-weight: 700;
    }

    /* --- Glossy 3D day/night toggle (matches teal glass site style) ---
       JS: .fa-moon in light mode, .fa-sun in dark mode */
    body:not(.angel-fish-page) .theme-toggle,
    body:not(.angel-fish-page) [data-theme-toggle],
    body:not(.angel-fish-page) #dark-mode-toggle,
    body:not(.angel-fish-page) .theme-toggle--mini,
    body:not(.angel-fish-page) .menu-btn,
    body:not(.angel-fish-page) .mini-bar-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 14px;
        border: 1px solid rgba(59, 107, 94, 0.38);
        background: linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(228, 240, 235, 0.9) 100%
        );
        box-shadow:
            0 2px 10px rgba(59, 107, 94, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition:
            transform 0.2s var(--fun-pop),
            box-shadow 0.2s ease,
            border-color 0.2s ease,
            background 0.2s ease;
    }

    body.dark-mode:not(.angel-fish-page) .theme-toggle,
    body.dark-mode:not(.angel-fish-page) [data-theme-toggle],
    body.dark-mode:not(.angel-fish-page) #dark-mode-toggle,
    body.dark-mode:not(.angel-fish-page) .theme-toggle--mini,
    body.dark-mode:not(.angel-fish-page) .menu-btn,
    body.dark-mode:not(.angel-fish-page) .mini-bar-menu-btn {
        border-color: rgba(59, 107, 94, 0.55);
        background: linear-gradient(
            165deg,
            rgba(32, 44, 40, 0.96) 0%,
            rgba(14, 22, 20, 0.98) 100%
        );
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    body:not(.angel-fish-page) .theme-toggle:hover,
    body:not(.angel-fish-page) [data-theme-toggle]:hover,
    body:not(.angel-fish-page) #dark-mode-toggle:hover,
    body:not(.angel-fish-page) .theme-toggle--mini:hover,
    body:not(.angel-fish-page) .menu-btn:hover,
    body:not(.angel-fish-page) .mini-bar-menu-btn:hover {
        transform: scale(1.06);
        border-color: rgba(59, 107, 94, 0.65);
        box-shadow:
            0 4px 14px var(--fun-teal-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    body:not(.angel-fish-page) #theme-toggle i.fa-sun,
    body:not(.angel-fish-page) #theme-toggle i.fa-moon,
    body:not(.angel-fish-page) #dark-mode-toggle i.fa-sun,
    body:not(.angel-fish-page) #dark-mode-toggle i.fa-moon,
    body:not(.angel-fish-page) [data-theme-toggle] i.fa-sun,
    body:not(.angel-fish-page) [data-theme-toggle] i.fa-moon,
    body:not(.angel-fish-page) .theme-toggle i.fa-sun,
    body:not(.angel-fish-page) .theme-toggle i.fa-moon {
        color: transparent;
        font-size: 0;
        line-height: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 26px 26px;
        width: 26px;
        height: 26px;
        display: block;
        filter: drop-shadow(0 1px 2px rgba(59, 107, 94, 0.35));
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        body:not(.angel-fish-page) #theme-toggle i.fa-sun,
        body:not(.angel-fish-page) #theme-toggle i.fa-moon,
        body:not(.angel-fish-page) #dark-mode-toggle i.fa-sun,
        body:not(.angel-fish-page) #dark-mode-toggle i.fa-moon,
        body:not(.angel-fish-page) [data-theme-toggle] i.fa-sun,
        body:not(.angel-fish-page) [data-theme-toggle] i.fa-moon,
        body:not(.angel-fish-page) .theme-toggle i.fa-sun,
        body:not(.angel-fish-page) .theme-toggle i.fa-moon {
            background-size: 26px 26px;
        }
    }

    body:not(.angel-fish-page) #theme-toggle i.fa-sun,
    body:not(.angel-fish-page) #dark-mode-toggle i.fa-sun,
    body:not(.angel-fish-page) [data-theme-toggle] i.fa-sun,
    body:not(.angel-fish-page) .theme-toggle i.fa-sun {
        background-image: url('../images/icon-sun.png');
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        body:not(.angel-fish-page) #theme-toggle i.fa-sun,
        body:not(.angel-fish-page) #dark-mode-toggle i.fa-sun,
        body:not(.angel-fish-page) [data-theme-toggle] i.fa-sun,
        body:not(.angel-fish-page) .theme-toggle i.fa-sun {
            background-image: url('../images/icon-sun@2x.png');
        }
    }

    body:not(.angel-fish-page) #theme-toggle i.fa-moon,
    body:not(.angel-fish-page) #dark-mode-toggle i.fa-moon,
    body:not(.angel-fish-page) [data-theme-toggle] i.fa-moon,
    body:not(.angel-fish-page) .theme-toggle i.fa-moon {
        background-image: url('../images/icon-moon.png');
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        body:not(.angel-fish-page) #theme-toggle i.fa-moon,
        body:not(.angel-fish-page) #dark-mode-toggle i.fa-moon,
        body:not(.angel-fish-page) [data-theme-toggle] i.fa-moon,
        body:not(.angel-fish-page) .theme-toggle i.fa-moon {
            background-image: url('../images/icon-moon@2x.png');
        }
    }

    /* Hamburger icon inside menu pill */
    body:not(.angel-fish-page) .menu-btn i,
    body:not(.angel-fish-page) .mini-bar-menu-btn i {
        font-size: 1.1rem;
        line-height: 1;
        color: var(--brand-teal, #3b6b5e);
        filter: drop-shadow(0 1px 2px rgba(59, 107, 94, 0.35));
        transition: transform 0.2s var(--fun-pop), color 0.2s ease;
    }

    body.dark-mode:not(.angel-fish-page) .menu-btn i,
    body.dark-mode:not(.angel-fish-page) .mini-bar-menu-btn i {
        color: rgba(220, 245, 238, 0.95);
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    }

    body:not(.angel-fish-page) .menu-btn:hover i,
    body:not(.angel-fish-page) .mini-bar-menu-btn:hover i {
        transform: scale(1.08);
    }

    body:not(.angel-fish-page) .menu-btn[aria-expanded="true"] i,
    body:not(.angel-fish-page) .mini-bar-menu-btn[aria-expanded="true"] i {
        color: #fff;
    }

    body:not(.angel-fish-page) .menu-btn[aria-expanded="true"],
    body:not(.angel-fish-page) .mini-bar-menu-btn[aria-expanded="true"] {
        background: var(--fun-teal-grad);
        border-color: rgba(59, 107, 94, 0.75);
        box-shadow:
            0 4px 14px var(--fun-teal-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    body:not(.angel-fish-page) .menu-btn[aria-expanded="true"]:hover,
    body:not(.angel-fish-page) .mini-bar-menu-btn[aria-expanded="true"]:hover {
        background: var(--fun-teal-grad-hover);
    }

    /* Sidebar close (×) matches teal glass controls */
    body:not(.angel-fish-page) .sidebar .close-btn {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(59, 107, 94, 0.45);
        border-radius: 12px;
        background: linear-gradient(
            165deg,
            rgba(59, 107, 94, 0.35) 0%,
            rgba(45, 82, 71, 0.5) 100%
        );
        color: #fff;
        font-size: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        transition:
            transform 0.2s var(--fun-pop),
            background 0.2s ease,
            box-shadow 0.2s ease;
    }

    body:not(.angel-fish-page) .sidebar .close-btn:hover {
        transform: scale(1.06) rotate(90deg);
        background: var(--fun-teal-grad-hover);
        box-shadow: 0 4px 12px var(--fun-teal-glow);
    }

    /* Respect reduced-motion: drop the springy transforms */
    @media (prefers-reduced-motion: reduce) {
        body:not(.angel-fish-page) .btn,
        body:not(.angel-fish-page) .animated-btn,
        body:not(.angel-fish-page) .resume-btn-animated,
        body:not(.angel-fish-page) .filter-btn,
        body:not(.angel-fish-page) .mm-cat-btn,
        body:not(.angel-fish-page) .project-card-animated,
        body:not(.angel-fish-page) .resource-card-animated,
        body:not(.angel-fish-page) .blog-card-animated,
        body:not(.angel-fish-page) .theme-toggle,
        body:not(.angel-fish-page) .menu-btn,
        body:not(.angel-fish-page) .mini-bar-menu-btn,
        body:not(.angel-fish-page) .sidebar .close-btn {
            transition: none !important;
        }
        body:not(.angel-fish-page) .theme-toggle:hover,
        body:not(.angel-fish-page) .menu-btn:hover,
        body:not(.angel-fish-page) .mini-bar-menu-btn:hover,
        body:not(.angel-fish-page) .sidebar .close-btn:hover {
            transform: none !important;
        }
    }