/* =========================================================
   UXA GLOBAL TOP LOADING BAR
========================================================= */

:root{
    --uxa-loading-color: var(--uxa-accent, #7fff00);
    --uxa-loading-height: 3px;
}

#uxaGlobalLoadingBar{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:var(--uxa-loading-height);

    z-index:999999;

    pointer-events:none;

    opacity:0;

    transform:translateY(0);

    background:transparent;

    transition:
        opacity .18s ease;
}

#uxaGlobalLoadingBar.active{
    opacity:1;
}

#uxaGlobalLoadingProgress{
    position:absolute;
    top:0;
    left:0;

    width:0%;
    height:100%;

    border-radius:0 999px 999px 0;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--uxa-loading-color) 70%,
                white
            ),
            var(--uxa-loading-color)
        );

    box-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--uxa-loading-color) 45%,
            transparent
        ),
        0 0 18px
        color-mix(
            in srgb,
            var(--uxa-loading-color) 18%,
            transparent
        );

    transition:
        width .18s cubic-bezier(.25,.8,.25,1);

}


/* =========================================================
   SHIMMER / TRAVELING LIGHT
========================================================= */

#uxaGlobalLoadingProgress::after{
    content:"";

    position:absolute;

    top:0;
    right:0;

    width:90px;
    height:100%;

    opacity:.9;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    filter:blur(1px);

    animation:
        uxaLoadingShine
        1s
        linear
        infinite;
}

@keyframes uxaLoadingShine{

    from{
        transform:translateX(20px);
        opacity:0;
    }

    35%{
        opacity:1;
    }

    to{
        transform:translateX(-90px);
        opacity:0;
    }

}


/* =========================================================
   OPTIONAL PAGE FADE
========================================================= */

body.uxa-page-transitioning
.uxa-main{
    opacity:.985;
}

body.uxa-page-transitioning{
    cursor:progress;
}


/* =========================================================
   DISABLE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    #uxaGlobalLoadingProgress{
        transition:none;
    }

    #uxaGlobalLoadingProgress::after{
        animation:none;
    }

}

/* =========================================================
   UXA
   GLOBAL CSS SYSTEM
   Compatible with:
   index.html
   Settings.html
   All future Uxa pages
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    --uxa-bg:#080909;

    --uxa-surface:#101112;

    --uxa-surface-2:#17191a;

    --uxa-surface-3:#202324;

    --uxa-text:#f5f6f6;

    --uxa-muted:#8b9191;

    --uxa-border:rgba(255,255,255,.075);

    --uxa-border-strong:rgba(255,255,255,.13);

    --uxa-accent:#7fff00;

    --uxa-danger:#ff5c68;

    --uxa-success:#39d98a;

    --uxa-warning:#ffb020;

    --uxa-info:#3ea6ff;


    /* Layout */

    --uxa-sidebar-mini:76px;

    --uxa-sidebar-open:248px;

    --uxa-header-height:66px;


    /* Shape */

    --uxa-radius:15px;

    --uxa-radius-small:10px;

    --uxa-radius-large:22px;


    /* Animation */

    --uxa-transition:.28s;

    --uxa-transition-fast:.18s;

    --uxa-ease:cubic-bezier(.22,1,.36,1);


    /* Typography */

    --uxa-font-size:16px;

}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]{

    --uxa-bg:#f4f5f5;

    --uxa-surface:#ffffff;

    --uxa-surface-2:#eceeee;

    --uxa-surface-3:#e3e5e5;

    --uxa-text:#101212;

    --uxa-muted:#6b7070;

    --uxa-border:rgba(0,0,0,.08);

    --uxa-border-strong:rgba(0,0,0,.13);

}


/* =========================================================
   GLOBAL RESET
========================================================= */

*,
*::before,
*::after{

    box-sizing:border-box;

}


