:root {

    --fh-blue:#0077c8;
    --fh-dark:#0f172a;
    --fh-bg:#f4f8fb;
    --fh-card:#ffffff;
    --fh-border:#dbe7f0;
    --fh-text:#1f2937;
    --fh-muted:#64748b;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:var(--fh-bg);
    color:var(--fh-text);
    overflow:hidden;

}

.app{

    display:grid;
    grid-template-columns:240px 1fr;
    height:100vh;

}

/* Sidebar */

.sidebar{

    background:white;
    border-right:1px solid var(--fh-border);
    padding:30px 20px;
    overflow-y:auto;
    z-index:30;

}

.sidebar-backdrop{

    position:fixed;
    inset:0;
    z-index:20;
    background:rgba(15,23,42,.38);
    backdrop-filter:blur(2px);

}

.mobile-menu-toggle{

    display:none;

}

.brand{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:32px;
    font-weight:bold;
    color:var(--fh-blue);
    margin-bottom:40px;
    text-align:center;

}

.brand-wordmark{

    width:80px;
    margin-right: -14%;
    margin-bottom: -7px;
    height:auto;
    display:block;

}

.brand-title{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

}

.brand-title-icon{

    width:32px;
    height:auto;
    display:block;

}

.sidebar-nav{

    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:hidden;

}

.menu-breadcrumbs{

    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:10px;

}

.menu-crumb{

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    padding:2px 10px;
    background:var(--menu-solid,#f8fbfd);
    color:#111827;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:bold;
    text-align:left;
    transition:.2s;

}

.menu-crumb::before{

    content:"‹";
    font-size:18px;
    line-height:1;

}

.menu-crumb:hover,
.menu-crumb:focus{

    border-color:rgba(0,0,0,.16);
    background:var(--menu-solid,#e7f4fd);
    outline:none;

}

.menu-panel{

    position:relative;
    min-height:220px;
    overflow:hidden;

}

.menu-list{

    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    transition:transform .22s ease, opacity .22s ease;

}

.menu-list-exit-left{

    position:absolute;
    inset:0;
    transform:translateX(-110%);
    opacity:0;
    pointer-events:none;

}

.menu-list-enter-right{

    transform:translateX(110%);
    opacity:0;

}

.nav-group{

    position:relative;

}

.nav-item{

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    text-decoration:none;
    color:var(--fh-text);
    background:var(--menu-gradient,transparent);
    padding:14px;
    border-radius:10px;
    transition:.2s;

}

.nav-item:hover,
.nav-item.active{

    background:var(--menu-gradient,#e7f4fd);
    color:var(--fh-blue);

}

.category-featured,
.category-home{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(234, 179, 8, .22) 59%, rgba(234, 179, 8, .72) 100%);
    --menu-solid:rgb(234 179 8 / 50%);

}

.category-dashboard{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(0, 119, 200, .22) 59%, rgba(0, 119, 200, .72) 100%);
    --menu-solid:rgb(0 119 200 / 50%);

}

.category-integrations{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(255, 138, 3, .22) 59%, rgba(255, 138, 3, .72) 100%);
    --menu-solid:rgb(255 138 3 / 50%);

}

.category-support{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(152, 154, 156, .22) 59%, rgba(152, 154, 156, .72) 100%);
    --menu-solid:rgb(152 154 156 / 50%);

}

.category-reports{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(168, 85, 247, .22) 59%, rgba(168, 85, 247, .72) 100%);
    --menu-solid:rgb(168 85 247 / 50%);

}

.category-troubleshooting{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(239, 68, 68, .22) 59%, rgba(239, 68, 68, .72) 100%);
    --menu-solid:rgb(239 68 68 / 50%);

}

.category-onboarding{

    --menu-gradient:radial-gradient(140% 260% at 0% 100%, rgba(248, 251, 253, 1) 0%, rgba(248, 251, 253, 1) 58%, rgba(34, 197, 94, .22) 59%, rgba(34, 197, 94, .72) 100%);
    --menu-solid:rgb(34, 197, 94);

}

