:root{

    --bg-body:#121212;
    
    --bg-home-section-one: #191919;
    
    --bg-home-section-two: #1F1F1F;
    
    --bg-section-one: #191919;
    
    --bg-section-two: #1F1F1F;
    
    --bg-section-three: #2D2D2D;    

    --bg-header:#121212;

    --bg-sidebar:#191919;

    --bg-footer:#111827;

    --bg-card:#111827;

    --bg-soft:#1e293b;

    --bg-input:#020204;

    --bg-overlay:rgba(0,0,0,.5);

    --bg-auth-modal:#121212;
    
    --bg-primary: #dc2626;

    --text-primary:#dc2626;

    --text-secondary:rgba(255,255,255,.60);

    --text-dark:#000000;

    --color-primary:#facc15;

    --color-primary-hover:#fbbf24;

    --color-second:#dc2626;

    --color-second-hover:#ef4444;

    --border-color:rgba(255,255,255,.05);

    --icon-color:#ffffff;

    --icon-text-color:#ffffff;

    --icon-active-color:#facc15;

    --icon-text-active-color:#facc15;

    --icon-second-color:#dc2626;

    --icon-text-second-color:#dc2626;

    /* Footer Guest - sama seperti header */
    --bg-footer-guest: #121212;
    --border-footer-guest: rgba(255,255,255,.05);

    /* Footer Auth - gradient melengkung (radial spotlight abu ke hitam) */
    --bg-footer-auth-base-top: #2e2e2e;
    --bg-footer-auth-base-mid: #161616;
    --bg-footer-auth-base-bottom: #0a0a0a;
    --bg-footer-auth-spot-center: #4a4a4a;
    --bg-footer-auth-spot-mid: #1e1e1e;
    --border-footer-auth: #555555;
    
    --bg-toast: #ffffff;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

html,
body{
    width:100%;
    min-height:100%;
    font-family:'Inter',sans-serif;
}

body{
    background:var(--bg-body);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    user-select:none;
    pointer-events:none;
}

.header{
    background:var(--bg-header);
    border-color:var(--border-color);
}

.sidebar{
    background:var(--bg-sidebar);
}

.auth-modal{
    background:var(--bg-auth-modal);
}

.footer{
    background:var(--bg-footer);
    border-color:var(--border-color);
}

/* Footer Guest Menu */
.footer-guest-menu{
    background: var(--bg-footer-guest);
    border-top: 1px solid var(--border-footer-guest);
}

/* Footer Auth Menu - flat fallback, SVG gradient dihandle inline */
.footer-auth-menu{
    background: var(--bg-footer-auth-base-bottom);
}

.card{
    background:var(--bg-card);
}

.soft-bg{
    background:var(--bg-soft);
}

.input-bg{
    background:var(--bg-input);
    color:var(--text-primary);
}

.btn-primary{
    background:var(--color-primary);
    color:var(--text-dark);
}

.btn-primary:hover{
    background:var(--color-primary-hover);
}

.btn-second{
    background:var(--color-second);
    color:var(--text-primary);
}

.btn-second:hover{
    background:var(--color-second-hover);
}

.text-brand{
    color:var(--color-primary);
}

.text-secondary-color{
    color:var(--text-secondary);
}

.icon{
    color:var(--icon-color);
}

.icon svg{
    stroke:var(--icon-color);
    fill:var(--icon-color);
}

.icon-text{
    color:var(--icon-text-color);
}

.icon-active{
    color:var(--icon-active-color);
}

.icon-active svg{
    stroke:var(--icon-active-color);
    fill:var(--icon-active-color);
}

.icon-text-active{
    color:var(--icon-text-active-color);
}

.icon-second{
    color:var(--icon-second-color);
}

.icon-second svg{
    stroke:var(--icon-second-color);
    fill:var(--icon-second-color);
}

.icon-text-second{
    color:var(--icon-text-second-color);
}

.overlay-bg{
    background:var(--bg-overlay);
}

#sidebar.active{
    left:0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

    .tab-btn .tab-icon-box {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .tab-btn .tab-icon {
        filter: brightness(0) invert(1);
        opacity: 0.6;
    }

    .tab-btn .tab-label {
        color: rgba(255, 255, 255, 0.6);
    }

    .tab-btn.active-tab .tab-icon-box {
        background-color: var(--bg-primary, var(--icon-second-color, #f59e0b));
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .tab-btn.active-tab .tab-icon {
        filter: brightness(0) invert(1);
        opacity: 1;
    }

    .tab-btn.active-tab .tab-label {
        color: #ffffff;
    }
    
    .nav-menu-item .nav-icon {
        filter: brightness(0) invert(1);
    }
    .nav-menu-item .nav-label {
        color: #ffffff;
    }
    .nav-menu-item.active-nav .nav-icon {
        filter: invert(19%) sepia(86%) saturate(2829%) hue-rotate(351deg) brightness(101%) contrast(87%);
    }
    .nav-menu-item.active-nav .nav-label {
        color: #ffffff;
    }