html{

    width:100%;

    min-height:100%;

    margin:0;

    padding:0;

    background:var(--uxa-bg);

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:var(--uxa-bg);

    color:var(--uxa-text);

    font-family:
        Comfortaa,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:var(--uxa-font-size);

    line-height:1.5;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

    transition:
        background
        var(--uxa-transition)
        ease,

        color
        var(--uxa-transition)
        ease;

}


/* =========================================================
   FORM ELEMENTS
========================================================= */

button,
input,
textarea,
select{

    font:inherit;

}


button{

    border:0;

}


button,
a,
select{

    -webkit-tap-highlight-color:transparent;

}


button,
a{

    cursor:pointer;

}


input,
textarea,
select{

    color:var(--uxa-text);

}


input::placeholder,
textarea::placeholder{

    color:var(--uxa-muted);

}


a{

    color:inherit;

    text-decoration:none;

}


img,
video,
iframe{

    display:block;

    max-width:100%;

}


img{

    height:auto;

}


::selection{

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 30%,
            transparent
        );

    color:var(--uxa-text);

}


/* =========================================================
   HIDE SCROLLBARS
========================================================= */

html,
body,
*{

    scrollbar-width:none;

}


html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{

    width:0;

    height:0;

}


/* =========================================================
   FOCUS
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:
        2px solid
        var(--uxa-accent);

    outline-offset:2px;

}


/* =========================================================
   GLOBAL ACCESSIBILITY MODES
========================================================= */

body.uxa-large-interface{

    font-size:18px;

}


body.uxa-high-contrast{

    --uxa-border:
        color-mix(
            in srgb,
            var(--uxa-accent) 35%,
            transparent
        );

    --uxa-border-strong:
        color-mix(
            in srgb,
            var(--uxa-accent) 55%,
            transparent
        );

}


body.uxa-reduced-motion *,
body.uxa-reduced-motion *::before,
body.uxa-reduced-motion *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

    scroll-behavior:auto !important;

}


body.uxa-no-blur
.uxa-header,
body.uxa-no-blur
.uxa-notification-panel{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

}


/* =========================================================
   APP ROOT
========================================================= */

.uxa-app{

    width:100%;

    min-height:100vh;

}


/* =========================================================
   SIDEBAR
========================================================= */

.uxa-sidebar{

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    width:var(--uxa-sidebar-mini);

    display:flex;

    flex-direction:column;

    background:
        color-mix(
            in srgb,
            var(--uxa-surface) 96%,
            var(--uxa-bg)
        );

    border-right:
        1px solid
        var(--uxa-border);

    overflow:hidden;

    z-index:9000;

    contain:layout paint;

    transition:

        width
        .46s
        var(--uxa-ease),

        background
        .2s
        ease,

        box-shadow
        .25s
        ease;

}


body.uxa-sidebar-expanded
.uxa-sidebar{

    width:var(--uxa-sidebar-open);

    box-shadow:
        10px 0 50px
        rgba(0,0,0,.15);

}


/* =========================================================
   SIDEBAR BRAND
========================================================= */

.uxa-sidebar-brand{

    flex:
        0 0
        var(--uxa-header-height);

    width:100%;

    height:var(--uxa-header-height);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        0 14px;

    border-bottom:
        1px solid
        var(--uxa-border);

}


body.uxa-sidebar-expanded
.uxa-sidebar-brand{

    justify-content:flex-start;

}


.uxa-brand-link{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}


.uxa-brand-mark{

    width:40px;

    height:40px;

    min-width:40px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:var(--uxa-accent);

    color:#020202;

    font-size:17px;

    font-weight:900;

    line-height:1;

    box-shadow:
        0 0 25px
        color-mix(
            in srgb,
            var(--uxa-accent) 10%,
            transparent
        );

}


.uxa-brand-name{

    display:none;

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    color:var(--uxa-text);

    font-size:17px;

    font-weight:900;

}


body.uxa-sidebar-expanded
.uxa-brand-name{

    display:block;

}


