:root{--navy:#0a1f6e;--royal:#0b2a8a;--blue:#0b6cff;--sky:#00aeef;--ink:#0d1b4a;--muted:#5a6690;--line:#dfe6f7;--wash:#f3f7ff;--err:#d92d4a;
--sans:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;--disp:"Sora","Hind Siliguri",system-ui,sans-serif}

/* ---- shared buttons (same look as landing page) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem var(--sans);padding:.62rem 1.3rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn-ghost{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-solid{background:linear-gradient(135deg,var(--royal),var(--blue) 70%,var(--sky));color:#fff;box-shadow:0 8px 22px rgba(11,108,255,.35)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,108,255,.45)}
.btn-block{width:100%;padding:.85rem 1.3rem;font-size:1.05rem}

/* ---- light animations ---- */
body{animation:kpin .4s ease-out both}
@keyframes kpin{from{opacity:0}to{opacity:1}}
.btn,.tabs button,.burger,.menu-btn,.pw-toggle{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:kprip .6s ease-out forwards;pointer-events:none}
.btn-solid .ripple{background:#fff}
@keyframes kprip{to{transform:scale(2.6);opacity:0}}
.card:active{transform:scale(.985)}

/* page loader: logo inside a spinning ring */
#kp-loader{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:#fff;transition:opacity .35s ease,visibility .35s}
#kp-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.kp-ring{position:relative;width:96px;height:96px;display:grid;place-items:center}
.kp-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid #e3eeff;border-top-color:var(--blue);border-right-color:var(--sky);animation:kpspin .85s linear infinite}
.kp-ring img{width:64px;height:64px;border-radius:50%;animation:kppulse 1.6s ease-in-out infinite}
@keyframes kpspin{to{transform:rotate(360deg)}}
@keyframes kppulse{50%{transform:scale(.92)}}

/* spinner inside a submitting button */
.is-loading{pointer-events:none;color:transparent!important}
.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:kpspin .7s linear infinite}

