/* ===== nova-plus: mod menu + settings revamp, New UI ===== */

/* ---------- mod: stats, quick buttons, tabs ---------- */
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.mstat{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--macc,var(--acc)) 12%,var(--s1)),var(--s1) 70%)}
.mstat b{display:block;font-family:var(--f-head);font-size:1.5rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.mstat span{display:block;margin-top:2px;color:var(--dim);font-size:.78rem;font-weight:600}
.mq{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--s1)}
.mq.stick{position:sticky;top:calc(var(--top) + 8px);z-index:5;box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.mq-b,.sx-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:var(--s2);color:var(--text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,transform .12s,color .12s}
.mq-b:hover,.sx-pill:hover{background:var(--s3);border-color:var(--macc,var(--acc))}
.mq-b:active,.sx-pill:active{transform:scale(.95)}
.mq-b.on,.sx-pill.on{background:var(--macc,var(--acc));border-color:transparent;color:var(--on)}
.mq-b.warn{color:#ff9a9a}
.mq-b i{font-style:normal;line-height:1}
.mq-b small{opacity:.75;font-weight:700;font-size:.72rem}
body.mtab-pills #mtabs{border-bottom:0;gap:6px;flex-wrap:wrap;margin-bottom:16px}
body.mtab-pills #mtabs .mtab{padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:var(--s1)}
body.mtab-pills #mtabs .mtab:hover{border-color:var(--macc,var(--acc))}
body.mtab-pills #mtabs .mtab.on{background:var(--macc,var(--acc));color:var(--on);border-color:transparent}
body.mtab-pills #mtabs .mtab.on::after{display:none}
body.mod-wide #page-mod{max-width:none}
body.mod-compact #page-mod .mrow{padding-top:6px;padding-bottom:6px}
body.mod-compact #page-mod .mlog{padding-top:6px;padding-bottom:6px}
#page-mod .mlist{border-radius:16px}

/* ---------- mod: logs + client panes ---------- */
.mlog{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.87rem}
.mlog:last-child{border-bottom:0}
.mlog time{color:var(--faint);font-variant-numeric:tabular-nums;font-size:.78rem;white-space:nowrap;margin-left:auto}
.mlog b{font-weight:700}
.mlog .tag{padding:2px 9px;border-radius:99px;background:var(--s3);font-size:.72rem;font-weight:700}
.mlog .tag.bad{background:rgba(255,90,90,.16);color:#ff9a9a}
.mlog .det{flex-basis:100%;color:var(--dim);font-size:.8rem;word-break:break-word}
.mc-chips{display:flex;flex-wrap:wrap;gap:8px}
.mc-col{display:flex;align-items:center;gap:8px;flex:none}

/* ---------- settings ---------- */
body.sx #page-settings .sets{max-width:900px}
.sx-bar{position:sticky;top:calc(var(--top) + 6px);z-index:6;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px;padding:10px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--s1) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sx-search{flex:1 1 180px;min-width:150px;height:34px;border-radius:99px;border:1px solid var(--line);background:var(--s2);color:var(--text);padding:0 14px;font:inherit;font-size:.85rem;outline:0}
.sx-search:focus{border-color:var(--acc)}
.sx-search::placeholder{color:var(--faint)}
body.sx #page-settings .sbox{border-radius:18px;overflow:hidden}
body.sx #page-settings .sbox h2{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%)}
body.sx #page-settings .sbox h2::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
body.sx #page-settings .srow{transition:background .12s}
body.sx #page-settings .srow:hover{background:color-mix(in srgb,var(--s2) 55%,transparent)}
.sx-hide{display:none !important}
.sx-none{padding:28px 20px;border:1px dashed var(--line);border-radius:18px;color:var(--dim);text-align:center}

/* ---------- New UI (body.ui2) ---------- */
#ui2edge{display:none}
body.ui2{--top:74px}
body.ui2::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60vw 50vh at 10% -10%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),radial-gradient(50vw 50vh at 100% 110%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%)}
body.ui2 .top{top:10px;left:12px;right:12px;height:52px;padding:0 10px 0 16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--s1) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 12px 34px -18px rgba(0,0,0,.7)}
body.ui2 #menuBtn{display:none}
body.ui2 .top .wm{display:inline-flex}
body.ui2.pinned .top{left:12px}
body.ui2.pinned .main{margin-left:0}
body.ui2.pinned .crumb{border-left:1px solid var(--line);padding-left:12px;margin-left:4px}
body.ui2 .main{padding-bottom:112px}
html body.ui2 #drawer{top:auto !important;bottom:14px !important;left:50% !important;right:auto !important;width:auto !important;height:auto !important;max-width:calc(100vw - 24px) !important;transform:translateX(-50%) !important;flex-direction:row !important;align-items:center;padding:8px !important;border:1px solid var(--line);border-radius:22px !important;background:color-mix(in srgb,var(--s1) 78%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 18px 50px -14px rgba(0,0,0,.75);opacity:1;transition:transform .32s var(--ease),opacity .25s}
body.ui2 #drawer .dhead,body.ui2 #drawer #dRecentWrap,body.ui2 #drawer .shh{display:none !important}
body.ui2 #drawer .nav{display:flex;flex-direction:row;align-items:center;gap:4px;margin:0;padding:0;overflow:visible}
html body.ui2 #drawer .nav a{opacity:1 !important;transform:none;flex:none;width:44px;height:44px;padding:0;margin:0;justify-content:center;border-radius:14px;transition:background .12s,color .12s,transform .16s var(--ease);transition-delay:0s !important}
html body.ui2 #drawer .nav a:hover{transform:translateY(-3px);background:var(--s3)}
html body.ui2 #drawer .nav a.on{background:var(--acc);color:var(--on)}
html body.ui2 #drawer .nav a.on svg{color:var(--on)}
html body.ui2 #drawer .nav a.on::before{display:none}
html body.ui2 #drawer .nav a[data-page=mod]{display:none}
html body.ui2.mod #drawer .nav a[data-page=mod]{display:flex}
html body.ui2 #drawer .nav a>span{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,4px);padding:5px 10px;border-radius:9px;border:1px solid var(--line);background:var(--s3);color:var(--text);font-size:.75rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
html body.ui2 #drawer .nav a:hover>span{opacity:1;transform:translate(-50%,0)}
body.ui2 #drawer .nav .badge{position:absolute;top:-4px;right:-4px;margin:0;min-width:18px;height:18px;padding:0 5px;font-size:.66rem}
body.ui2 #drawer .dsep{flex:none;width:1px;height:26px;margin:0 4px}
body.ui2 .sbox,body.ui2 .mlist,body.ui2 .box{border-radius:20px}
body.ui2 .btn{border-radius:99px}
body.ui2 .gc .th{border-radius:20px}
body.ui2 .ph h1{font-size:2.3rem;letter-spacing:-.03em;background:linear-gradient(90deg,var(--text) 30%,var(--acc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.ui2 .page.on{animation:ui2in .42s var(--ease)}
@keyframes ui2in{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(4px)}}
/* full-height pages: the dock slides away until you touch the bottom edge */
html body.ui2[data-dock=hide] #drawer{transform:translate(-50%,calc(100% + 30px)) !important;opacity:0}
html body.ui2[data-dock=hide] #drawer.open{transform:translateX(-50%) !important;opacity:1}
body.ui2[data-dock=hide] #ui2edge{display:block;position:fixed;left:15%;right:15%;bottom:0;height:14px;z-index:59}
body.ui2[data-dock=hide] #ui2edge::after{content:'';position:absolute;left:50%;bottom:4px;width:64px;height:4px;margin-left:-32px;border-radius:4px;background:var(--faint);opacity:.55}
body.ui2[data-dock=hide] .main{padding-bottom:28px}
@media (max-width:860px){
html body.ui2 #drawer{left:12px !important;right:12px !important;transform:none !important;max-width:none !important}
html body.ui2[data-dock=hide] #drawer{transform:translateY(calc(100% + 30px)) !important}
html body.ui2[data-dock=hide] #drawer.open{transform:none !important}
body.ui2 #drawer .nav{overflow-x:auto;scrollbar-width:none;width:100%}
body.ui2 #drawer .nav::-webkit-scrollbar{display:none}
html body.ui2 #drawer .nav a>span{display:none}
}
/* split glass top bar */
html body .top,html body.ui2 .top{height:auto!important;padding:0 14px!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none;top:10px!important}
html body.ui2 .top{left:12px!important;right:12px!important}
html body .top .top-l,html body .top .top-r{pointer-events:auto;display:flex;align-items:center;gap:8px;height:50px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -10px 18px rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8)}
html body .top .top-r{margin-left:auto}
html body .top .top-l{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important}
html body .top .top-l,html body .top .top-r{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important}
html body .top .top-l{transition:opacity .22s,transform .22s}
html body:has(#drawer.open) .top .top-l{opacity:0;transform:translateY(-6px);pointer-events:none}
#stars{display:none!important}
#stars2{position:fixed;inset:0;z-index:0;pointer-events:none}
#haze{position:fixed;inset:-15%;z-index:0;pointer-events:none;opacity:.9;background:radial-gradient(40% 35% at 20% 25%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),radial-gradient(45% 40% at 80% 70%,rgba(120,90,220,.16),transparent 70%),radial-gradient(35% 30% at 60% 15%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),radial-gradient(50% 35% at 30% 90%,rgba(90,140,255,.10),transparent 70%);animation:hzd 70s ease-in-out infinite alternate;will-change:transform}
#haze::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.045),transparent 70%),radial-gradient(50% 45% at 25% 65%,rgba(255,255,255,.035),transparent 70%)}
@keyframes hzd{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}
@keyframes hzd2{from{transform:translate3d(3%,0,0) scale(1.05)}to{transform:translate3d(-3%,2%,0) scale(1)}}
body.light #haze,body.light #stars2{display:none}
@media (prefers-reduced-motion:reduce){#haze,#haze::after{animation:none}}
.hx-row>*{min-width:0}
.hx-row .sec{overflow:hidden}
.hx-row .sec>div:not(.sh){overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
#kickScreen{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,rgba(10,6,10,.45),rgba(4,2,5,.82));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#kickScreen.open{display:flex}
#kickScreen .kk{width:min(520px,100%);text-align:center;padding:38px 34px 32px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 24px 70px rgba(0,0,0,.5)}
#kickScreen .kk-h{font-family:var(--f-head,inherit);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;margin:0 0 6px}
#kickScreen .kk-s{color:var(--dim,#aaa);font-size:.95rem;margin:0 0 22px}
#kickScreen .kk-t{font-family:var(--f-head,inherit);font-weight:800;font-size:4.2rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc,#ff4d6d);margin:0 0 6px}
#kickScreen .kk-l{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim,#aaa);margin:0 0 24px}
#kickScreen .kk-r{display:flex;justify-content:space-between;gap:16px;text-align:left;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);margin-top:10px}
#kickScreen .kk-r b{font-weight:600;color:var(--dim,#aaa);font-size:.85rem;flex:none}
#kickScreen .kk-r span{font-weight:600;text-align:right;word-break:break-word}
#kickScreen{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.kicked>*:not(#stars2):not(#haze):not(#stars):not(#kickScreen):not(script){visibility:hidden!important}
/* top ovals follow the sidebar glass settings */
html.nova-glass body .top .top-l,html.nova-glass body .top .top-r{position:relative;background:color-mix(in srgb,var(--s1) var(--ng-op,8%),transparent)!important;-webkit-backdrop-filter:blur(var(--ng-blur,24px)) saturate(var(--ng-sat,1.9)) brightness(1.08)!important;backdrop-filter:blur(var(--ng-blur,24px)) saturate(var(--ng-sat,1.9)) brightness(1.08)!important;border:1px solid rgba(255,255,255,.26)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1.5px 0 rgba(255,255,255,.09),inset 1.5px 0 1px -1px rgba(255,255,255,.38),inset -1px 0 0 rgba(255,255,255,.12),inset 0 0 28px rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.25)!important}
html.nova-glass .top .top-l::before,html.nova-glass .top .top-r::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 22%,transparent 68%,rgba(255,255,255,.07) 100%);mix-blend-mode:soft-light}