/* =========================================================
   SIDEBAR NAV CONTAINERS
========================================================= */

.uxa-sidebar-nav{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:
        12px 9px;

}


.uxa-sidebar-bottom{

    flex:
        0 0
        auto;

    padding:
        8px 9px;

    border-top:
        1px solid
        var(--uxa-border);

}


/* =========================================================
   NAV ITEM
========================================================= */

.uxa-nav-item{

    position:relative;

    width:100%;

    height:45px;

    min-height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    margin:
        3px 0;

    padding:0;

    border-radius:12px;

    background:transparent;

    color:var(--uxa-muted);

    transition:

        background
        var(--uxa-transition-fast)
        ease,

        color
        var(--uxa-transition-fast)
        ease,

        transform
        var(--uxa-transition-fast)
        ease;

}


.uxa-nav-item:hover{

    background:var(--uxa-surface-2);

    color:var(--uxa-text);

}


.uxa-nav-item:active{

    transform:scale(.985);

}


.uxa-nav-item.active{

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 10%,
            var(--uxa-surface-2)
        );

    color:var(--uxa-accent);

}


/* =========================================================
   NAV ICON
========================================================= */

.uxa-nav-icon{

    width:21px;

    min-width:21px;

    height:21px;

    display:grid;

    place-items:center;

    font-size:15px;

    line-height:1;

}


.uxa-nav-icon i{

    display:block;

    width:15px;

    text-align:center;

}


/* =========================================================
   NAV TEXT
========================================================= */

.uxa-nav-text{

    display:none;

    min-width:0;

    flex:1;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:10px;

    font-weight:650;

}


body.uxa-sidebar-expanded
.uxa-nav-item{

    justify-content:flex-start;

    padding:
        0 12px;

}


body.uxa-sidebar-expanded
.uxa-nav-text{

    display:block;

}


/* =========================================================
   COLLAPSED HOVER
========================================================= */

body:not(.uxa-sidebar-expanded)
.uxa-nav-item{

    isolation:isolate;

}


body:not(.uxa-sidebar-expanded)
.uxa-nav-item:hover{

    background:transparent;

}


body:not(.uxa-sidebar-expanded)
.uxa-nav-item:hover::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:44px;

    height:44px;

    transform:
        translate(-50%,-50%);

    border-radius:12px;

    background:
        color-mix(
            in srgb,
            var(--uxa-surface-2) 90%,
            var(--uxa-accent)
        );

    opacity:.95;

    z-index:-1;

}


/* =========================================================
   SIDEBAR TOGGLE
========================================================= */

.uxa-sidebar-toggle{

    position:fixed;

    top:50%;

    left:
        calc(
            var(--uxa-sidebar-mini) - 19px
        );

    width:38px;

    height:38px;

    padding:0;

    transform:
        translateY(-50%);

    display:grid;

    place-items:center;

    border:
        1px solid
        var(--uxa-border-strong);

    border-radius:50%;

    background:
        var(--uxa-surface);

    color:var(--uxa-muted);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.2);

    z-index:12000;

    cursor:pointer;

    transition:

        left
        .46s
        var(--uxa-ease),

        background
        .18s
        ease,

        color
        .18s
        ease,

        border-color
        .18s
        ease,

        transform
        .16s
        ease;

}


body.uxa-sidebar-expanded
.uxa-sidebar-toggle{

    left:
        calc(
            var(--uxa-sidebar-open) - 19px
        );

}


.uxa-sidebar-toggle:hover{

    background:
        var(--uxa-surface-2);

    color:
        var(--uxa-accent);

    border-color:
        color-mix(
            in srgb,
            var(--uxa-accent) 35%,
            var(--uxa-border-strong)
        );

}


.uxa-sidebar-toggle:active{

    transform:
        translateY(-50%)
        scale(.92);

}


.uxa-sidebar-toggle i{

    font-size:9px;

    pointer-events:none;

}