/* ---- login / register ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(800px 380px at 50% -5%,#e3eeff,transparent 70%),#f7faff}
.auth-box{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:32px 26px 26px;box-shadow:0 24px 60px rgba(10,31,110,.12);font-family:var(--sans);color:var(--ink)}
.auth-logo{display:block;width:78px;height:78px;border-radius:50%;margin:0 auto 14px;box-shadow:0 6px 20px rgba(11,42,138,.28)}
.auth-box h1{font:800 1.55rem/1.25 var(--disp);text-align:center;color:var(--navy);letter-spacing:-.01em}
.auth-sub{text-align:center;color:var(--muted);margin:6px 0 22px;font-size:.98rem}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px;color:var(--ink)}
.field input{width:100%;font:500 1rem var(--sans);color:var(--ink);padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fbfdff;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#9aa6c9}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,108,255,.14);background:#fff}
.pw{position:relative}
.pw input{padding-right:5.2rem}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--wash);color:var(--blue);font:600 .85rem var(--sans);padding:.4rem .8rem;border-radius:999px;cursor:pointer}
.err{color:var(--err);font-size:.88rem;margin-top:6px}
.check{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted);margin:2px 0 18px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.switch{text-align:center;margin-top:20px;color:var(--muted);font-size:.97rem}
.switch a{color:var(--blue);font-weight:600}
.switch a:hover{text-decoration:underline}
.auth a,.dash-top a{text-decoration:none}

/* ---- home after login ---- */
.dash-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.dash-bar{width:min(1120px,100% - 40px);margin-inline:auto;height:68px;display:flex;align-items:center;justify-content:space-between}
.dash-brand{display:flex;align-items:center;gap:10px;font-family:var(--disp)}
.dash-brand img{border-radius:50%;box-shadow:0 2px 10px rgba(11,42,138,.25)}
.dash-brand b{font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:-.02em}
.dash-brand b span{color:var(--blue)}
.dash-main{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:30px 20px;text-align:center;background:radial-gradient(900px 420px at 50% 0%,#e3eeff,transparent 70%),#fff}
.welcome{font:800 clamp(2.2rem,8vw,4.4rem)/1.1 var(--disp);color:var(--navy);letter-spacing:-.03em;animation:kprise .7s .35s ease-out both}
.welcome span{background:linear-gradient(100deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes kprise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}.kp-ring::before{animation:kpspin 2s linear infinite!important}}

/* ---- mobile fit fixes (v3) ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
.auth{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;min-height:100vh;min-height:100dvh;padding:24px 16px;overflow-x:clip}
.auth-box{width:100%;max-width:430px;min-width:0;padding:30px 22px 24px}
.field input,.pw input{display:block;width:100%;max-width:100%;min-width:0}
.btn-block{display:flex;width:100%}
@media (max-width:380px){.auth{padding:16px 12px}.auth-box{padding:26px 16px 20px;border-radius:22px}.auth-box h1{font-size:1.35rem}.auth-sub{font-size:.92rem}}
@media (min-width:600px){.auth-box{padding:38px 34px 30px}}

/* ---- logged-in app shell: header + floating bottom nav ---- */
.app-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.app-bar{position:relative;width:min(1120px,100% - 32px);margin-inline:auto;height:68px;display:flex;align-items:center;gap:10px}
.app-brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;min-width:0}
.app-brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 2px 10px rgba(11,42,138,.25);flex:none}
.app-brand b{font:800 1.3rem/1 var(--disp);letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.app-brand b span{color:var(--blue)}
.menu-btn{width:44px;height:44px;flex:none;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-content:center;gap:5px;cursor:pointer;position:relative;overflow:hidden}
.menu-btn i{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--royal);transition:.25s}
.menu-btn[aria-expanded=true] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.app-menu{position:absolute;right:0;top:74px;width:min(260px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 20px 50px rgba(10,31,110,.18);display:none}
.app-menu.open{display:block}
.app-menu a{display:block;padding:.75rem 1rem;border-radius:12px;font:500 1rem var(--sans);color:var(--ink);text-decoration:none}
.app-menu a:hover{background:var(--wash);color:var(--blue)}
@media (max-width:360px){.app-brand b{font-size:1.1rem}.app-brand img{width:40px;height:40px}.app-bar .btn{padding:.5rem 1rem}}

.app-main{min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px);padding:28px 18px calc(118px + env(safe-area-inset-bottom,0px));font-family:var(--sans);color:var(--ink);background:radial-gradient(900px 420px at 50% 0%,#e3eeff,transparent 70%),#fff}
.app-main.center{display:grid;place-items:center;text-align:center}
.app-main>*{min-width:0;max-width:100%}

.bnav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(500px,100% - 24px);z-index:60;display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;align-items:end;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:26px;padding:8px 6px;box-shadow:0 14px 40px rgba(10,31,110,.16)}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;min-width:0;border-radius:18px;color:#7b86ab;text-decoration:none;font:600 .72rem/1.2 var(--sans);transition:color .2s,background .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.bn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bn .lb{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn:active{transform:scale(.93)}
.bn.on{color:var(--blue);background:var(--wash)}
.bn-mid{background:none!important;margin-top:-30px;padding-top:0}
.orb{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:linear-gradient(150deg,#fff,#e6f0ff);border:1px solid #cfe0ff;box-shadow:0 8px 20px rgba(11,108,255,.22),0 0 0 6px rgba(255,255,255,.95);transition:background .25s,color .25s,box-shadow .25s}
.orb svg{width:26px;height:26px}
.bn-mid.on .orb{color:#fff;background:linear-gradient(135deg,var(--royal),var(--blue) 70%,var(--sky));border-color:transparent;box-shadow:0 10px 24px rgba(11,108,255,.42),0 0 0 6px rgba(255,255,255,.95)}
.bn-mid.on{color:var(--blue)}

.empty{max-width:380px}
.empty-ico{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:#e4efff;color:var(--blue)}
.empty-ico svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty h2{font:800 1.7rem var(--disp);color:var(--navy)}
.empty p{color:var(--muted);margin:8px 0 16px}
.soon{display:inline-block;padding:.3rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--royal);font-weight:600;font-size:.9rem}

.acc{max-width:420px;margin:6vh auto 0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 22px;box-shadow:0 16px 40px rgba(10,31,110,.08)}
.avatar{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--royal),var(--blue),var(--sky));color:#fff;font:800 2rem var(--disp)}
.acc h2{font:700 1.4rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.acc p{color:var(--muted);margin:4px 0 20px;overflow-wrap:anywhere}

/* ---- left slide-in drawer (slim) ---- */
html.lock{overflow:hidden}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(10,31,110,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .3s}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(256px,74vw);display:flex;flex-direction:column;background:#fff;border-radius:0 20px 20px 0;box-shadow:12px 0 40px rgba(10,31,110,.22);transform:translateX(-104%);visibility:hidden;transition:transform .32s cubic-bezier(.22,.8,.25,1),visibility 0s .32s;font-family:var(--sans);color:var(--ink)}
.drawer.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.22,.8,.25,1)}
.dr-head{position:relative;flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:6px;padding:calc(16px + env(safe-area-inset-top,0px)) 50px 14px 16px;background:linear-gradient(180deg,#eaf2ff,#fff);border-bottom:1px solid var(--line);border-radius:0 20px 0 0}
.dr-head img{width:40px;height:40px;border-radius:50%;box-shadow:0 3px 10px rgba(11,42,138,.28)}
.dr-name{font:800 1.12rem/1.1 var(--disp);letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.dr-name span{color:var(--blue)}
.dr-tag{grid-column:1/-1;font:500 .72rem/1.2 var(--disp);color:var(--muted)}
.dr-x{position:absolute;right:10px;top:calc(12px + env(safe-area-inset-top,0px));width:32px;height:32px;border-radius:50%;border:0;background:#fff;color:var(--royal);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 6px rgba(10,31,110,.14)}
.dr-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px;scrollbar-width:none}
.dr-body::-webkit-scrollbar{display:none}
.dr-sep{height:1px;background:var(--line);margin:6px 6px}
.dr-item{display:flex;align-items:center;gap:11px;width:100%;padding:.38rem .5rem;border:0;border-radius:12px;background:none;color:var(--ink);font:500 .93rem var(--sans);text-align:left;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.dr-item:hover{background:var(--wash)}
.dr-item:active{transform:scale(.98)}
.dr-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--wash);color:var(--blue);transition:background .2s,color .2s}
.dr-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dr-item.on{background:#e8f1ff;color:var(--blue);font-weight:600}
.dr-item.on .dr-ico{background:linear-gradient(135deg,var(--royal),var(--blue));color:#fff}
.dr-foot{flex:none;padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.dr-out{color:#c62a47}
.dr-out .dr-ico{background:#ffecef;color:#c62a47}
.dr-out:hover{background:#fff3f5}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition-duration:.01s!important}}

/* ---- overview + account (clean) ---- */
.app-main{background:#f4f7fd}
.ov,.ac{max-width:760px;margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.ov>*,.ac>*{animation:ovup .5s calc(var(--i,0) * 55ms) ease-out both}
@keyframes ovup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ov p,.ov h1,.ov h2,.ov ul,.ac p,.ac h1,.ac h2,.ac ul{margin:0}
.ov ul,.ac ul{padding:0;list-style:none}
.ov b,.ac b{font-family:var(--sans)}

/* overview header */
.ov-hi{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ov-date{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:.88rem}
.ov-live{display:inline-flex;align-items:center;gap:6px;color:#12803f;font-weight:600;font-size:.8rem}
.ov-live i{width:8px;height:8px;border-radius:50%;background:#16a34a;animation:ovpulse 2s infinite}
@keyframes ovpulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%,100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
.ov-hi h1{font:700 1.5rem/1.25 var(--sans);color:var(--navy);margin-top:2px}
.ov-hi h1 span{color:var(--blue)}
.ov-demo{flex:none;margin-top:2px;padding:.2rem .7rem;border-radius:99px;background:#fff4dc;color:#a8650b;font:600 .74rem var(--sans);border:1px solid #f4dfae}

/* hero */
.ov-hero{position:relative;overflow:hidden;border-radius:24px;padding:20px;color:#fff;background:linear-gradient(135deg,#0a1f6e,#0b4fd1 60%,#119be0);box-shadow:0 16px 36px rgba(11,79,209,.28)}
.ov-hero::after{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.ov-hero>*{position:relative;z-index:1}
.ov-hlbl{font-size:.88rem;color:rgba(255,255,255,.8)}
.ov-big{display:flex;align-items:baseline;gap:4px;margin:4px 0 10px!important;font-family:var(--sans);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.ov-big small{font-size:1.5rem;font-weight:700;opacity:.9}
.ov-big b{font-size:2.7rem;font-weight:800}
.ov-up{display:inline-flex;align-items:center;gap:4px;padding:.22rem .7rem;border-radius:99px;background:rgba(255,255,255,.18);font:600 .8rem var(--sans)}
.ov-up svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ov-mini{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.ov-mini div{display:flex;flex-direction:column;gap:1px}
.ov-mini div+div{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.ov-mini b{font:700 1.3rem var(--sans)}
.ov-mini span{font-size:.78rem;color:rgba(255,255,255,.75)}

/* quick actions */
.ov-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ov-quick a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink);font:600 .8rem var(--sans);text-decoration:none;transition:transform .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.ov-quick a:active{transform:scale(.95)}
.ov-quick span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#e8f1ff;color:var(--blue)}
.ov-quick svg,.ov-ico svg,.ac-i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* setup banner */
.ov-setup{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1px dashed #b9d2ff;color:var(--ink);text-decoration:none}
.ov-setup>div{flex:1;min-width:0}
.ov-setup b{display:block;font-size:.95rem;color:var(--navy)}
.ov-setup small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.arr{flex:none;width:18px;height:18px;fill:none;stroke:#9aa6c9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* stat cards */
.ov-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e8f1ff;color:var(--blue)}
.ov-ico.c1{background:#e8f1ff;color:#0b6cff}.ov-ico.c2{background:#f0eaff;color:#6d3df0}.ov-ico.c3{background:#e6f7ee;color:#12803f}.ov-ico.c4{background:#fff4dc;color:#b7791f}.ov-ico.off{background:#f1f3f9;color:#8a94b3}
.ov-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ov-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;min-width:0}
.ov-stat p{margin-top:10px!important;color:var(--muted);font-size:.82rem}
.ov-stat b{display:block;margin-top:1px;font-size:1.3rem;font-weight:800;color:var(--navy)}

/* cards */
.ov-card,.ac-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;min-width:0}
.ov-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ov-card h2,.ac-card h2{font:700 1rem var(--sans);color:var(--navy)}
.ov-note{color:var(--muted);font-size:.85rem}
.ov-more{color:var(--blue);font:600 .85rem var(--sans);text-decoration:none}
.ov-seg{display:flex;padding:3px;border-radius:99px;background:#eef3fc}
.ov-seg button{border:0;background:none;padding:.25rem .8rem;border-radius:99px;font:600 .8rem var(--sans);color:var(--muted);cursor:pointer}
.ov-seg .on{background:#fff;color:var(--blue);box-shadow:0 1px 6px rgba(10,31,110,.12)}
.ov-sum{margin-bottom:8px!important}
.ov-sum b{font-size:1.4rem;font-weight:800;color:var(--navy)}
.ov-sum span{margin-left:8px;color:var(--muted);font-size:.82rem}
.ov-chart{position:relative}
.ov-chart svg{display:block;width:100%;height:auto}
.ov-chart .pt{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 4px rgba(11,108,255,.16)}

/* gateway bars */
.ov-gw{display:grid;gap:14px}
.ov-gw li>div:first-child{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:.9rem}
.ov-gw li i{width:10px;height:10px;border-radius:50%;flex:none}
.ov-gw li b{font-weight:600}
.ov-gw li span{margin-left:auto;color:var(--muted)}
.ov-gw li em{font-style:normal;font-weight:700;color:var(--navy);min-width:2.8em;text-align:right}
.ov-bar{height:7px;border-radius:99px;background:#eef3fc;overflow:hidden}
.ov-bar i{display:block;height:100%;border-radius:99px;transform-origin:left;animation:ovbar .9s .3s ease-out both}
@keyframes ovbar{from{transform:scaleX(0)}to{transform:none}}

/* rows (devices, transactions) */
.ov-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #eef2fb}
.ov-list li:first-child{border-top:0;padding-top:0}
.ov-list li:last-child{padding-bottom:0}
.ov-list li>div:nth-child(2){flex:1;min-width:0}
.ov-list b{display:block;font-weight:600;font-size:.94rem;color:var(--ink)}
.ov-list small{display:block;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.ov-list .dot{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;font:800 1rem var(--sans)}
.ov-amt{text-align:right}
.ov-amt .tag{margin-top:3px}
.tag{display:inline-block;padding:.12rem .62rem;border-radius:99px;font:600 .74rem var(--sans);white-space:nowrap}
.tag.ok{background:#e6f7ee;color:#12803f}.tag.wait{background:#fff4dc;color:#a8650b}.tag.fail{background:#ffecef;color:#c62a47}.tag.off,.tag.soon{background:#f1f3f9;color:#6b7699}

/* account */
.ac-top{text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 18px 18px;background-image:linear-gradient(180deg,#e9f1ff,#fff 90px)}
.ac-top .avatar{width:76px;height:76px;margin:0 auto 10px;font-size:1.9rem;box-shadow:0 8px 20px rgba(11,108,255,.3)}
.ac-top h1{font:700 1.3rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.ac-top p{color:var(--muted);margin-top:2px!important;overflow-wrap:anywhere;font-size:.92rem}
.ac-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.ac-chips span,.ac-chips a{padding:.28rem .8rem;border-radius:99px;background:#eef3fc;color:var(--muted);font:500 .8rem var(--sans);text-decoration:none}
.ac-chips b{color:var(--navy);font-weight:700}
.ac-chips .ac-plan{background:#fff4dc;color:#a8650b;font-weight:600}
.ac-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ac-counts a{display:flex;flex-direction:column;align-items:center;padding:12px 4px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.82rem}
.ac-counts b{font-size:1.4rem;font-weight:800;color:var(--navy)}
.ac-card h2{margin-bottom:14px!important}
.ac-ok{margin:-4px 0 14px!important;padding:.6rem .9rem;border-radius:12px;background:#e6f7ee;color:#12803f;font-size:.9rem;font-weight:600}
.hint{margin-top:5px!important;color:var(--muted);font-size:.8rem}
.field label em{font-style:normal;color:var(--muted);font-weight:400}
.field input:disabled{background:#f1f4fb;color:#7d88ad;cursor:not-allowed}
.ac-menu ul{margin:-4px -4px -6px!important}
.ac-menu li,.ac-menu li>a{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.ac-menu li{padding:10px 4px;border-top:1px solid #eef2fb}
.ac-menu li:first-child{border-top:0}
.ac-menu li>a{flex:1;width:100%;padding:0}
.ac-menu li>div,.ac-menu li>a>div{flex:1;min-width:0;padding:0}
.ac-menu b{display:block;font-weight:600;font-size:.94rem}
.ac-menu small{display:block;color:var(--muted);font-size:.78rem}
.ac-menu li>.tag{padding:.12rem .62rem}
.ac-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e8f1ff;color:var(--blue)}
.ac-out .btn{width:100%;background:#fff;color:#c62a47;border-color:#f3c6cf}
.ac-out .btn:hover{background:#fff3f5}
.ac-out svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac-ver{text-align:center;color:#9aa6c9;font-size:.78rem}

@media (min-width:720px){
  .ov{max-width:980px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-hi,.ov-hero,.ov-quick,.ov-setup,.ov-stats,.ov-wide{grid-column:1/-1}
  .ov-stats{grid-template-columns:repeat(4,1fr)}
  .ov-big b{font-size:3.1rem}
}
@media (max-width:360px){.ov-big b{font-size:2.3rem}.ov-quick{gap:6px}}
@media (prefers-reduced-motion:reduce){.ov>*,.ac>*,.ov-bar i,.ov-live i{animation:none!important}}

/* ---- shared page header + gateway ---- */
.gw{max-width:760px;margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.gw>*,.gw-form>*{animation:ovup .5s calc(var(--i,0) * 55ms) ease-out both}
.gw p,.gw h1,.gw h2,.gw h3,.gw-form h2{margin:0}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pg-head h1{font:700 1.5rem/1.25 var(--sans);color:var(--navy);margin:0}
.pg-head p{color:var(--muted);font-size:.86rem;margin-top:2px}
.pg-head .btn{flex:none;padding:.55rem 1.1rem;font-size:.92rem}
.back{display:inline-block;margin-bottom:2px;color:var(--blue);font:600 .85rem var(--sans);text-decoration:none}
.field textarea{width:100%;font:500 1rem var(--sans);color:var(--ink);padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fbfdff;resize:vertical;transition:border-color .2s,box-shadow .2s}
.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,108,255,.14);background:#fff}

/* empty state */
.gw-empty{text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 18px}
.gw-empty-ico{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:#e8f1ff;color:var(--blue)}
.gw-empty-ico svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gw-empty h2{font:700 1.2rem var(--sans);color:var(--navy)}
.gw-empty p{color:var(--muted);font-size:.9rem;margin:6px 0 18px}
.gw-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gw-quick a{display:flex;align-items:center;gap:10px;padding:.7rem .8rem;border-radius:16px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:600;text-decoration:none;transition:transform .15s,border-color .2s}
.gw-quick a:hover{border-color:var(--c)}
.gw-quick a:active{transform:scale(.97)}
.gw-quick i,.gw-dot{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--c,#0b6cff);color:#fff;font:800 1rem var(--sans);font-style:normal}

/* summary + warning */
.gw-sum{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 0}
.gw-sum div{display:flex;flex-direction:column;align-items:center}
.gw-sum div+div{border-left:1px solid #eef2fb}
.gw-sum b{font:800 1.4rem var(--sans);color:var(--navy)}
.gw-sum b.g{color:#12803f}.gw-sum b.o{color:#8a94b3}
.gw-sum span{font-size:.78rem;color:var(--muted)}
.gw-warn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fffaf0;border:1px solid #f4dfae;text-decoration:none;color:var(--ink)}
.gw-warn>div{flex:1;min-width:0}
.gw-warn b{display:block;font-size:.92rem;color:#8a5206}
.gw-warn small{display:block;color:#a77a2d;font-size:.78rem;line-height:1.4}

/* gateway cards */
.gw-list{display:grid;gap:12px}
.gw-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;transition:opacity .2s;position:relative;overflow:hidden}
.gw-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.gw-card.off{opacity:.62}
.gw-top{display:flex;align-items:center;gap:12px}
.gw-dot{background:var(--c)}
.gw-name{flex:1;min-width:0}
.gw-name h3{font:700 1rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.gw-name p{color:var(--muted);font-size:.82rem}
.sw{flex:none;position:relative;width:46px;height:26px;border:0;border-radius:99px;background:#cdd6ee;cursor:pointer;transition:background .2s}
.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(10,31,110,.3);transition:transform .2s}
.sw.on{background:linear-gradient(135deg,var(--royal),var(--blue))}
.sw.on i{transform:translateX(20px)}
.gw-num{margin:14px 0 10px!important;font:800 1.45rem/1 var(--sans);letter-spacing:.04em;color:var(--ink)}
.gw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--muted);font-size:.82rem}
.gw-meta b{color:var(--ink);font-weight:600}
.gw-act{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eef2fb}
.gw-act form{margin:0}
.gw-act a,.gw-act button{display:inline-block;padding:.38rem 1rem;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--blue);font:600 .85rem var(--sans);text-decoration:none;cursor:pointer}
.gw-act .del{color:#c62a47}
.gw-act .del:hover{background:#fff3f5;border-color:#f3c6cf}

/* form */
.gw-form{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.gw-form h2.gap{margin-top:20px}
.gw-prev{padding:14px;border-radius:20px;background:linear-gradient(135deg,#eaf2ff,#e3f4ff);border:1px solid #d3e6ff}
.gw-prev>p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.gw-pcard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(10,31,110,.08)}
.gw-pcard b{display:block;font-weight:700;color:var(--navy)}
.gw-pcard small{display:block;color:var(--muted);font-size:.82rem}
.gw-prev .hint{display:block;margin-top:10px}
.gw-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gw-tile{position:relative;cursor:pointer}
.gw-tile input,.gw-seg input{position:absolute;opacity:0;pointer-events:none}
.gw-tile span{display:flex;align-items:center;gap:10px;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:16px;background:#fff;font-weight:600;transition:border-color .2s,box-shadow .2s,background .2s}
.gw-tile i{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--c);color:#fff;font:800 .95rem var(--sans);font-style:normal}
.gw-tile input:checked+span{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);background:color-mix(in srgb,var(--c) 6%,#fff)}
.gw-tile input:focus-visible+span,.gw-seg input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}
.gw-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:#eef3fc}
.gw-seg label{position:relative;cursor:pointer}
.gw-seg span{display:block;text-align:center;padding:.55rem .2rem;border-radius:11px;color:var(--muted);font:600 .9rem var(--sans);transition:background .2s,color .2s}
.gw-seg input:checked+span{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(10,31,110,.12)}
.gw-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gw-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #eef2fb;cursor:pointer}
.gw-opt:first-of-type{border-top:0;padding-top:0}
.gw-opt b{display:block;font-weight:600;font-size:.94rem}
.gw-opt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.chk-sw{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:46px;height:26px;margin:0;border-radius:99px;background:#cdd6ee;cursor:pointer;transition:background .2s}
.chk-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(10,31,110,.3);transition:transform .2s}
.chk-sw:checked{background:linear-gradient(135deg,var(--royal),var(--blue))}
.chk-sw:checked::after{transform:translateX(20px)}
.gw-submit{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.gw-submit .btn{padding:.85rem 1rem;font-size:1rem}
@media (min-width:720px){.gw{max-width:820px}.gw-list{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.gw>*,.gw-form>*{animation:none!important}}

/* ---- brands ---- */
.br{max-width:760px;margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.br>*,.br-form>*{animation:ovup .5s calc(var(--i,0) * 55ms) ease-out both}
.br p,.br h1,.br h2,.br h3,.br-form h2{margin:0}
.br ul{margin:0;padding:0;list-style:none}
.br-empty{text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 18px}
.br-empty h2{font:700 1.2rem var(--sans);color:var(--navy)}
.br-empty>p{color:var(--muted);font-size:.9rem;margin:6px 0 16px}
.br-perks{display:grid;gap:8px;max-width:300px;margin:0 auto 20px!important;text-align:left}
.br-perks li{display:flex;align-items:center;gap:10px;font-size:.92rem}
.br-perks i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#e6f7ee;color:#12803f;font:700 .75rem var(--sans);font-style:normal}

.br-list{display:grid;gap:14px}
.br-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:opacity .2s,transform .2s,box-shadow .2s}
.br-card:hover{box-shadow:0 12px 30px rgba(10,31,110,.08)}
.br-card.off{opacity:.62}
.br-banner{display:block;height:64px;background:var(--c);background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,#fff))}
.br-body{padding:0 16px 16px}
.br-id{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-28px}
.br-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#fff;border:3px solid #fff;box-shadow:0 6px 16px rgba(10,31,110,.16);color:var(--c);font:800 1.4rem var(--sans);overflow:hidden}
.br-logo img{width:100%;height:100%;object-fit:cover;display:block}
.br-logo.xl{flex:none;width:72px;height:72px;border-radius:22px;font-size:1.8rem}
.br-name{display:block;margin-top:10px;text-decoration:none;color:inherit}
.br-name h3{font:700 1.1rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.br-name p{color:var(--muted);font-size:.84rem;overflow-wrap:anywhere}
.br-gws{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.br-gws span{display:inline-flex;align-items:center;gap:6px;padding:.2rem .65rem;border-radius:99px;background:#f1f5fd;font:600 .76rem var(--sans);color:var(--ink)}
.br-gws span i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.br-gws .none{padding:.2rem .65rem;border-radius:99px;border:1.5px dashed #b9d2ff;color:var(--blue);font:600 .76rem var(--sans);text-decoration:none}
.br-key{display:flex;align-items:center;gap:8px;padding:.4rem .45rem .4rem .8rem;border-radius:12px;background:#f1f5fd;border:1px solid #e3eaf8}
.br-key code{flex:1;min-width:0;font:500 .8rem ui-monospace,Consolas,monospace;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-key.lg code{white-space:normal;overflow-wrap:anywhere;font-size:.82rem;padding:.2rem 0}
.br-key form{margin:0}
.br-key button{flex:none;border:0;padding:.38rem .9rem;border-radius:99px;background:var(--blue);color:#fff;font:600 .8rem var(--sans);cursor:pointer}
.br-key button.done{background:#16a34a}
.br-lbl{display:block;margin:14px 0 6px;font:600 .85rem var(--sans);color:var(--ink)}
.br-unset{color:#9aa6c9;font-size:.88rem}

/* detail */
.br-secret{padding:14px;border-radius:20px;background:#fff8e6;border:1px solid #f4dfae}
.br-secret b{color:#8a5206}
.br-secret p{color:#a77a2d;font-size:.85rem;margin:4px 0 10px}
.br-hero{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;padding:0 16px 16px}
.br-hero-bg{height:88px;margin:0 -16px;background:var(--c);background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#fff))}
.br-hero-in{display:flex;align-items:flex-end;gap:12px;margin-top:-36px}
.br-hero-in>div{flex:1;min-width:0;padding-bottom:4px}
.br-hero h1{font:700 1.35rem/1.2 var(--sans);color:var(--navy);overflow-wrap:anywhere}
.br-hero p{color:var(--muted);font-size:.86rem}
.br-hero a{color:var(--blue);text-decoration:none}
.br-hero .tag{align-self:flex-end;margin-bottom:6px}
.br-desc{margin-top:12px!important;color:var(--ink)!important;font-size:.92rem!important;line-height:1.6}
.br-actions{margin-top:14px}
.br-actions .btn{padding:.5rem 1.3rem;font-size:.92rem}
.br-stats{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 0}
.br-stats div{display:flex;flex-direction:column;align-items:center}
.br-stats div+div{border-left:1px solid #eef2fb}
.br-stats b{font:800 1.25rem var(--sans);color:var(--navy)}
.br-stats span{font-size:.78rem;color:var(--muted)}
.br-glist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #eef2fb}
.br-glist li:first-child{border-top:0;padding-top:0}
.br-glist li:last-child{padding-bottom:0}
.br-glist li>div{flex:1;min-width:0}
.br-glist b{display:block;font-weight:600;font-size:.94rem}
.br-glist small{display:block;color:var(--muted);font-size:.78rem}
.br-contact li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #eef2fb;font-size:.92rem}
.br-contact li:first-child{border-top:0;padding-top:0}
.br-contact span{color:var(--muted)}
.br-contact b{font-weight:600;overflow-wrap:anywhere;text-align:right}

/* form */
.br-form{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.br-card.prev:hover{box-shadow:none}
.br-up{display:grid;gap:10px}
.br-file{display:block;cursor:pointer}
.br-file input{position:absolute;opacity:0;width:1px;height:1px}
.br-file span{display:block;padding:14px;border:1.5px dashed #b9d2ff;border-radius:16px;background:#f7faff;text-align:center;color:var(--blue);font:600 .95rem var(--sans);transition:background .2s}
.br-file span:hover{background:#eef5ff}
.br-file small{display:block;margin-top:2px;color:var(--muted);font-weight:400;font-size:.78rem}
.br-file input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}
.br-rm{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#c62a47;cursor:pointer}
.br-colors{display:flex;flex-wrap:wrap;gap:10px}
.br-colors label{position:relative;cursor:pointer}
.br-colors input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.br-colors span{display:block;width:36px;height:36px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .2s,transform .15s}
.br-colors input:checked+span{box-shadow:0 0 0 3px var(--sw)}
.br-colors input:focus-visible+span{outline:3px solid var(--sky);outline-offset:3px}
.br-colors .custom span{background:conic-gradient(#e2136e,#f6921e,#1a9e4b,#0b6cff,#8c3494,#e2136e)}
.br-colors .custom input:checked+span{background:var(--sw)}
.br-colors input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.br-pick{display:grid;gap:8px}
.br-pick label{cursor:pointer}
.br-pick input{position:absolute;opacity:0;pointer-events:none}
.br-pick span{display:flex;align-items:center;gap:12px;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s,background .2s}
.br-pick i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--c);color:#fff;font:800 1rem var(--sans);font-style:normal}
.br-pick span>div{flex:1;min-width:0}
.br-pick b{display:block;font-weight:600;font-size:.94rem}
.br-pick small{display:block;color:var(--muted);font-size:.8rem}
.br-pick em{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef3fc;color:transparent;font-weight:700;font-size:.8rem;transition:background .2s,color .2s}
.br-pick input:checked+span{border-color:var(--c);background:color-mix(in srgb,var(--c) 6%,#fff)}
.br-pick input:checked+span em{background:var(--c);color:#fff}
.br-pick input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}
.br-form details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.br-form details summary::-webkit-details-marker{display:none}
.br-form details summary::after{content:"+";font:600 1.3rem var(--sans);color:var(--blue)}
.br-form details[open] summary::after{content:"–"}
.br-form details summary h2{margin:0!important}
.br-form details[open] summary h2{margin-bottom:14px!important}
.br-form summary em{font-style:normal;color:var(--muted);font-weight:400;font-size:.85rem}
@media (min-width:720px){.br{max-width:900px}.br-list{grid-template-columns:1fr 1fr}.br-form{max-width:760px}}
@media (prefers-reduced-motion:reduce){.br>*,.br-form>*{animation:none!important}}

/* ---- data page ---- */
.dt{max-width:760px;margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.dt>*{animation:ovup .5s calc(var(--i,0) * 55ms) ease-out both}
.dt p,.dt h1,.dt h2{margin:0}
.bi{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-del{background:#fff;color:#c62a47;border-color:#f3c6cf}
.btn-del:hover{background:#fff3f5}

.dt-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px}
.dt-chips::-webkit-scrollbar{display:none}
.dt-chips a{flex:none;padding:.42rem 1rem;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--muted);font:600 .85rem var(--sans);text-decoration:none;transition:background .2s,color .2s}
.dt-chips a.on{background:linear-gradient(135deg,var(--royal),var(--blue));border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(11,108,255,.3)}

.dt-search{display:grid;gap:10px}
.dt-box{position:relative}
.dt-box svg{position:absolute;left:14px;top:50%;width:19px;height:19px;transform:translateY(-50%);fill:none;stroke:#9aa6c9;stroke-width:2;stroke-linecap:round}
.dt-box input{width:100%;padding:.8rem 1rem .8rem 2.7rem;border:1.5px solid var(--line);border-radius:16px;background:#fff;font:500 .95rem var(--sans);color:var(--ink)}
.dt-box input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,108,255,.14)}
.dt-more{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 14px}
.dt-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;font:600 .9rem var(--sans);color:var(--blue)}
.dt-more summary::-webkit-details-marker{display:none}
.dt-more summary::after{content:"+";font-size:1.2rem}
.dt-more[open] summary::after{content:"–"}
.dt-more summary i{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--blue)}
.dt-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:12px}
.dt-selects label{display:grid;gap:5px;font:600 .8rem var(--sans);color:var(--muted)}
.dt-selects select{width:100%;padding:.65rem .7rem;border:1.5px solid var(--line);border-radius:12px;background:#fbfdff;font:500 .92rem var(--sans);color:var(--ink)}
.dt-factions{display:flex;gap:10px;flex-wrap:wrap}
.dt-factions form{margin:0}
.dt-more .dt-factions{padding-bottom:14px}
.dt-factions .btn{padding:.5rem 1.2rem;font-size:.9rem}

.dt-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dt-kpis .ov-stat p{margin-top:10px!important}
.dlt{display:block;margin-top:2px;font:600 .76rem var(--sans);font-style:normal;color:var(--muted)}
.dlt.up{color:#16a34a}.dlt.dn{color:#dc2626}

.dt-pick{min-height:46px;margin-bottom:6px}
.dt-pick b{display:block;font:800 1.45rem/1.2 var(--sans);color:var(--navy)}
.dt-pick span{color:var(--muted);font-size:.82rem}
.dt-chart svg{display:block;width:100%;height:auto}
.dt-chart rect{fill:#bcd6ff;cursor:pointer;transition:fill .15s}
.dt-chart rect:last-of-type{fill:#8ebcff}
.dt-chart rect:hover{fill:#5a9bff}
.dt-chart rect.sel{fill:var(--blue)}

.dt-gw{margin-top:14px}
.dt-gw:first-of-type{margin-top:0}
.dt-gw>div:first-child{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:.9rem}
.dt-gw i{width:10px;height:10px;border-radius:50%;flex:none}
.dt-gw b{font-weight:600}
.dt-gw span{margin-left:auto;color:var(--muted)}
.dt-gw em{font-style:normal;font-weight:700;color:var(--navy);min-width:2.8em;text-align:right}
.dt-gw .ov-bar i{border-radius:99px}

.dt-hours{display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:3px;height:84px}
.dt-hours i{display:block;border-radius:3px 3px 1px 1px;background:#cfe0ff;min-height:4px}
.dt-hours i.pk{background:linear-gradient(180deg,var(--blue),var(--royal))}
.dt-hl{display:flex;justify-content:space-between;margin-top:6px;color:#9aa6c9;font-size:.72rem}
.dt-peak{margin-top:12px!important;padding:.6rem .8rem;border-radius:12px;background:#f1f6ff;color:var(--ink);font-size:.88rem}
.dt-peak b{color:var(--blue)}

.dt-stack{display:flex;height:12px;border-radius:99px;overflow:hidden;background:#eef3fc}
.dt-stack i{display:block;height:100%}
.dt-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:.86rem;color:var(--muted)}
.dt-legend span{display:inline-flex;align-items:center;gap:6px}
.dt-legend i{width:9px;height:9px;border-radius:50%}
.dt-legend b{color:var(--ink)}

.dt-tabs{display:flex;gap:4px;padding:4px;margin-bottom:6px;border-radius:14px;background:#eef3fc;overflow-x:auto;scrollbar-width:none}
.dt-tabs a{flex:1;white-space:nowrap;text-align:center;padding:.45rem .6rem;border-radius:11px;color:var(--muted);font:600 .84rem var(--sans);text-decoration:none}
.dt-tabs a small{font-size:.74rem;opacity:.75}
.dt-tabs a.on{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(10,31,110,.12)}
.dt-row{border-top:1px solid #eef2fb}
.dt-row:first-of-type{border-top:0}
.dt-row summary{list-style:none;display:flex;align-items:center;gap:12px;padding:11px 0;cursor:pointer}
.dt-row summary::-webkit-details-marker{display:none}
.dt-row .dot{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:#fff;font:800 1rem var(--sans)}
.dt-row summary>div:nth-child(2){flex:1;min-width:0}
.dt-row summary b{display:block;font:600 .92rem var(--sans);color:var(--ink);overflow-wrap:anywhere}
.dt-row summary small{display:block;color:var(--muted);font-size:.76rem}
.dt-row .amt{text-align:right}
.dt-row .amt .tag{margin-top:3px}
.dt-row dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 12px;padding:12px;border-radius:14px;background:#f6f9ff}
.dt-row dl div{min-width:0}
.dt-row dt{color:var(--muted);font-size:.74rem}
.dt-row dd{margin:1px 0 0;font:600 .88rem var(--sans);color:var(--ink);overflow-wrap:anywhere}
.dt-acts{display:flex;gap:8px;margin:0 0 12px}
.dt-acts form{margin:0;flex:1}
.dt-acts button{width:100%;padding:.55rem;border-radius:12px;border:0;font:600 .88rem var(--sans);cursor:pointer}
.dt-acts .ok{background:#e6f7ee;color:#12803f}
.dt-acts .no{background:#ffecef;color:#c62a47}
.dt-none{padding:22px 0;text-align:center;color:var(--muted);font-size:.9rem}
.dt-pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid #eef2fb}
.dt-pager a,.dt-pager .off{padding:.4rem 1rem;border-radius:99px;border:1.5px solid var(--line);font:600 .85rem var(--sans);text-decoration:none;color:var(--blue)}
.dt-pager .off{color:#b4bdd6;background:#f7f9fd}
.dt-pager b{color:var(--navy);font-size:.9rem}
.dt-test{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-style:dashed}
.dt-test>div:first-child{flex:1;min-width:220px}
.dt-test h2{font:700 1rem var(--sans);color:var(--navy)}

@media (min-width:720px){
  .dt{max-width:980px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-head,.dt-chips,.dt-search,.dt-kpis,.dt-wide,.dt>.ac-ok,.dt>.br-empty{grid-column:1/-1}
  .dt-kpis{grid-template-columns:repeat(4,1fr)}
  .dt-chips{margin:0;padding:2px 0}
}
@media (prefers-reduced-motion:reduce){.dt>*{animation:none!important}}

/* ---- brand switcher + multi-brand extras ---- */
.br-sw{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:4px 18px 6px}
.br-sw::-webkit-scrollbar{display:none}
.br-sw a{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted);transition:transform .15s}
.br-sw a:active{transform:scale(.94)}
.br-sw .ring{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;padding:3px;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
.br-sw .br-logo{width:100%;height:100%;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 10px rgba(10,31,110,.14)}
.br-sw em{font:600 .76rem var(--sans);font-style:normal;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-sw a.on .ring{border-color:var(--c);box-shadow:0 6px 16px color-mix(in srgb,var(--c) 35%,transparent)}
.br-sw a.on em{color:var(--navy)}
.br-sw a.off{opacity:.55}
.br-sw .add .ring{border:2px dashed #b9d2ff}
.br-sw .add .br-logo{background:#f3f8ff;color:var(--blue);box-shadow:none;font-size:1.6rem;border:0}
.br-hero h2{font:700 1.35rem/1.2 var(--sans);color:var(--navy);overflow-wrap:anywhere}
.br-hero-in form{margin:0 0 6px;align-self:flex-end}
.br-actions{display:flex;align-items:center;gap:10px}
.br-stats4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.br-stats4>div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.br-stats4 b{font:800 1.3rem var(--sans);color:var(--navy)}
.br-stats4 span{font-size:.8rem;color:var(--muted)}
.br-cmp{display:grid;gap:14px}
.br-cmp a{display:block;text-decoration:none;color:inherit}
.br-cmp a>div:first-child{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:.9rem}
.br-cmp i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.br-cmp b{font-weight:600}
.br-cmp span{margin-left:auto;color:var(--muted)}
.br-secret{margin:12px 0 0!important}
@media (min-width:720px){.br-stats4{grid-template-columns:repeat(4,1fr)}}

/* ---- devices ---- */
.dv{max-width:760px;margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.dv>*{animation:ovup .5s calc(var(--i,0) * 55ms) ease-out both}
.dv p,.dv h1,.dv h2,.dv h3{margin:0}
.dv-alert{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff4f4;border:1px solid #f7cfd5;color:#a8283f;font-size:.88rem;line-height:1.5}
.dv-alert i{flex:none;width:9px;height:9px;border-radius:50%;background:#ef4444}
.dv-list{display:grid;gap:12px}
.dv-card{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s,opacity .2s}
.dv-card:hover{box-shadow:0 12px 30px rgba(10,31,110,.08)}
.dv-card:active{transform:scale(.985)}
.dv-card.inactive{opacity:.6}
.dv-top{display:flex;align-items:center;gap:12px}
.dv-name{flex:1;min-width:0}
.dv-name h3{font:700 1.02rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.dv-name p{color:var(--muted);font-size:.82rem}
.dv-ico{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#f1f3f9;color:#8a94b3}
.dv-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dv-ico.online{background:#e6f7ee;color:#12803f}
.dv-ico.new{background:#fff4dc;color:#b7791f}
.dv-ico i{position:absolute;right:-2px;top:-2px;width:12px;height:12px;border-radius:50%;background:#16a34a;border:2px solid #fff;animation:ovpulse 2s infinite}
.dv-ico.xl{width:64px;height:64px;border-radius:20px}
.dv-ico.xl svg{width:30px;height:30px}
.dv-met{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:10px;margin:14px 0 12px;padding:12px;border-radius:16px;background:#f6f9ff}
.dv-met>div{min-width:0}
.dv-met small{display:block;color:var(--muted);font-size:.72rem}
.dv-met b{display:block;font:700 .9rem var(--sans);color:var(--ink);margin:1px 0 4px}
.dv-met .ov-bar{height:5px}
.br-gws .all{background:#f1f5fd;color:var(--muted)}
.dv-hero{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px}
.dv-hname{flex:1;min-width:0}
.dv-hname h1{font:700 1.3rem/1.2 var(--sans);color:var(--navy);overflow-wrap:anywhere}
.dv-hname p{color:var(--muted);font-size:.85rem;margin-bottom:6px!important}
.dv-hname small{color:var(--muted);font-size:.78rem;margin-left:6px}
.dv-hero form{margin:0}
.dv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dv-grid>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.dv-grid span{display:block;color:var(--muted);font-size:.8rem}
.dv-grid b{display:block;margin-top:2px;font:800 1.2rem var(--sans);color:var(--navy);overflow-wrap:anywhere}
.dv-steps{margin:16px 0 0!important;padding:0;list-style:none;display:grid;gap:10px}
.dv-steps li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.dv-steps li b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e8f1ff;color:var(--blue);font:700 .82rem var(--sans)}
.dv-steps em{font-style:normal;color:var(--muted);font-size:.82rem}
.dv-sms{border-top:1px solid #eef2fb}
.dv-sms:first-of-type{border-top:0}
.dv-sms summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer}
.dv-sms summary::-webkit-details-marker{display:none}
.dv-sms summary>div:first-child{flex:1;min-width:0}
.dv-sms b{display:block;font:600 .92rem var(--sans)}
.dv-sms small{display:block;color:var(--muted);font-size:.76rem;overflow-wrap:anywhere}
.dv-sms .r{text-align:right}
.dv-sms p{margin:0 0 10px!important;padding:10px 12px;border-radius:12px;background:#f6f9ff;font-size:.86rem;line-height:1.55;overflow-wrap:anywhere}
.dv-sms p.hint{background:none;padding:0 0 10px;color:var(--muted)}
.dv-res{margin-top:14px;padding:14px;border-radius:16px;font-size:.9rem}
.dv-res.ok{background:#effaf3;border:1px solid #c9ecd6}
.dv-res.ok>b{color:#12803f}
.dv-res.bad{background:#fff4f4;border:1px solid #f7cfd5;color:#a8283f}
.dv-res dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
.dv-res dt{color:var(--muted);font-size:.74rem}
.dv-res dd{margin:1px 0 0;font:600 .9rem var(--sans);color:var(--ink);overflow-wrap:anywhere}
.dv-act{display:flex;gap:10px}
.dv-act form{margin:0;flex:1}
.dv-act .btn{width:100%}
@media (min-width:720px){.dv{max-width:900px}.dv-list{grid-template-columns:1fr 1fr}.dv-grid{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.dv>*{animation:none!important}}