/* November LEGEND visual: gradients and texture frame the OA; data colors stay intact. */
#loginOverlay.gradient-login{
    display:flex;align-items:center;justify-content:space-between;gap:clamp(30px,6vw,100px);
    padding:45px max(6vw,calc((100vw - 1280px)/2));overflow:auto;
    background:linear-gradient(120deg,#332164 0%,#74236c 48%,#c82067 82%,#ed3260 100%);
    color:#fff;
}
#loginOverlay.gradient-login .login-bg{overflow:hidden}
#loginOverlay.gradient-login .login-bg::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 100% 0%,#ff8a9a34,transparent 45%),linear-gradient(0deg,#1d123535,transparent 55%);
}
#loginOverlay .gradient-collage{
    position:absolute;inset:-35% -10%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;
    gap:18px;transform:rotate(-27deg) scale(1.1);opacity:.17;pointer-events:none;
}
#loginOverlay .gradient-collage span{
    display:flex;flex-direction:column;justify-content:space-between;padding:25px;
    border:1px solid #ffffffb0;background:linear-gradient(140deg,#ffffff35,#130a3540);
    font:italic 48px/.95 Georgia,serif;letter-spacing:-.06em;color:#fff;
}
#loginOverlay .gradient-collage span:nth-child(2n){background:repeating-linear-gradient(90deg,#fff2 0 2px,transparent 2px 32px)}
#loginOverlay .gradient-collage small{font:600 8px/1.4 Inter,sans-serif;letter-spacing:.3em}
#loginOverlay.gradient-login .gradient-login-brand{position:relative;z-index:1;flex:1;min-width:0;max-width:560px}
#loginOverlay.gradient-login .gradient-login-brand img{display:block;width:min(100%,470px);height:auto;filter:drop-shadow(0 10px 22px #200e443d)}
#loginOverlay.gradient-login .gradient-login-brand small{display:block;margin:8px 0 0 4px;color:#fff;font-size:11px;letter-spacing:.3em}
#loginOverlay.gradient-login .gradient-login-brand p{margin:8px 0 0 4px;color:#f6d8ee;font-size:13px;letter-spacing:.18em}
#loginOverlay.gradient-login .login-card{
    flex:none;width:410px;max-width:100%;margin:0;padding:35px;border-radius:18px;
    border:1px solid #fff;background:#fffafdf5;color:#382341;
    box-shadow:0 30px 80px #190b3b40;backdrop-filter:blur(10px);
}
#loginOverlay.gradient-login .login-logo,#loginOverlay.gradient-login .login-subtitle{display:none}
#loginOverlay.gradient-login .login-field label{color:#63536b}
#loginOverlay.gradient-login .login-input{background:#fff;border:1px solid #dfd5e5;color:#382341;min-height:46px}
#loginOverlay.gradient-login .login-input::placeholder{color:#aea0b4}
#loginOverlay.gradient-login .login-input:focus{border-color:#ab4a95;box-shadow:0 0 0 3px #a34d961e}
#loginOverlay.gradient-login .login-btn{background:linear-gradient(105deg,#71317e,#ca286b);color:white;min-height:47px;box-shadow:0 6px 18px #a72d7129}
#loginOverlay.gradient-login .login-hint{color:#84758a}
#loginOverlay.gradient-login .login-hint a,#loginOverlay.gradient-login a.login-hint{color:#943a80!important}
#loginOverlay.gradient-login .login-error{color:#b82e55}
#loginOverlay.gradient-login #loginLangToggle{background:#ffffff1f;border:1px solid #ffffff75;color:#fff;border-radius:20px;padding:8px 14px}
#loginOverlay .login-password-wrap{position:relative}
#loginOverlay .login-password-wrap .login-input{padding-right:52px}
#loginPasswordToggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;color:#8e7895;border-radius:8px}
#loginPasswordToggle:hover{background:#f4eaf6}
#loginPasswordToggle .password-eye-slash{display:none}
#loginPasswordToggle[aria-pressed="true"] .password-eye-slash{display:block}