/* =========================================================
   MOBILE OVERLAY
========================================================= */

.uxa-mobile-overlay{

    display:none;

}


/* =========================================================
   MAIN
========================================================= */

.uxa-main{

    width:100%;

    min-width:0;

    min-height:100vh;

    margin-left:
        var(--uxa-sidebar-mini);

    position:relative;

    transition:
        margin-left
        .46s
        var(--uxa-ease);

}


body.uxa-sidebar-expanded
.uxa-main{

    margin-left:
        var(--uxa-sidebar-open);

}


/* =========================================================
   HEADER
========================================================= */

.uxa-header{

    position:sticky;

    top:0;

    width:100%;

    height:
        var(--uxa-header-height);

    min-height:
        var(--uxa-header-height);

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        10px 22px;

    background:
        color-mix(
            in srgb,
            var(--uxa-bg) 88%,
            transparent
        );

    border-bottom:
        1px solid
        var(--uxa-border);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    z-index:8000;

}


.uxa-mobile-menu{

    display:none;

    width:40px;

    height:40px;

    min-width:40px;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    background:
        var(--uxa-surface);

    color:
        var(--uxa-muted);

    cursor:pointer;

}


.uxa-mobile-menu:hover{

    color:
        var(--uxa-accent);

}


/* =========================================================
   SEARCH
========================================================= */

.uxa-search{

    position:relative;

    width:
        min(
            680px,
            100%
        );

    z-index:10000;

}


.uxa-search-box{

    width:100%;

    height:42px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        0 14px;

    border:
        1px solid
        var(--uxa-border);

    border-radius:12px;

    background:
        var(--uxa-surface);

    color:
        var(--uxa-muted);

    transition:
        border-color
        .18s
        ease,

        box-shadow
        .18s
        ease;

}


.uxa-search-box:focus-within{

    border-color:
        color-mix(
            in srgb,
            var(--uxa-accent) 35%,
            var(--uxa-border)
        );

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--uxa-accent) 5%,
            transparent
        );

}


.uxa-search-box input{

    width:100%;

    min-width:0;

    border:0;

    outline:0;

    background:transparent;

    color:
        var(--uxa-text);

    font-size:10px;

}


.uxa-search-box input::placeholder{

    color:
        var(--uxa-muted);

}


/* =========================================================
   SEARCH DROPDOWN
========================================================= */

.uxa-search-dropdown{

    position:absolute;

    top:
        calc(
            100% + 8px
        );

    left:0;

    right:0;

    max-height:440px;

    overflow:auto;

    padding:8px;

    border:
        1px solid
        var(--uxa-border);

    border-radius:15px;

    background:
        var(--uxa-surface);

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.28);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(-8px);

    transition:

        opacity
        .2s
        ease,

        visibility
        .2s
        ease,

        transform
        .26s
        var(--uxa-ease);

}


.uxa-search-dropdown.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0);

}


.uxa-search-result{

    width:100%;

    min-height:48px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        7px 9px;

    margin:
        2px 0;

    border-radius:10px;

    background:transparent;

}


.uxa-search-result:hover{

    background:
        var(--uxa-surface-2);

}


.uxa-search-result-icon{

    width:32px;

    height:32px;

    min-width:32px;

    display:grid;

    place-items:center;

    border-radius:9px;

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 9%,
            var(--uxa-surface-2)
        );

    color:
        var(--uxa-accent);

}


.uxa-search-result-copy{

    min-width:0;

    flex:1;

}


.uxa-search-result-copy strong{

    display:block;

    font-size:9px;

}


