:root{--navy:#12335b;--navy2:#1e3a5f;--bg:#f2f6fb;--card:#fff;--ink:#14213d;--mut:#6b7a90;--line:#e3eaf3;--ok:#22a06b;--warn:#f59e0b;--bad:#ef4444;--sw:268px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
html{scrollbar-width:thin;scrollbar-color:#b9c9de transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c3d2e6;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#8fb0d6;background-clip:padding-box}
/* boot */
#boot{position:fixed;inset:0;z-index:99;background:linear-gradient(135deg,#0d2545,#1b4f8a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;transition:opacity .6s,visibility .6s}
#boot.hide{opacity:0;visibility:hidden}
.boot-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:34px;border:3px solid rgba(255,255,255,.2);border-top-color:#5ee1ff;animation:spin 1.1s linear infinite}
.boot-ring i{animation:spin 1.1s linear infinite reverse}
.boot-text{font-weight:600;letter-spacing:.5px;animation:blink 1.4s infinite}
.boot-bar{width:220px;height:5px;background:rgba(255,255,255,.18);border-radius:9px;overflow:hidden}
.boot-bar span{display:block;height:100%;width:40%;background:linear-gradient(90deg,#5ee1ff,#a78bfa);border-radius:9px;animation:load 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.4}}@keyframes load{0%{margin-left:-40%}100%{margin-left:100%}}
/* shell */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sw);background:linear-gradient(180deg,#0d2545,#153e6e);color:#cfe0f5;position:fixed;inset:0 auto 0 0;padding:18px 0 14px;display:flex;flex-direction:column;overflow:hidden;z-index:20;transition:transform .35s}
.brand{display:flex;gap:12px;align-items:center;padding:4px 22px 16px;color:#fff;flex:none;border-bottom:1px solid rgba(255,255,255,.08)}
.brand b{display:block;font-size:16px}.brand small{font-size:10.5px;color:#8fb0d6}
.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,#38bdf8,#a78bfa);animation:float 3s ease-in-out infinite;box-shadow:0 8px 20px rgba(56,189,248,.35)}
@keyframes float{50%{transform:translateY(-4px)}}
.nav-label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f92bd;margin:14px 10px 8px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;font-size:13px;font-weight:600;position:relative;margin-bottom:3px;transition:.25s;opacity:0;animation:slideIn .5s forwards;animation-delay:var(--d,0s)}
.nav-item:hover{background:rgba(255,255,255,.09);transform:translateX(5px);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(94,225,255,.25),rgba(94,225,255,.04));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#5ee1ff}
.nb{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;color:#fff;background:var(--c);flex:none;transition:.3s}
.nav-item:hover .nb{transform:rotate(-8deg) scale(1.12)}
.nb.num{font-size:11.5px;font-weight:800}
@keyframes slideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
/* scrolling middle area: slim overlay scrollbar (shows on hover) + soft fade at the edges */
.side-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 14px 18px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:transparent transparent;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%)}
.side-scroll:hover{scrollbar-color:rgba(94,225,255,.45) transparent}
.side-scroll::-webkit-scrollbar{width:5px}
.side-scroll::-webkit-scrollbar-track{background:transparent}
.side-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:10px;transition:background .3s}
.side-scroll:hover::-webkit-scrollbar-thumb{background:rgba(94,225,255,.4)}
.side-scroll::-webkit-scrollbar-thumb:hover{background:#5ee1ff}
.side-scroll .nav-label:first-child{margin-top:8px}
.side-foot{flex:none;margin:6px 14px 0;padding:14px;border-radius:14px;background:rgba(255,255,255,.07);display:flex;gap:10px;align-items:center;font-size:11.5px;color:#a9c4e6}
.side-foot i{color:#5ee1ff;animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.3);opacity:.6}}
.main{margin-left:var(--sw);flex:1;min-width:0}
/* topbar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px 26px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.t-title{font-weight:800;font-size:18px}.t-sub{font-size:12px;color:var(--mut)}
.t-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;gap:8px;background:#eef3f9;border-radius:12px;padding:9px 14px;width:320px;border:1px solid transparent;transition:.3s}
.search:focus-within{width:380px;background:#fff;border-color:#7fb4ee;box-shadow:0 0 0 4px rgba(56,130,220,.12)}
.search input{border:0;background:none;outline:0;font:inherit;font-size:12.5px;width:100%}
.search i{color:var(--mut)}
.live{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ok);background:#e6f7ef;padding:7px 12px;border-radius:20px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 1.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,160,107,.6)}100%{box-shadow:0 0 0 10px rgba(34,160,107,0)}}
.back{font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:12px;background:#eaf2fc;color:var(--navy);transition:.25s}
.back:hover{background:var(--navy);color:#fff;transform:translateX(-3px)}
.bell{position:relative;width:40px;height:40px;border-radius:12px;border:0;background:#eef3f9;cursor:pointer;font-size:16px;color:var(--navy);transition:.25s}
.bell:hover{animation:ring .6s}
.bell em{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid #fff}
@keyframes ring{25%{transform:rotate(14deg)}50%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#7c3aed)}
.burger{display:none;border:0;background:#eef3f9;width:40px;height:40px;border-radius:12px;font-size:17px;cursor:pointer}
.content{padding:24px 26px 40px}
/* reveal */
.r{opacity:0;transform:translateY(18px);animation:up .65s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,.05s)}
@keyframes up{to{opacity:1;transform:none}}
/* hero */
.hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;padding:26px 30px;border-radius:22px;margin-bottom:20px;color:#fff;background:linear-gradient(120deg,#12335b,#1d5aa6,#6d4fd6,#12335b);background-size:300% 300%;animation:up .65s forwards,grad 10s ease infinite}
@keyframes grad{50%{background-position:100% 50%}}
.hero h1{font-size:23px;font-weight:800;margin-bottom:6px}.hero p{font-size:13px;color:#d5e5fa;max-width:560px}
.hero-orb{position:relative;width:96px;height:96px;flex:none;display:grid;place-items:center;font-size:32px}
.hero-orb span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:wave 2.6s infinite}
.hero-orb span:nth-child(3){animation-delay:.85s}.hero-orb span:nth-child(4){animation-delay:1.7s}
@keyframes wave{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.25);opacity:0}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.stat{position:relative;overflow:hidden;background:var(--card);border-radius:18px;padding:16px;display:flex;gap:13px;align-items:center;border:1px solid var(--line);transition:.3s;opacity:0;animation:up .6s forwards;animation-delay:var(--d)}
.stat::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:.4s}
.stat:hover{transform:translateY(-6px);box-shadow:0 16px 30px -12px var(--c)}.stat:hover::after{transform:scaleX(1)}
.si{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:19px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,white);transition:.4s}
.stat:hover .si{background:var(--c);color:#fff;transform:rotate(360deg)}
.sv{font-size:24px;font-weight:800;line-height:1}.sl{font-size:11.5px;color:var(--mut);margin-top:5px;font-weight:600}
/* panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:20px}
.p-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.p-title{font-weight:800;font-size:15px;display:flex;gap:9px;align-items:center}.p-title i{color:#2563eb}
.p-sub{font-size:12px;color:var(--mut);margin-top:3px}
.chip{font-size:11.5px;font-weight:700;color:#2563eb;background:#e8f0fe;padding:5px 11px;border-radius:20px}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.grid-2 .panel{margin-bottom:20px}
/* workflow */
.flow{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;position:relative}
.flow::before{content:"";position:absolute;top:29px;left:6%;right:6%;height:3px;background:repeating-linear-gradient(90deg,#bcd3ef 0 8px,transparent 8px 16px);animation:dash 1s linear infinite}
@keyframes dash{to{background-position:16px 0}}
.step{position:relative;text-align:center;font-size:11.5px;font-weight:700;color:var(--mut);transition:.3s;cursor:default}
.step .ic{width:58px;height:58px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#fff;color:var(--c);border:3px solid color-mix(in srgb,var(--c) 30%,white);transition:.35s}
.step.on{color:var(--ink)}.step.on .ic,.step:hover .ic{background:var(--c);color:#fff;transform:scale(1.15);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 22%,transparent)}
.step small{display:block;font-size:9.5px;color:var(--c);font-weight:800}
/* feed */
.feed{display:flex;flex-direction:column;gap:9px;max-height:360px;overflow:hidden}
.ev{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:14px;background:#f7fafd;border-left:4px solid var(--c);transition:.25s;animation:evIn .6s cubic-bezier(.2,.8,.2,1)}
.ev:hover{transform:translateX(6px);background:#fff;box-shadow:0 8px 18px -10px rgba(20,33,61,.4)}
.ev.new{background:color-mix(in srgb,var(--c) 12%,white)}
.ev .ei{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--c);font-size:14px;flex:none}
.ev b{font-size:12.5px;display:block}.ev span{font-size:11px;color:var(--mut)}.ev time{margin-left:auto;font-size:11px;color:var(--mut);font-weight:700;white-space:nowrap}
@keyframes evIn{from{opacity:0;transform:translateY(-16px) scale(.97);max-height:0}to{opacity:1;transform:none;max-height:80px}}
/* devices */
.devices{display:flex;flex-direction:column;gap:9px}
.dev{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;border:1px solid var(--line);transition:.25s}
.dev:hover{border-color:var(--c);transform:scale(1.02)}
.dot{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none;animation:ping2 1.8s infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.dev b{font-size:12.5px;display:block}.dev span{font-size:11px;color:var(--mut)}
.bars{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:18px}
.bars i{width:5px;border-radius:2px;background:#dbe5f1;transform-origin:bottom;animation:grow .6s backwards}
.bars i.f{background:var(--c)}
@keyframes grow{from{transform:scaleY(0)}}
/* modules */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.mod{position:relative;overflow:hidden;padding:18px;border-radius:18px;background:color-mix(in srgb,var(--c) 9%,white);border:1px solid color-mix(in srgb,var(--c) 22%,white);transition:.35s;opacity:0;animation:up .55s forwards;animation-delay:var(--d)}
.mod::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg)}
.mod:hover::before{left:130%;transition:.8s}
.mod:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 18px 34px -14px var(--c)}
.mn{position:absolute;top:12px;right:14px;font-size:30px;font-weight:800;color:color-mix(in srgb,var(--c) 22%,white)}
.mi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:19px;color:#fff;background:var(--c);margin-bottom:12px;transition:.4s}
.mod:hover .mi{transform:scale(1.12) rotate(-10deg)}
.mod h4{font-size:13.5px;margin-bottom:5px}.mod p{font-size:11.5px;color:var(--mut);line-height:1.5}
.go{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:11.5px;font-weight:800;color:var(--c)}
.go i{transition:.3s}.mod:hover .go i{transform:translateX(6px)}
.scrim{display:none}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr}.flow{grid-template-columns:repeat(4,1fr);row-gap:20px}.flow::before{display:none}.search{display:none}}
@media(max-width:860px){.sidebar{transform:translateX(-100%)}body.open .sidebar{transform:none}body.open .scrim{display:block;position:fixed;inset:0;background:rgba(10,20,40,.5);z-index:15}.main{margin-left:0}.burger{display:block}.hero-orb,.live,.back{display:none}.content{padding:16px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}