#mainApp.gradient-oa .sidebar{
    background:repeating-linear-gradient(135deg,transparent 0 64px,#ffffff09 65px 66px,transparent 67px 128px),
        radial-gradient(ellipse at 87% 0%,#ee477044,transparent 44%),linear-gradient(100deg,#332164,#74236c 52%,#c82067 88%,#d82b65);
    border-color:#b965ac66;box-shadow:0 5px 20px #44234b23;
}
#mainApp.gradient-oa .sidebar::before{content:'LEGEND  /  IN THE MAKING';position:absolute;right:5%;top:7px;color:#fff;font:italic 42px Georgia,serif;letter-spacing:.04em;opacity:.12;transform:rotate(-9deg);pointer-events:none;white-space:nowrap}
#mainApp.gradient-oa .sidebar-header{border-color:#ffffff36}
#mainApp.gradient-oa .console-nav-group summary{color:#f6e6f4}
#mainApp.gradient-oa .console-nav-group summary:hover,#mainApp.gradient-oa .console-nav-group[open] summary{background:#ffffff19;color:#fff}
#mainApp.gradient-oa .console-nav-group:has(.nav-item.active) summary{color:#fff;box-shadow:inset 0 -2px #ffb1d0}
#mainApp.gradient-oa .console-subnav{background:#fffbfef7;border-top:2px solid #d55793;border-bottom-color:#e9ddea}
#mainApp.gradient-oa .console-subitem{color:#74617e}
#mainApp.gradient-oa .console-subitem:hover{background:#f8eaf3}
#mainApp.gradient-oa .console-subitem.is-active{background:#f8e6f0;color:#a8317b}
#mainApp.gradient-oa .main{background:radial-gradient(ellipse at 100% 0%,#f3e1ed,transparent 45%),#f5f2f7}
#mainApp.gradient-oa .topbar{background:#fffcff;border-bottom-color:#eadfeb;box-shadow:0 3px 12px #43244d0b}
#mainApp.gradient-oa .card,#mainApp.gradient-oa .kpi-card,#mainApp.gradient-oa .revenue-card{border-color:#e9e0ec;border-radius:11px;box-shadow:0 3px 12px #40204508}
#mainApp.gradient-oa .card-header{background:#fffcfe;border-bottom-color:#eee4ef}
#mainApp.gradient-oa .legend-banner{
    background:repeating-linear-gradient(135deg,transparent 0 64px,#ffffff11 65px 66px,transparent 67px 128px),
        linear-gradient(110deg,#332164,#74236c 52%,#c82067 88%,#e9366b);
    border-color:#8b3b81;border-radius:13px;box-shadow:0 9px 26px #62255f26;
}
#mainApp.gradient-oa .legend-banner::before{color:#ffffff30}
#mainApp.gradient-oa .legend-banner::after{background:linear-gradient(110deg,transparent 42%,#ffffff12 49%,#ffffff26 50%,transparent 58%)}
#mainApp.gradient-oa .legend-eyebrow{color:#f5bedc}
#mainApp.gradient-oa .legend-banner h2{color:#fff}
#mainApp.gradient-oa .legend-banner p{color:#f5d9eb}
#mainApp.gradient-oa .legend-motion-grid{background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px)}
#mainApp.gradient-oa .legend-motion-grid::before{content:'';position:absolute;inset:-12px;background-image:radial-gradient(2px 2px at 9% 27%,#fff9 70%,transparent),radial-gradient(3px 3px at 21% 68%,#ffd6edaa 70%,transparent),radial-gradient(2px 2px at 34% 18%,#fff8 70%,transparent),radial-gradient(2px 2px at 46% 79%,#fff8 70%,transparent),radial-gradient(3px 3px at 58% 37%,#ffcfebaa 70%,transparent),radial-gradient(2px 2px at 71% 13%,#fff9 70%,transparent),radial-gradient(2px 2px at 84% 72%,#fff8 70%,transparent),radial-gradient(3px 3px at 95% 44%,#ffcfebaa 70%,transparent);animation:legend-dust-drift 28s ease-in-out infinite alternate}
@keyframes legend-dust-drift{from{transform:translate(-9px,8px);opacity:.45}to{transform:translate(12px,-10px);opacity:.9}}
#mainApp.gradient-oa .legend-banner-meta .status-label{color:#f1cfe6}
#mainApp.gradient-oa .mobile-menu-btn{background:#f8eaf3;color:#8c357a;border-color:#ead2e6}
@media(max-width:1099px){
    #mainApp.gradient-oa .sidebar{background:linear-gradient(145deg,#332164,#74236c 60%,#b92a70)}
    #mainApp.gradient-oa .sidebar .nav-item{color:#ead7e9}
    #mainApp.gradient-oa .sidebar .nav-item.active{background:#ffffff20;color:#fff}
}
@media(max-width:760px){
    #loginOverlay.gradient-login{flex-direction:column;justify-content:flex-start;gap:12px;padding:calc(76px + env(safe-area-inset-top)) 18px 28px;min-height:100dvh}
    #loginOverlay.gradient-login .gradient-login-brand{width:min(410px,100%);flex:none;text-align:center}
    #loginOverlay.gradient-login .gradient-login-brand img{width:min(230px,74vw);margin:auto}
    #loginOverlay.gradient-login .gradient-login-brand small{margin:8px 0 0;font-size:8px;letter-spacing:.18em}
    #loginOverlay.gradient-login .gradient-login-brand p{font-size:10px;margin:0;letter-spacing:.14em}
    #loginOverlay.gradient-login .login-card{width:min(410px,100%);padding:25px 22px;border-radius:15px}
    #loginOverlay.gradient-login #loginLangToggle{top:16px!important;right:16px!important}
    #loginOverlay .gradient-collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;inset:-25% -60%;opacity:.14}
}
@media(prefers-reduced-motion:reduce){#mainApp.gradient-oa .legend-banner::after,#mainApp.gradient-oa .legend-motion-grid,#mainApp.gradient-oa .legend-motion-grid::before{animation:none}}