.uxa-search-result-copy span{

    display:block;

    margin-top:3px;

    color:
        var(--uxa-muted);

    font-size:7px;

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.uxa-header-actions{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:6px;

}


.uxa-header-action{

    position:relative;

    width:41px;

    height:41px;

    min-width:41px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:
        var(--uxa-surface);

    color:
        var(--uxa-muted);

    cursor:pointer;

    transition:

        background
        .18s
        ease,

        color
        .18s
        ease,

        transform
        .15s
        ease;

}


.uxa-header-action:hover{

    background:
        var(--uxa-surface-2);

    color:
        var(--uxa-accent);

}


.uxa-header-action:active{

    transform:
        scale(.94);

}


/* =========================================================
   NOTIFICATION BADGE
========================================================= */

.uxa-notification-badge{

    position:absolute;

    top:4px;

    right:4px;

    min-width:16px;

    height:16px;

    padding:
        0 4px;

    display:grid;

    place-items:center;

    border-radius:5px;

    background:
        var(--uxa-accent);

    color:#000;

    font-size:7px;

    font-weight:900;

    line-height:1;

    opacity:0;

    transform:
        scale(.5);

    transition:

        opacity
        .18s
        ease,

        transform
        .22s
        var(--uxa-ease);

}


.uxa-notification-badge:not(:empty){

    opacity:1;

    transform:
        scale(1);

}


/* =========================================================
   NOTIFICATION PANEL
========================================================= */

.uxa-notification-panel{

    position:fixed;

    top:74px;

    right:22px;

    width:360px;

    max-width:
        calc(
            100vw - 26px
        );

    max-height:520px;

    overflow:auto;

    padding:8px;

    border:
        1px solid
        var(--uxa-border);

    border-radius:17px;

    background:
        color-mix(
            in srgb,
            var(--uxa-surface) 97%,
            transparent
        );

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.28);

    z-index:15000;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(-10px)
        scale(.98);

    transition:

        opacity
        .22s
        ease,

        visibility
        .22s
        ease,

        transform
        .3s
        var(--uxa-ease);

}


.uxa-notification-panel.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);

}


.uxa-notification-panel-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px;

    border-bottom:
        1px solid
        var(--uxa-border);

}


.uxa-notification-eyebrow{

    display:block;

    margin-bottom:3px;

    color:
        var(--uxa-accent);

    font-size:6px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.uxa-notification-panel-head strong{

    font-size:10px;

}


.uxa-notification-panel-head button{

    padding:
        5px 7px;

    border-radius:7px;

    background:transparent;

    color:
        var(--uxa-accent);

    font-size:7px;

    cursor:pointer;

}


.uxa-notification-panel-head button:hover{

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 8%,
            transparent
        );

}


.uxa-notification-list{

    min-width:0;

}


.uxa-notification-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:
        11px 9px;

    border-radius:11px;

    opacity:0;

    transform:
        translateY(6px);

    transition:

        opacity
        .25s
        ease,

        transform
        .28s
        var(--uxa-ease),

        background
        .15s
        ease;

}


.uxa-notification-panel.show
.uxa-notification-item{

    opacity:1;

    transform:
        translateY(0);

}


.uxa-notification-item:hover{

    background:
        var(--uxa-surface-2);

}


.uxa-notification-icon{

    width:35px;

    height:35px;

    min-width:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 9%,
            var(--uxa-surface-2)
        );

    color:
        var(--uxa-accent);

}


.uxa-notification-content{

    min-width:0;

    flex:1;

}


.uxa-notification-content strong{

    display:block;

    font-size:8px;

}


.uxa-notification-content span{

    display:block;

    margin-top:4px;

    color:
        var(--uxa-muted);

    font-size:7px;

    line-height:1.5;

}


/* =========================================================
   CONTENT
========================================================= */

.uxa-content{

    width:100%;

    min-width:0;

    padding:26px;

}


/* =========================================================
   HOME HERO
========================================================= */