.submenu{

    max-height:0;
    overflow:hidden;
    padding-left:14px;
    opacity:0;
    transition:.2s;

}

.submenu-item{

    min-height:0;

}

.submenu a{

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    position:relative;
    padding:0 14px;
    border-left:2px solid var(--fh-border);
    color:var(--fh-muted);
    font-size:14px;
    line-height:1.4;
    text-decoration:none;
    transition:.2s;

}

.has-submenu{

    position:relative;

}

.has-submenu::after{

    content:"";
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    opacity:.65;
    transform:rotate(-45deg);
    transition:.2s;
    margin-left:auto;

}

.nav-item.category-featured:not(.has-submenu)::after{

    content:"★";
    margin-left:auto;
    color:#111827;
    font-size:16px;
    line-height:1;
    animation:slow-spin 8s linear infinite;

}

@keyframes slow-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.has-submenu::before{

    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    left:5px;
    width:3px;
    border-radius:999px;
    background:var(--fh-blue);
    opacity:0;
    transform:scaleY(.4);
    transition:.2s;

}

.has-submenu:hover,
.has-submenu:focus{

    box-shadow:inset 0 0 0 1px rgba(0,119,200,.12);

}

.is-open > .has-submenu{

    color:var(--fh-blue);

}

.is-open > .has-submenu::after{

    transform:rotate(45deg);

}

.is-open > .has-submenu::before{

    opacity:1;
    transform:scaleY(1);

}

.nav-group.is-open > .submenu,
.submenu-item.is-open > .submenu{

    max-height:700px;
    opacity:1;
    padding-top:6px;
    padding-bottom:4px;

}

.nav-group.is-open > .submenu > a,
.nav-group.is-open > .submenu > .submenu-item > a,
.submenu-item.is-open > .submenu > a,
.submenu-item.is-open > .submenu > .submenu-item > a{

    padding-top:8px;
    padding-bottom:8px;

}

.submenu .submenu{

    padding-left:16px;

}

.submenu a:hover,
.submenu a:focus{

    border-color:var(--fh-blue);
    color:var(--fh-blue);
    outline:none;

}

/* Main */

.main{

    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    overflow:hidden;

}

.main::before{

    content:"";
    position:absolute;
    inset:-45vmax;
    z-index:0;
    background-image:url("images/ActivityIcons_Circular_ForLightBkgd.png");
    background-repeat:repeat;
    background-size:220px 220px;
    opacity:.13;
    transform:rotate(-14deg);
    animation:icon-drift 42s linear infinite;
    pointer-events:none;

}

.topbar,
.video-shell,
.video-nav{

    z-index:1;

}

.topbar{

    z-index:5;

}

@keyframes icon-drift{

    from{

        background-position:0 0;

    }

    to{

        background-position:440px -660px;

    }

}

/* Search */

.topbar{

    position:absolute;
    top:25px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

}

.user-area-toggle{

    position:absolute;
    right:24px;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:1px solid var(--fh-border);
    border-radius:50%;
    padding:0;
    background:white;
    color:var(--fh-text);
    cursor:pointer;
    font-weight:bold;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.2s;

}

.user-area-toggle:hover,
.user-area-toggle:focus{

    border-color:var(--fh-blue);
    color:var(--fh-blue);
    outline:none;

}

.user-avatar-image,
.profile-preview{

    width:100%;
    height:100%;
    object-fit:cover;

}

.user-avatar-fallback,
.profile-fallback{

    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    background:var(--fh-blue);
    color:white;
    font-weight:bold;

}

.search{

    width:500px;
    max-width:70vw;

    padding:14px 20px;

    border:1px solid var(--fh-border);
    border-radius:999px;

    font-size:15px;

}

.search:focus{

    outline:none;
    border-color:var(--fh-blue);

}

