: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;
    --primary-hover:color-mix(in srgb, var(--primary) 60%, transparent);
    --bg-primary:var(--primary);
    --text-primary:var(--primary);
    --text-secondary:rgba(255,255,255,.60);
    --text-dark:#000000;
    --color-second:var(--primary);
    --color-second-hover:color-mix(in srgb, var(--primary) 60%, transparent);
    --border-color:rgba(255,255,255,.05);
    --icon-color:#ffffff;
    --icon-text-color:#ffffff;
    --icon-active-color:var(--primary);
    --icon-text-active-color:var(--primary);
    --icon-second-color:var(--primary);
    --icon-text-second-color:var(--primary);
    --bg-footer-guest: #121212;
    --border-footer-guest: rgba(255,255,255,.05);
    --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{
    background: var(--bg-footer-guest);
    border-top: 1px solid var(--border-footer-guest);
}

.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(--primary);
    color:var(--text-dark);
}

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

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

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

.text-brand{
    color:var(--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:currentColor;
    fill:currentColor;
}

.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-svg{
    color: #ffffff;
}

.nav-menu-item .nav-label{
    color: #ffffff;
}

.nav-menu-item.active-nav .nav-svg{
    color: var(--text-primary);
}

.nav-menu-item.active-nav .nav-label{
    color: var(--text-primary);
}