.uxa-home-hero{

    position:relative;

    min-height:430px;

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(260px,.75fr);

    align-items:center;

    gap:30px;

    padding:42px;

    overflow:hidden;

    border:
        1px solid
        var(--uxa-border);

    border-radius:24px;

    background:

        radial-gradient(
            circle at 85% 50%,
            color-mix(
                in srgb,
                var(--uxa-accent) 15%,
                transparent
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            var(--uxa-surface-2),
            var(--uxa-surface)
        );

}


.uxa-home-hero-copy{

    position:relative;

    z-index:3;

}


.uxa-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:
        var(--uxa-accent);

    font-size:8px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.uxa-home-hero h1{

    max-width:760px;

    margin:
        12px 0 14px;

    color:
        var(--uxa-text);

    font-size:
        clamp(
            34px,
            5vw,
            64px
        );

    line-height:1.02;

    letter-spacing:-.035em;

}


.uxa-home-hero p{

    max-width:650px;

    margin:0;

    color:
        var(--uxa-muted);

    font-size:11px;

    line-height:1.8;

}


.uxa-home-actions{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:24px;

}


/* =========================================================
   HOME BUTTONS
========================================================= */

.uxa-primary-button,
.uxa-secondary-button{

    min-height:43px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:
        0 16px;

    border-radius:11px;

    font-size:9px;

    font-weight:800;

    transition:

        transform
        .18s
        ease,

        background
        .18s
        ease,

        color
        .18s
        ease,

        border-color
        .18s
        ease;

}


.uxa-primary-button{

    background:
        var(--uxa-accent);

    color:#050505;

}


.uxa-primary-button:hover{

    transform:
        translateY(-2px);

}


.uxa-secondary-button{

    border:
        1px solid
        var(--uxa-border-strong);

    background:
        rgba(255,255,255,.02);

    color:
        var(--uxa-text);

}


.uxa-secondary-button:hover{

    background:
        var(--uxa-surface-3);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.uxa-hero-visual{

    position:relative;

    min-height:330px;

    display:grid;

    place-items:center;

}


.uxa-hero-orb{

    position:relative;

    width:180px;

    height:180px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 30% 25%,
            #c8ff9b,
            var(--uxa-accent) 35%,
            #3a6900 72%,
            #172500 100%
        );

    box-shadow:

        0 0 75px
        color-mix(
            in srgb,
            var(--uxa-accent) 25%,
            transparent
        );

    animation:
        uxaOrbFloat
        5s
        ease-in-out
        infinite;

}


.uxa-hero-orb span{

    font-size:74px;

    font-weight:900;

    color:#050505;

}


@keyframes uxaOrbFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}


.uxa-orbit{

    position:absolute;

    width:280px;

    height:280px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--uxa-accent) 18%,
            transparent
        );

    border-radius:50%;

}


.uxa-orbit-one{

    transform:
        rotate(28deg)
        scaleX(.55);

    animation:
        uxaOrbitOne
        8s
        linear
        infinite;

}


.uxa-orbit-two{

    transform:
        rotate(-28deg)
        scaleX(.55);

    animation:
        uxaOrbitTwo
        11s
        linear
        infinite;

}


@keyframes uxaOrbitOne{

    to{
        transform:
            rotate(388deg)
            scaleX(.55);
    }

}


@keyframes uxaOrbitTwo{

    to{
        transform:
            rotate(-388deg)
            scaleX(.55);
    }

}


.uxa-floating-icon{

    position:absolute;

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border:
        1px solid
        var(--uxa-border-strong);

    border-radius:13px;

    background:
        color-mix(
            in srgb,
            var(--uxa-surface) 90%,
            transparent
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:
        var(--uxa-accent);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.18);

}


.uxa-float-one{

    top:28px;
    left:16%;

}


.uxa-float-two{

    right:8%;
    top:32%;

}


.uxa-float-three{

    left:10%;
    bottom:14%;

}


.uxa-float-four{

    right:18%;
    bottom:5%;

}


/* =========================================================
   GENERIC SECTION
========================================================= */

.uxa-section{

    margin-top:34px;

}