.search-results{

    position:absolute;
    top:58px;
    width:500px;
    max-width:70vw;
    display:grid;
    gap:6px;
    padding:8px;
    border:1px solid var(--fh-border);
    border-radius:16px;
    background:white;
    box-shadow:0 18px 45px rgba(15,23,42,.14);
    z-index:12;

}

.search-results[hidden]{

    display:none;

}

.search-result{

    width:100%;
    border:1px solid transparent;
    border-radius:10px;
    padding:11px 13px;
    background:var(--menu-gradient,#f8fbfd);
    color:var(--fh-text);
    cursor:pointer;
    font:inherit;
    text-align:left;

}

.search-result:hover,
.search-result:focus{

    border-color:var(--fh-blue);
    color:var(--fh-blue);
    outline:none;

}

/* Video */

.video-shell{

    position:relative;

    width:min(390px,90vw);

    aspect-ratio:9/16;

    border-radius:30px;

    overflow:visible;

    background:black;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.video-shell video{

    width:100%;
    height:100%;
    object-fit:fill;
    border-radius:inherit;

}

.video-poster-overlay{

    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    opacity:1;
    pointer-events:none;
    transition:opacity .55s ease;

}

.video-poster-overlay.is-hidden{

    opacity:0;

}

/* Bottom Text */

.video-info{

    position:absolute;

    bottom:0;
    left:0;
    right:0;
    z-index:2;

    color:white;

    padding:24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.8),
        rgba(0,0,0,0)
    );
    border-bottom-right-radius:inherit;
    border-bottom-left-radius:inherit;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .35s ease, transform .35s ease;

}

.video-shell.is-playing .video-info{

    opacity:0;
    pointer-events:none;
    transform:translateY(12px);

}

.video-info h2{

    margin-bottom:8px;

}

.video-info p{

    line-height:1.5;
    font-size:14px;

}

/* Right Buttons */

.actions{

    position:absolute;

    right:-90px;
    bottom:100px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

}

.logo-1{
    width: 32px;
    margin-bottom: -4px;
}

.logo-2{
    width: 30px;
}

.logo-3{
    width: 45px;
    margin-left: -7px;
}

.logo-4{
    width: 50px;
    margin-left: -10px;
}

.action-btn{

    width:55px;
    height:55px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:white;

    font-size:22px;

    transition:.2s;

    box-shadow:0 8px 25px rgba(0,0,0,.2);

}

.action-btn:hover{

    background:var(--fh-blue);
    color:white;

}

.action-btn.is-saved{

    background:var(--fh-blue);
    color:white;

}

.actions span{

    font-size:12px;
    color:var(--fh-muted);

    margin-bottom:10px;

}

/* Bottom Buttons */

.video-nav{

    position:absolute;

    bottom:30px;

    display:flex;
    gap:12px;

}

.pill{

    border:none;

    padding:12px 18px;

    border-radius:999px;

    cursor:pointer;

    background:white;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.2s;

}

.pill:hover{

    background:var(--fh-blue);
    color:white;

}

.pill:disabled{

    opacity:.45;
    cursor:not-allowed;

}

.pill:disabled:hover{

    background:white;
    color:var(--fh-text);

}

.user-panel{

    position:absolute;
    top:88px;
    right:30px;
    z-index:15;
    width:min(360px,calc(100vw - 280px));
    max-height:calc(100vh - 140px);
    overflow:auto;
    padding:18px;
    border:1px solid var(--fh-border);
    border-radius:16px;
    background:white;
    box-shadow:0 20px 60px rgba(15,23,42,.18);

}

.form-status{

    min-height:18px;
    color:var(--fh-blue);
    font-size:13px;
    font-weight:bold;

}

.user-panel-header{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;

}

.panel-label{

    margin-bottom:4px;
    color:var(--fh-muted);
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;

}

.user-panel h2{

    font-size:22px;

}

.panel-close{

    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid var(--fh-border);
    border-radius:999px;
    background:white;
    cursor:pointer;
    font-size:22px;
    line-height:1;

}

