/* generated patterns */
html[data-hero=dots]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%23fff' fill-opacity='0.38'/%3E%3C/svg%3E")}
html[data-bgp=dots]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%2367748e' fill-opacity='0.21'/%3E%3C/svg%3E")}
.pat.p-dots{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%23fff' fill-opacity='0.6'/%3E%3C/svg%3E")}
html[data-hero=grid]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23fff' stroke-opacity='0.2'/%3E%3C/svg%3E")}
html[data-bgp=grid]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%2367748e' stroke-opacity='0.11'/%3E%3C/svg%3E")}
.pat.p-grid{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23fff' stroke-opacity='0.32000000000000006'/%3E%3C/svg%3E")}
html[data-hero=diagonal]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-4 4L4 -4M0 16L16 0M12 20L20 12' stroke='%23fff' stroke-opacity='0.2' stroke-width='2'/%3E%3C/svg%3E")}
html[data-bgp=diagonal]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-4 4L4 -4M0 16L16 0M12 20L20 12' stroke='%2367748e' stroke-opacity='0.11' stroke-width='2'/%3E%3C/svg%3E")}
.pat.p-diagonal{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-4 4L4 -4M0 16L16 0M12 20L20 12' stroke='%23fff' stroke-opacity='0.32000000000000006' stroke-width='2'/%3E%3C/svg%3E")}
html[data-hero=waves]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cpath d='M0 10Q25 0 50 10T100 10' fill='none' stroke='%23fff' stroke-opacity='0.26' stroke-width='2'/%3E%3C/svg%3E")}
html[data-bgp=waves]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cpath d='M0 10Q25 0 50 10T100 10' fill='none' stroke='%2367748e' stroke-opacity='0.14' stroke-width='2'/%3E%3C/svg%3E")}
.pat.p-waves{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cpath d='M0 10Q25 0 50 10T100 10' fill='none' stroke='%23fff' stroke-opacity='0.41600000000000004' stroke-width='2'/%3E%3C/svg%3E")}
html[data-hero=hex]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zM28 100L0 84V66m28 34l28-16V66' fill='none' stroke='%23fff' stroke-opacity='0.22'/%3E%3C/svg%3E")}
html[data-bgp=hex]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zM28 100L0 84V66m28 34l28-16V66' fill='none' stroke='%2367748e' stroke-opacity='0.12'/%3E%3C/svg%3E")}
.pat.p-hex{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zM28 100L0 84V66m28 34l28-16V66' fill='none' stroke='%23fff' stroke-opacity='0.35200000000000004'/%3E%3C/svg%3E")}
html[data-hero=circles]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='22' fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='2'/%3E%3C/svg%3E")}
html[data-bgp=circles]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='22' fill='none' stroke='%2367748e' stroke-opacity='0.12' stroke-width='2'/%3E%3C/svg%3E")}
.pat.p-circles{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='22' fill='none' stroke='%23fff' stroke-opacity='0.35200000000000004' stroke-width='2'/%3E%3C/svg%3E")}
html[data-hero=zigzag]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12L6 0l6 12 6-12 6 12' fill='none' stroke='%23fff' stroke-opacity='0.24' stroke-width='2'/%3E%3C/svg%3E")}
html[data-bgp=zigzag]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12L6 0l6 12 6-12 6 12' fill='none' stroke='%2367748e' stroke-opacity='0.13' stroke-width='2'/%3E%3C/svg%3E")}
.pat.p-zigzag{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12L6 0l6 12 6-12 6 12' fill='none' stroke='%23fff' stroke-opacity='0.384' stroke-width='2'/%3E%3C/svg%3E")}
html[data-hero=plus]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23fff' stroke-opacity='0.3' stroke-width='2'/%3E%3C/svg%3E")}
html[data-bgp=plus]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%2367748e' stroke-opacity='0.17' stroke-width='2'/%3E%3C/svg%3E")}
.pat.p-plus{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23fff' stroke-opacity='0.48' stroke-width='2'/%3E%3C/svg%3E")}
html[data-hero=stars]{--hp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4l4 10h10l-8 6 3 10-9-6-9 6 3-10-8-6h10z' fill='%23fff' fill-opacity='0.16'/%3E%3C/svg%3E")}
html[data-bgp=stars]{--bp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4l4 10h10l-8 6 3 10-9-6-9 6 3-10-8-6h10z' fill='%2367748e' fill-opacity='0.09'/%3E%3C/svg%3E")}
.pat.p-stars{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4l4 10h10l-8 6 3 10-9-6-9 6 3-10-8-6h10z' fill='%23fff' fill-opacity='0.256'/%3E%3C/svg%3E")}

/* ===================================================== DARK MODE */
html[data-theme=dark]{color-scheme:dark;--bg:#0b1020;--card:#151b30;--card-rgb:21,27,48;--text:#9eabc4;--dark:#e6ebf7;--line:#252d48;--soft:#1c2440;--inp-b:#2d3758;--inp-t:#dde4f5;--side-bg:#10162a;--secondary:#7f8db0;--shadow:0 20px 27px 0 rgba(0,0,0,.35);--shadow-sm:0 3px 5px -1px rgba(0,0,0,.45),0 2px 3px -1px rgba(0,0,0,.35)}
html[data-theme=dark] .btn.dark,html[data-theme=dark] .bg-dark,html[data-theme=dark] .badge.dark{background:linear-gradient(310deg,#2a3358,#4a5690)}
html[data-theme=dark] .modal-bg{background:rgba(0,0,0,.65)}
html[data-theme=dark] .tbl tr:hover>td{background:rgba(255,255,255,.03)}
html[data-theme=dark] .switch span{background:#252d48}
html[data-theme=dark] pre,html[data-theme=dark] code{background:#10162a!important;color:#c9d3ea}
html[data-theme=dark] .login-wrap{background:var(--bg)}
html[data-theme=dark] .hero-bar{filter:brightness(.82)}
html[data-theme=dark] .login-form h1{-webkit-text-fill-color:transparent}
html[data-theme=dark] hr{opacity:.4}
input:focus,select:focus,textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 25%,transparent)}
textarea{border-radius:min(var(--rs),1rem)}
body{transition:background-color .35s,color .35s}
.card,.sidenav,.modal,input,select,textarea{transition:background-color .35s,border-color .35s,box-shadow .25s,transform .25s}
code{background:var(--soft);padding:.1rem .35rem;border-radius:.3rem;font-size:.85em}

/* ===================================================== SHAPES / DENSITY / SHADOWS / TEXT SIZE */
html[data-fs=s]{--fs:13.5px}html[data-fs=m]{--fs:15px}html[data-fs=l]{--fs:16.5px}
html[data-rad=sharp]{--r:.25rem;--rs:.2rem}
html[data-rad=round]{--r:1.4rem;--rs:.9rem}
html[data-rad=pill]{--r:1.8rem;--rs:99px}
html[data-rad=pill] .tbl-wrap,html[data-rad=pill] .modal-b{padding-left:.8rem;padding-right:.8rem}
html[data-den=compact] .tbl td{padding:.32rem .7rem}html[data-den=compact] .tbl th{padding:.5rem .7rem}html[data-den=compact] .card-b{padding:.4rem 1.1rem .9rem}html[data-den=compact] .card{margin-bottom:.9rem}html[data-den=compact] .nav-link{padding:.35rem .6rem}html[data-den=compact] .fg{margin-bottom:.55rem}
html[data-den=spacious] .tbl td{padding:.95rem 1rem}html[data-den=spacious] .tbl th{padding:.9rem 1rem}html[data-den=spacious] .card-b{padding:.9rem 1.7rem 1.7rem}html[data-den=spacious] .card{margin-bottom:1.6rem}html[data-den=spacious] .nav-link{padding:.75rem .8rem}html[data-den=spacious] .fg{margin-bottom:1.1rem}
html[data-sh=none]{--shadow:none;--shadow-sm:none}
html[data-sh=none] .card{border:1px solid var(--line)}
html[data-sh=strong]{--shadow:0 24px 48px -8px rgba(15,23,42,.28);--shadow-sm:0 6px 14px rgba(15,23,42,.25)}
html[data-theme=dark][data-sh=strong]{--shadow:0 24px 48px -8px rgba(0,0,0,.7)}

/* ===================================================== HERO / BACKGROUND PATTERNS */
.hero-bar::after{content:"";position:absolute;inset:0;background-image:var(--hp,none);pointer-events:none}
body{background-image:var(--bp,none);background-attachment:fixed}
.hero-bar canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html.fx-flow .hero-bar{background:var(--g-flow);background-size:300% 300%;animation:flow 14s ease infinite}
html.fx-flow .sidenav .side-foot,html.fx-flow .topbar.stuck{background:var(--g-flow);background-size:300% 300%;animation:flow 14s ease infinite}
@keyframes flow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

/* ===================================================== SIDEBAR STYLES */
.sidenav{border:1px solid transparent}
html[data-side=dark] .sidenav{--side-bg:#111827;--dark:#e6ebf7;--text:#9eabc4;--card:#1d2740;--soft:#1a2236;--line:#2a3550;--inp-b:#34415f}
html[data-side=gradient] .sidenav{--side-bg:var(--g-info);--dark:#fff;--text:rgba(255,255,255,.82);--card:rgba(255,255,255,.22);--soft:rgba(255,255,255,.16);--line:rgba(255,255,255,.3)}
html[data-side=gradient] .sidenav .nav-link.active .ico,html[data-side=gradient] .sidenav .brand .logo{background:rgba(255,255,255,.95);color:var(--c1)}
html[data-side=gradient] .sidenav .side-foot{background:rgba(255,255,255,.2)}
html[data-side=glass] .sidenav{--side-bg:rgba(var(--card-rgb),.55);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-color:rgba(255,255,255,.35)}
.sidenav .nav-link.active .ico{background:var(--g-info)}
.nav-link .ico i{transition:transform .25s}.nav-link:hover .ico i{transform:scale(1.18) rotate(-6deg)}
.nav-link{transition:background .2s,transform .2s,box-shadow .2s}.nav-link:hover{transform:translateX(3px)}
.nav-link.active{position:relative}.nav-link.active:before{content:"";position:absolute;left:-.45rem;top:22%;bottom:22%;width:4px;border-radius:4px;background:var(--g-info)}

/* mini sidebar (desktop) */
@media (min-width:1200px){
 html[data-mini="1"] .sidenav{width:84px}
 html[data-mini="1"] .main{margin-left:116px}
 html[data-mini="1"] .sidenav .brand{font-size:0;justify-content:center;padding:1.25rem .5rem}
 html[data-mini="1"] .sidenav .brand .logo{font-size:1rem}
 html[data-mini="1"] .nav-link{font-size:0;justify-content:center;padding:.5rem}
 html[data-mini="1"] .nav-link .ico{font-size:.9rem}
 html[data-mini="1"] .nav-link .chev,html[data-mini="1"] .nav-sub,html[data-mini="1"] .side-foot,html[data-mini="1"] .nav-head{display:none}
 html[data-mini="1"] .nav-link:hover{transform:none}
 html[data-mini="1"] .nav-link.active:before{left:-.6rem}
}
.sidenav,.main{transition:width .3s,margin .3s,transform .3s}

/* ===================================================== EFFECTS */
.btn{position:relative;overflow:hidden}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .6s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
html.fx-anim .main>.card,html.fx-anim .main>.grid>*,html.fx-anim .main>.alert{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
html.fx-anim .main>.grid>*:nth-child(2),html.fx-anim .main>.card:nth-of-type(2){animation-delay:.07s}
html.fx-anim .main>.grid>*:nth-child(3),html.fx-anim .main>.card:nth-of-type(3){animation-delay:.14s}
html.fx-anim .main>.grid>*:nth-child(4),html.fx-anim .main>.card:nth-of-type(4){animation-delay:.21s}
html.fx-anim .tbl tbody tr{animation:rowin .4s ease both}
html.fx-anim .staff-grid>*{animation:rise .5s both}html.fx-anim .staff-grid>*:nth-child(3n+2){animation-delay:.08s}html.fx-anim .staff-grid>*:nth-child(3n){animation-delay:.16s}
html.fx-anim .modal{animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
html.fx-anim .toast{animation:tin .3s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
html.fx-lift .stat:hover,html.fx-lift .staff:hover,html.fx-lift .sw:hover{transform:translateY(-5px);box-shadow:0 22px 40px -10px rgba(15,23,42,.35)}
html.fx-lift .stat .ico{transition:transform .35s}html.fx-lift .stat:hover .ico{transform:rotate(-8deg) scale(1.12)}
html.fx-lift .btn:hover{transform:translateY(-2px)}
html.fx-glass .card,html.fx-glass .modal,html.fx-glass .usermenu .dd{background:rgba(var(--card-rgb),.62);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.28)}
html[data-theme=dark].fx-glass .card{border-color:rgba(255,255,255,.07)}
html.fx-glass body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(640px at 88% 22%,color-mix(in srgb,var(--c2) 38%,transparent),transparent 70%),radial-gradient(560px at 8% 85%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 70%),radial-gradient(420px at 55% 55%,color-mix(in srgb,var(--c2) 14%,transparent),transparent 70%)}
html.fx-zebra .tbl tbody tr.z>td{background:color-mix(in srgb,var(--info) 5%,transparent)}
html.fx-sticky .topbar{position:sticky;top:0;z-index:60;margin-bottom:1rem;padding:.7rem 1rem;border-radius:0 0 var(--r) var(--r);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
html.fx-sticky .topbar.stuck{background:color-mix(in srgb,var(--c1) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
html.fx-still *,html.fx-still *:before,html.fx-still *:after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html *,html *:before,html *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#navbar{position:fixed;left:0;top:0;height:3px;width:0;z-index:5000;background:var(--g-info);box-shadow:0 0 10px var(--info);transition:width .25s ease,opacity .3s;opacity:0;pointer-events:none}
#navbar.on{opacity:1}

/* ===================================================== TOP BAR EXTRAS */
.tb-ico{width:36px;height:36px;justify-content:center;padding:0!important;border-radius:50%!important}
#modeBtn .fa-sun{display:none}html[data-theme=dark] #modeBtn .fa-sun{display:inline}html[data-theme=dark] #modeBtn .fa-moon{display:none}
#modeBtn i{transition:transform .5s}#modeBtn:hover i{transform:rotate(25deg) scale(1.2)}
#miniBtn{display:none}@media (min-width:1200px){#miniBtn{display:flex}}
.fab{position:fixed;right:0;top:46%;z-index:1500;width:44px;height:44px;border:0;border-radius:14px 0 0 14px;background:var(--g-primary);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.fab i{animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
html.fx-still .fab i{animation:none}

/* ===================================================== CUSTOMISER */
#uiDrawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100vw;background:var(--card);z-index:2500;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 50px rgba(0,0,0,.25);display:flex;flex-direction:column}
#uiDrawer.open{transform:none}
#uiDrawer header{display:flex;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}#uiDrawer header h3{margin:0;flex:1}
#uiDrawer .ui-body{overflow-y:auto;padding:1rem 1.2rem 2rem;flex:1}
#uiScrim{position:fixed;inset:0;background:rgba(10,15,30,.4);z-index:2400;opacity:0;pointer-events:none;transition:opacity .3s}#uiScrim.open{opacity:1;pointer-events:auto}
.ui-sec{margin-bottom:1.2rem}.ui-sec h5{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--secondary);margin-bottom:.5rem}
.seg{display:flex;background:var(--soft);border-radius:var(--rs);padding:3px;gap:3px;flex-wrap:wrap}
.seg button{flex:1;border:0;background:none;color:var(--text);font:inherit;font-size:.76rem;font-weight:700;padding:.45rem .5rem;border-radius:calc(var(--rs) - 2px);cursor:pointer;white-space:nowrap;transition:all .2s}
.seg button.on{background:var(--g-info);color:#fff;box-shadow:var(--shadow-sm)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.sw{aspect-ratio:1;border:2px solid transparent;border-radius:50%;cursor:pointer;color:#fff;font-size:.7rem;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:transform .2s}
.sw i{opacity:0;transform:scale(.4);transition:all .2s}.sw.on{border-color:var(--dark);transform:scale(1.1)}.sw.on i{opacity:1;transform:none}
.pats{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.pat{height:46px;border:2px solid transparent;border-radius:.6rem;cursor:pointer;background:var(--g-info);background-image:var(--tile,none);position:relative;color:#fff;font:inherit;font-size:.58rem;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding:0 0 3px;transition:transform .2s}
.pat.p-none{--tile:none}.pat.on{border-color:var(--dark);transform:scale(1.06)}.pat span{background:rgba(0,0,0,.28);padding:0 .3rem;border-radius:4px}
.pats[data-k=bgp] .pat{background-color:var(--soft);background-image:var(--tile,none);background-blend-mode:normal}
.fxrow{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}.fxrow div{flex:1}.fxrow b{display:block;font-size:.8rem;color:var(--dark)}.fxrow small{font-size:.7rem;color:var(--secondary)}
.ui-sample{margin-top:.6rem;padding:.7rem .9rem;border-radius:var(--rs);background:var(--soft);color:var(--dark)}
.ui-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.ui-inline{max-width:640px}

/* ===================================================== RESPONSIVE */
#navBackdrop{position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:1020;opacity:0;pointer-events:none;transition:opacity .3s}
@media (max-width:1199px){
 body.nav-open #navBackdrop{opacity:1;pointer-events:auto}
 .sidenav{width:min(290px,84vw);box-shadow:0 0 60px rgba(0,0,0,.35)}
 .main{padding:.8rem}
 .topbar{gap:.4rem}
}
@media (max-width:991px){
 .g2,.g3,.g-7-5{grid-template-columns:1fr}
 .c3,.c4,.c5{grid-column:span 6}.c7,.c8{grid-column:span 12}
 .filters{grid-template-columns:repeat(2,1fr)}
 .hero-bar{height:240px}
 .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
 .topbar .crumbs{flex:1;min-width:0}
}
@media (max-width:700px){
 html{--fs:14px}
 .topbar .usermenu .tb-item>span:last-child,.mode-switch .switch{display:none}
 .topbar .crumbs{font-size:.7rem}.topbar .crumbs b{font-size:.92rem}
 .filters{grid-template-columns:1fr;padding:.4rem 1rem 1rem}
 .card-h{padding:1rem 1rem .4rem}.card-b{padding:.5rem 1rem 1rem}
 .btn{padding:.65rem 1rem}.btn.sm{padding:.45rem .8rem}.btn-icon{width:36px;height:36px}
 input,select,textarea{font-size:16px!important;padding:.7rem .85rem}
 .modal-bg{padding:0}.modal,.modal.lg,.modal.sm{max-width:100%;min-height:100vh;border-radius:0}
 .modal-f{position:sticky;bottom:0;background:var(--card);flex-wrap:wrap}.modal-f .btn{flex:1;justify-content:center}
 .row>*{grid-column:span 12!important}
 .pager{justify-content:center}.pager .info{width:100%;text-align:center;margin:0 0 .3rem}
 .staff-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
 #uiDrawer{width:100vw}.swatches{grid-template-columns:repeat(6,1fr)}.pats{grid-template-columns:repeat(5,1fr)}
 .fab{top:auto;bottom:84px}
 /* tables become cards */
 .tbl-wrap{padding:0 .6rem;overflow:visible}
 .tbl thead{display:none}
 .tbl,.tbl tbody{display:block;width:100%}
 .tbl tr{display:block;margin:0 0 .8rem;padding:.4rem .2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
 .tbl tr[hidden]{display:none!important}
 .tbl td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0;padding:.38rem .8rem;text-align:right}
 .tbl td[data-label]:before{content:attr(data-label);font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--secondary);text-align:left;flex:0 0 38%}
 .tbl td.num{text-align:right}.tbl td.empty,.tbl td[colspan]{display:block;text-align:center}
 .tbl td.exp{display:none}
 .tbl tr.detail{background:var(--soft)}.tbl tr.detail td:first-child:empty{display:none}
 .tbl tr:hover>td{background:none}
}
@media (max-width:420px){.g4{grid-template-columns:1fr}.stat{padding:.9rem 1rem}.staff-grid{grid-template-columns:1fr}}
@supports (padding:max(0px)){.main{padding-bottom:max(2rem,env(safe-area-inset-bottom))}}
@media print{#uiDrawer,.fab,#uiScrim,#navbar,#navBackdrop,.hero-bar canvas{display:none!important}html{--bp:none;--hp:none}body{background:#fff!important;color:#000}}

.fab-mode{position:fixed;top:16px;right:16px;z-index:50;width:44px;height:44px;border:0;border-radius:50%;background:var(--g-info);color:#fff;font-size:1rem;cursor:pointer;box-shadow:var(--shadow-sm)}
html[data-theme=dark] .fab-mode .fa-sun{display:inline}html:not([data-theme=dark]) .fab-mode .fa-sun{display:none}html[data-theme=dark] .fab-mode .fa-moon{display:none}
@media (max-width:700px){.topbar .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-switch{padding:.3rem .55rem;font-size:.62rem}}