.uxa-section-head{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:16px;

    margin-bottom:15px;

}


.uxa-section-head > div > span{

    display:block;

    color:
        var(--uxa-accent);

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.uxa-section-head h2{

    margin:
        5px 0 0;

    color:
        var(--uxa-text);

    font-size:21px;

    line-height:1.2;

}


.uxa-section-link{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:
        var(--uxa-muted);

    font-size:8px;

}


.uxa-section-link:hover{

    color:
        var(--uxa-accent);

}


/* =========================================================
   MODE SELECTOR
========================================================= */

.uxa-mode-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:11px;

}


.uxa-mode-card{

    min-height:150px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-end;

    gap:7px;

    padding:18px;

    border:
        1px solid
        var(--uxa-border);

    border-radius:
        var(--uxa-radius);

    background:
        var(--uxa-surface);

    color:
        var(--uxa-text);

    text-align:left;

    cursor:pointer;

    transition:

        transform
        .22s
        var(--uxa-ease),

        background
        .2s
        ease,

        border-color
        .2s
        ease;

}


.uxa-mode-card:hover{

    transform:
        translateY(-3px);

    background:
        var(--uxa-surface-2);

}


.uxa-mode-card.is-active{

    border-color:
        color-mix(
            in srgb,
            var(--uxa-accent) 35%,
            var(--uxa-border)
        );

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 7%,
            var(--uxa-surface)
        );

}


.uxa-mode-icon{

    width:40px;

    height:40px;

    display:grid;

    place-items:center;

    margin-bottom:auto;

    border-radius:11px;

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 9%,
            var(--uxa-surface-2)
        );

    color:
        var(--uxa-accent);

}


.uxa-mode-card strong{

    font-size:10px;

}


.uxa-mode-card > span:last-child{

    color:
        var(--uxa-muted);

    font-size:8px;

    line-height:1.5;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.uxa-feature-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:11px;

}


.uxa-feature-card{

    position:relative;

    min-width:0;

    min-height:155px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    gap:12px;

    padding:18px;

    border:
        1px solid
        var(--uxa-border);

    border-radius:
        var(--uxa-radius);

    background:
        var(--uxa-surface);

    transition:

        transform
        .22s
        var(--uxa-ease),

        background
        .2s
        ease,

        border-color
        .2s
        ease;

}


.uxa-feature-card:hover{

    transform:
        translateY(-4px);

    background:
        var(--uxa-surface-2);

    border-color:
        color-mix(
            in srgb,
            var(--uxa-accent) 27%,
            var(--uxa-border)
        );

}


.uxa-feature-icon{

    width:40px;

    height:40px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:
        color-mix(
            in srgb,
            var(--uxa-accent) 9%,
            var(--uxa-surface-2)
        );

    color:
        var(--uxa-accent);

}


.uxa-feature-card strong{

    display:block;

    font-size:10px;

}


.uxa-feature-card span{

    display:block;

    margin-top:5px;

    color:
        var(--uxa-muted);

    font-size:8px;

    line-height:1.6;

}


.uxa-card-arrow{

    position:absolute;

    right:17px;

    bottom:18px;

    color:
        var(--uxa-muted);

    font-size:9px;

    transition:

        transform
        .18s
        ease,

        color
        .18s
        ease;

}


.uxa-feature-card:hover
.uxa-card-arrow{

    transform:
        translateX(3px);

    color:
        var(--uxa-accent);

}


/* =========================================================
   AI FEATURE
========================================================= */

.uxa-ai-feature{

    background:
        radial-gradient(
            circle at 90% 10%,
            color-mix(
                in srgb,
                var(--uxa-accent) 11%,
                transparent
            ),
            transparent 35%
        ),
        var(--uxa-surface);

}


/* =========================================================
   TRENDING
========================================================= */

.uxa-trending-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:11px;

}