.user-form{

    display:grid;
    gap:12px;
    margin-bottom:22px;

}

.avatar-editor{

    display:grid;
    grid-template-columns:64px 1fr;
    gap:14px;
    align-items:center;

}

.profile-avatar-preview{

    width:64px;
    height:64px;
    border-radius:50%;
    overflow:hidden;

}

.user-form label{

    display:grid;
    gap:6px;
    color:var(--fh-muted);
    font-size:13px;
    font-weight:bold;

}

.user-form input{

    width:100%;
    border:1px solid var(--fh-border);
    border-radius:10px;
    padding:11px 12px;
    font:inherit;
    color:var(--fh-text);

}

.saved-section h3{

    margin-bottom:10px;
    font-size:16px;

}

.saved-list{

    display:grid;
    gap:10px;

}

.saved-item{

    position:relative;

}

.saved-video,
.remove-saved{

    border:1px solid var(--fh-border);
    border-radius:10px;
    padding:10px 12px;
    background:#f8fbfd;
    color:var(--fh-text);
    cursor:pointer;
    font:inherit;
    text-align:left;

}

.saved-video{

    width:100%;
    min-height:42px;
    padding-right:58px;
    background:var(--menu-gradient,#f8fbfd);

}

.saved-video:hover,
.saved-video:focus{

    border-color:var(--fh-blue);
    color:var(--fh-blue);
    outline:none;

}

.remove-saved{

    position:absolute;
    top:0;
    right:0;
    bottom:0;
    display:grid;
    place-items:center;
    width:46px;
    border-color:#dc2626;
    border-radius:10px;
    background:#dc2626;
    color:white;
    font-size:22px;
    font-weight:bold;
    line-height:1;
    text-align:center;

}

.remove-saved:hover,
.remove-saved:focus{

    background:#b91c1c;
    border-color:#b91c1c;
    outline:none;

}

.empty-state{

    color:var(--fh-muted);
    font-size:14px;

}

/* Mobile */

@media(max-width:850px){

    .app{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:min(320px,86vw);
        padding:24px 18px;
        border-right:1px solid var(--fh-border);
        box-shadow:16px 0 40px rgba(15,23,42,.18);
        transform:translateX(-105%);
        transition:transform .24s ease;

    }

    body.menu-open .sidebar{

        transform:translateX(0);

    }

    .mobile-menu-toggle{

        position:absolute;
        left:16px;
        display:grid;
        place-items:center;
        width:44px;
        height:44px;
        border:1px solid var(--fh-border);
        border-radius:999px;
        background:white;
        color:var(--fh-text);
        cursor:pointer;
        font-size:22px;
        line-height:1;
        box-shadow:0 8px 20px rgba(15,23,42,.08);

    }

    .user-area-toggle{

        right:16px;
        width:44px;
        height:44px;
        padding:0;

    }

    .mobile-menu-toggle:focus{

        outline:2px solid var(--fh-blue);
        outline-offset:2px;

    }

    .brand{

        margin-bottom:24px;

    }

    .menu-panel{

        min-height:calc(100vh - 180px);

    }

    .actions{

        right:12px;
        bottom:92px;
        z-index:2;

    }

    .action-btn{

        width:48px;
        height:48px;
        font-size:20px;

    }

    .actions span{

        color:white;
        text-shadow:0 1px 8px rgba(0,0,0,.45);

    }

    .search{

        width:min(72vw,420px);

    }

    .search-results{

        width:min(72vw,420px);
        max-width:72vw;

    }

    .main{

        padding:86px 18px 84px;

    }

    .video-shell{

        width:min(calc((100vh - 176px) * 0.5625),92vw);
        width:min(calc((100dvh - 176px) * 0.5625),92vw);
        border-radius:24px;

    }

    .video-nav{

        bottom:24px;

    }

    .user-panel{

        position:fixed;
        top:auto;
        right:12px;
        bottom:86px;
        left:12px;
        width:auto;
        max-height:58vh;
        border-radius:16px;

    }

}