.uxa-trending-card{

    min-width:0;

    overflow:hidden;

    border:
        1px solid
        var(--uxa-border);

    border-radius:
        var(--uxa-radius);

    background:
        var(--uxa-surface);

}


.uxa-trending-placeholder{

    aspect-ratio:
        16 / 9;

    display:grid;

    place-items:center;

    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--uxa-accent) 11%,
                var(--uxa-surface-2)
            ),
            var(--uxa-surface)
        );

    color:
        var(--uxa-accent);

    font-size:20px;

}


.uxa-trending-info{

    padding:12px;

}


.uxa-trending-info strong{

    display:block;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:9px;

}


.uxa-trending-info span{

    display:block;

    margin-top:4px;

    color:
        var(--uxa-muted);

    font-size:7px;

}


/* =========================================================
   ADVERTISEMENT
========================================================= */

.uxa-ad{

    min-height:110px;

    margin-top:34px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    border:
        1px dashed
        var(--uxa-border-strong);

    border-radius:
        var(--uxa-radius);

    background:
        color-mix(
            in srgb,
            var(--uxa-surface) 94%,
            transparent
        );

    color:
        var(--uxa-muted);

}


.uxa-ad span{

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.12em;

}


.uxa-ad strong{

    color:
        var(--uxa-text);

    font-size:11px;

}


.uxa-ad small{

    font-size:7px;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .uxa-home-hero{

        grid-template-columns:1fr;

        min-height:auto;

        padding:30px;

    }


    .uxa-hero-visual{

        min-height:280px;

    }


    .uxa-mode-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }


    .uxa-feature-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }


    .uxa-trending-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}


/* =========================================================
   MOBILE SIDEBAR
========================================================= */

@media(max-width:700px){

    .uxa-sidebar{

        width:245px;

        transform:
            translateX(-102%);

        box-shadow:
            18px 0 50px
            rgba(0,0,0,.3);

        transition:
            transform
            .38s
            var(--uxa-ease);

    }


    body.uxa-mobile-sidebar-open
    .uxa-sidebar{

        transform:
            translateX(0);

    }


    .uxa-main,
    body.uxa-sidebar-expanded
    .uxa-main{

        margin-left:0 !important;

    }


    .uxa-sidebar-toggle{

        display:none;

    }


    .uxa-mobile-menu{

        display:flex;

    }


    .uxa-mobile-overlay{

        position:fixed;

        inset:0;

        display:block;

        background:
            rgba(0,0,0,.45);

        backdrop-filter:blur(3px);

        -webkit-backdrop-filter:blur(3px);

        z-index:8999;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:

            opacity
            .25s
            ease,

            visibility
            .25s
            ease;

    }


    body.uxa-mobile-sidebar-open
    .uxa-mobile-overlay{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }


    .uxa-header{

        padding:
            10px 13px;

    }


    .uxa-content{

        padding:16px;

    }


    .uxa-notification-panel{

        right:12px;

        width:
            min(
                360px,
                calc(
                    100vw - 24px
                )
            );

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:500px){

    .uxa-header{

        padding:
            10px;

    }


    .uxa-content{

        padding:12px;

    }


    .uxa-home-hero{

        padding:22px;

        border-radius:18px;

    }


    .uxa-home-hero h1{

        font-size:34px;

    }


    .uxa-home-actions{

        flex-direction:column;

    }


    .uxa-primary-button,
    .uxa-secondary-button{

        width:100%;

    }


    .uxa-mode-grid{

        grid-template-columns:1fr;

    }


    .uxa-feature-grid{

        grid-template-columns:1fr;

    }


    .uxa-trending-grid{

        grid-template-columns:1fr;

    }


    .uxa-section-head{

        align-items:flex-start;

        flex-direction:column;

    }


    .uxa-section-link{

        margin-top:2px;

    }


    .uxa-notification-panel{

        right:10px;

    }

}


/* =========================================================
   REDUCED MOTION PREFERENCE
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }


    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}