/* ============================================================
   TBH WORLD — Green Glass Cyberpunk Panel Dashboard
   Welcome to TBH BLACK WORLD 🌐
   100% NEON GREEN • FROSTED GLASS • MAX ANIMATION
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root{
  --bg-0:#02010a;
  --bg-1:#03140a;
  --bg-2:#04200d;
  /* ONLY GREEN — no cyan, no magenta, no purple */
  --neon-green:#00ff9d;
  --neon-green2:#00ff5a;
  --neon-green-bright:#7fff00;
  --neon-yellow:#ffea00;
  --neon-red:#ff2b4e;
  --text:#c8ffd8;
  --text-dim:#5fa878;
  /* REAL frosted glass — high transparency + heavy blur */
  --glass:rgba(8,40,18,0.28);
  --glass-strong:rgba(8,40,18,0.45);
  --glass-brd:rgba(0,255,157,0.40);
  --glass-brd-strong:rgba(0,255,157,0.65);
  --glass-blur:blur(6px);
  --glass-blur-strong:blur(8px);
  --online:#00ff9d;
  --offline:#ff2b4e;
  /* MAX heavy multi-layer green glow */
  --glow-green:0 0 10px var(--neon-green),0 0 22px var(--neon-green),0 0 48px rgba(0,255,157,.8),0 0 90px rgba(0,255,157,.6),0 0 140px rgba(0,255,157,.4);
  --glow-green-max:0 0 14px var(--neon-green),0 0 30px var(--neon-green),0 0 60px rgba(0,255,157,.9),0 0 100px rgba(0,255,157,.7),0 0 180px rgba(0,255,157,.5);
  --glow-green-soft:0 0 8px rgba(0,255,157,.6),0 0 18px rgba(0,255,157,.4),0 0 40px rgba(0,255,157,.2);
  --glow-red:0 0 8px var(--neon-red),0 0 18px var(--neon-red),0 0 38px rgba(255,43,78,.6);
  --glow-yellow:0 0 8px var(--neon-yellow),0 0 18px var(--neon-yellow),0 0 38px rgba(255,234,0,.6);
  /* Telegram Mini App theme fallbacks (overridden by SDK when inside TG) */
  --tg-bg:#02010a; --tg-text:#c8ffd8; --tg-dim:#5fa878;
  --tg-btn:#00ff9d; --tg-btn-text:#02010a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow-x:hidden}

body{
  font-family:'Rajdhani',sans-serif;
  background:var(--bg-0);
  color:var(--text);
  position:relative;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Telegram Mini App safe-area — keeps content under the native header/footer */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* ===== Telegram Mini App overrides =====
   Telegram injects --tg-* theme vars from the SDK script (index.html/admin.html).
   When running inside Telegram we keep the cyberpunk neon look but make the
   viewport fill the WebView cleanly (no extra scrollbars, no double bounce). */
@media (display-mode: standalone),(display-mode: window-controls-overlay){
  html,body{height:100%;height:100dvh}
}

/* ===== STATIC GREEN CYBERPUNK BACKGROUND (no canvas/particles — fast) ===== */
#bg-canvas{position:fixed;inset:0;z-index:0;display:block;
  background:radial-gradient(ellipse at 50% 30%,#062814 0%,#02060c 55%,#01030a 100%);
  filter:none;}

/* CRT scanlines — static (no animation for performance) */
.scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,255,157,0.04) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:overlay;
}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.65) 100%);}
/* glow sweep disabled for performance */
.glow-sweep{display:none}

/* ===== BOOT / VERIFICATION SCREEN ===== */
#boot-screen{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(ellipse at 50% 40%,#03180c 0%,#02010a 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:24px;
  transition:opacity .8s ease,visibility .8s;
}
#boot-screen.hide{opacity:0;visibility:hidden;pointer-events:none}

.boot-logo{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.4rem,8vw,6rem);
  letter-spacing:.18em;line-height:1;
  color:var(--neon-green);
  filter:drop-shadow(0 0 10px var(--neon-green)) drop-shadow(0 0 30px var(--neon-green));
}
.boot-sub{
  font-family:'Share Tech Mono',monospace;color:var(--neon-green);
  font-size:clamp(.8rem,2.4vw,1.15rem);letter-spacing:.4em;
  text-transform:uppercase;opacity:1;
  text-shadow:0 0 6px var(--neon-green),0 0 18px var(--neon-green),0 0 40px rgba(0,255,157,.7);
}

/* ===== ANIMATED HACKER GLOBE (boot) ===== */
.boot-globe{
  position:relative;width:clamp(90px,22vw,150px);height:clamp(90px,22vw,150px);
  display:inline-block;
  filter:drop-shadow(0 0 12px var(--neon-green)) drop-shadow(0 0 30px var(--neon-green2));
}
.boot-globe svg{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}

.boot-status{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.85rem;min-height:1.2em;letter-spacing:.1em}
.boot-bar{width:min(440px,80vw);height:6px;background:rgba(0,255,157,.12);border-radius:6px;overflow:hidden;border:1px solid rgba(0,255,157,.3)}
.boot-fill{height:100%;width:0;background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));box-shadow:var(--glow-green);transition:width .25s}

/* Human verification card — green glass */
.verify-card{
  margin-top:8px;width:min(460px,92vw);
  background:var(--glass);border:1px solid var(--glass-brd-strong);
  border-radius:16px;padding:26px 24px 22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 60px rgba(0,255,157,.25),inset 0 0 30px rgba(0,255,157,.1);
  position:relative;
}
.verify-card::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;
  background:linear-gradient(135deg,var(--neon-green),transparent 40%,transparent 60%,var(--neon-green2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.verify-title{font-family:'Orbitron',sans-serif;font-weight:700;color:var(--neon-green);letter-spacing:.16em;font-size:1.05rem;text-transform:uppercase;margin-bottom:4px;text-shadow:0 0 10px var(--neon-green),0 0 24px rgba(0,255,157,.6)}
.verify-ip{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.8rem;margin-bottom:14px;word-break:break-all}
.verify-ip b{color:var(--neon-green);text-shadow:0 0 8px var(--neon-green)}
.verify-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px;font-size:.9rem}
.verify-dot{width:9px;height:9px;border-radius:50%;background:var(--neon-green);box-shadow:var(--glow-green);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.verify-btn{
  width:100%;padding:14px;border:none;border-radius:10px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#02010a;background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));
  font-size:.92rem;transition:transform .15s,box-shadow .25s,opacity .25s;
  box-shadow:var(--glow-green);
}
.verify-btn:hover{transform:translateY(-2px);box-shadow:0 0 14px var(--neon-green),0 0 34px var(--neon-green),0 0 70px rgba(0,255,157,.8)}
.verify-btn:active{transform:translateY(0)}
.verify-btn:disabled{opacity:.5;cursor:not-allowed}
.verify-challenge{display:none;margin-top:6px;text-align:left}
.verify-q{font-family:'Share Tech Mono',monospace;color:var(--neon-green);font-size:1.5rem;letter-spacing:.3em;text-align:center;margin:10px 0 8px;font-weight:700;text-shadow:0 0 12px var(--neon-green),0 0 28px rgba(0,255,157,.6)}
.verify-note{font-size:.72rem;color:var(--text-dim);text-align:center;margin-top:8px;line-height:1.4}

/* ===== MAIN APP ===== */
#app{position:relative;z-index:3;opacity:0;transition:opacity .8s;min-height:100vh;display:none}
#app.show{display:block;opacity:1}

/* Header — REAL green frosted glass */
.app-header{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(3,20,10,.85),rgba(3,20,10,.55));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1.5px solid var(--glass-brd-strong);
  box-shadow:0 4px 40px rgba(0,255,157,.25),0 0 80px rgba(0,255,157,.1);
  padding:14px clamp(12px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(1.2rem,3.5vw,1.7rem);
  letter-spacing:.14em;
  color:var(--neon-green);
  text-shadow:0 0 24px rgba(0,255,157,.5);
  filter:drop-shadow(0 0 8px rgba(0,255,157,.6));
}
/* ===== ANIMATED HACKER GLOBE (header brand) ===== */
.brand-globe{
  position:relative;width:38px;height:38px;
  filter:drop-shadow(0 0 6px var(--neon-green)) drop-shadow(0 0 16px var(--neon-green2));
}
.brand-globe svg{width:100%;height:100%}
.brand-tag{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}

.header-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Access timer — green */
.access-timer{
  display:flex;align-items:center;gap:10px;
  font-family:'Share Tech Mono',monospace;
  background:rgba(0,0,0,.35);border:1px solid var(--glass-brd);
  border-radius:10px;padding:8px 14px;
  box-shadow:inset 0 0 12px rgba(0,255,157,.1);
}
.access-timer .lbl{font-size:.66rem;color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase}
.access-timer .val{font-size:1.05rem;color:var(--neon-green);font-weight:700;text-shadow:0 0 8px var(--neon-green),0 0 20px rgba(0,255,157,.7)}
.access-timer.warn .val{color:var(--neon-yellow);text-shadow:0 0 8px var(--neon-yellow),0 0 20px rgba(255,234,0,.7)}
.access-timer.expired .val{color:var(--neon-red);text-shadow:0 0 8px var(--neon-red),0 0 20px rgba(255,43,78,.7)}
.icon-btn{
  background:rgba(0,255,157,.1);border:1px solid var(--glass-brd);color:var(--neon-green);
  width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:.2s;
  box-shadow:0 0 10px rgba(0,255,157,.15);
}
.icon-btn:hover{background:rgba(0,255,157,.22);box-shadow:0 0 14px var(--neon-green),0 0 30px rgba(0,255,157,.6)}

/* Hero / brand banner — green + BIG EARTH GLOBE */
.hero{
  text-align:center;padding:clamp(30px,7vw,60px) 16px 18px;position:relative;
}
.hero h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.1em;line-height:1.1;
  color:var(--neon-green);
  animation:glowpulse 4s ease-in-out infinite;
  filter:drop-shadow(0 0 16px var(--neon-green)) drop-shadow(0 0 40px var(--neon-green2)) drop-shadow(0 0 80px rgba(0,255,157,.6));
}
.hero p{font-family:'Share Tech Mono',monospace;color:var(--text-dim);letter-spacing:.2em;margin-top:10px;font-size:.8rem;text-transform:uppercase}

/* ===== BIG ROTATING GREEN EARTH GLOBE (PNG style) ===== */
.earth-stage{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;perspective:900px;
}
.earth-orbit{
  position:relative;width:clamp(220px,42vw,340px);height:clamp(220px,42vw,340px);
  display:flex;align-items:center;justify-content:center;
}
.earth-globe{
  position:relative;width:72%;height:72%;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(0,255,157,.35) 0%, rgba(0,80,40,.4) 35%, rgba(2,8,4,.95) 75%),
    repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(0,255,157,.08) 14px, rgba(0,255,157,.08) 15px),
    repeating-linear-gradient(0deg, transparent 0, transparent 14px, rgba(0,255,157,.08) 14px, rgba(0,255,157,.08) 15px);
  box-shadow:
    inset 0 0 60px rgba(0,255,157,.5),
    inset -20px -20px 80px rgba(0,0,0,.8),
    0 0 40px var(--neon-green),
    0 0 80px rgba(0,255,157,.6),
    0 0 160px rgba(0,255,157,.35);
  border:1.5px solid rgba(0,255,157,.6);
  overflow:hidden;
}
/* latitude lines on globe */
.earth-globe::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 16%, rgba(0,255,157,.22) 16.5%, transparent 17%);
  mix-blend-mode:screen;
}
/* longitude arcs */
.earth-globe::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(ellipse 100% 30% at 50% 50%, transparent 0, transparent 24%, rgba(0,255,157,.18) 24.5%, transparent 25%),
    repeating-radial-gradient(ellipse 30% 100% at 50% 50%, transparent 0, transparent 24%, rgba(127,255,0,.14) 24.5%, transparent 25%);
  mix-blend-mode:screen;
}
/* orbiting rings around globe */
.earth-ring{
  position:absolute;border:1.5px solid rgba(0,255,157,.5);border-radius:50%;
  pointer-events:none;
}
.earth-ring.r1{inset:0;transform:rotateX(72deg);border-top-color:transparent;border-bottom-color:transparent;box-shadow:0 0 20px rgba(0,255,157,.4)}
.earth-ring.r2{inset:8%;transform:rotateX(110deg) rotateZ(40deg);border-color:rgba(127,255,0,.35);box-shadow:0 0 16px rgba(127,255,0,.3)}
.earth-ring.r3{inset:-6%;transform:rotateX(20deg);border-color:rgba(0,255,157,.22);border-left-color:transparent;border-right-color:transparent}
.earth-glow{
  position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(0,255,157,.25) 0%, transparent 60%);
}

/* Stat boxes — REAL frosted glass + animated holographic border + MAX glow */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,20px);padding:0 clamp(12px,4vw,40px) 8px;max-width:1500px;margin:0 auto}
.stat-box{
  position:relative;overflow:hidden;
  background:var(--glass);border:1.5px solid var(--glass-brd-strong);border-radius:18px;
  padding:clamp(16px,3vw,26px) clamp(14px,3vw,24px);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 0 20px rgba(0,255,157,.15),inset 0 0 16px rgba(0,255,157,.06);
}
.stat-box::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(0,255,157,.12));pointer-events:none}
.stat-box::after{content:"";position:absolute;inset:-1.5px;border-radius:18px;padding:1.5px;
  background:linear-gradient(135deg,var(--neon-green),transparent 30%,transparent 70%,var(--neon-green-bright));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7;
}
.stat-box .s-label{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.stat-box .s-value{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(1.6rem,5vw,2.8rem);line-height:1;letter-spacing:.04em}
.stat-box .s-foot{font-family:'Share Tech Mono',monospace;font-size:.66rem;color:var(--text-dim);letter-spacing:.1em}
.stat-total .s-value{color:var(--neon-green);text-shadow:0 0 12px var(--neon-green),0 0 28px var(--neon-green),0 0 60px rgba(0,255,157,.9)}
.stat-online .s-value{color:var(--neon-green-bright);text-shadow:0 0 12px var(--neon-green-bright),0 0 28px var(--neon-green-bright),0 0 60px rgba(127,255,0,.9)}
.stat-offline .s-value{color:var(--neon-red);text-shadow:0 0 12px var(--neon-red),0 0 28px var(--neon-red),0 0 60px rgba(255,43,78,.9)}
.stat-box .ring{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:2px solid currentColor;opacity:.3;border-right-color:transparent;border-bottom-color:transparent}
.scan-chip{position:absolute;top:10px;right:12px;font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--neon-green);opacity:.7;letter-spacing:.1em;text-shadow:0 0 6px var(--neon-green)}

@keyframes borderflow{0%{box-shadow:0 0 30px rgba(0,255,157,.15),inset 0 0 24px rgba(0,255,157,.08)}50%{box-shadow:0 0 50px rgba(0,255,157,.3),inset 0 0 30px rgba(0,255,157,.15)}100%{box-shadow:0 0 30px rgba(0,255,157,.15),inset 0 0 24px rgba(0,255,157,.08)}}

/* ===== NUMBER SEARCH BAR (green glass) ===== */
.num-search-bar{
  position:relative;display:flex;align-items:center;gap:10px;
  max-width:1500px;margin:16px auto 0;padding:0 clamp(12px,4vw,40px);
}
.num-search-bar .num-icon{position:absolute;left:calc(clamp(12px,4vw,40px) + 16px);font-size:1.2rem;filter:drop-shadow(0 0 6px var(--neon-green));pointer-events:none;z-index:1}
.num-search-input{
  flex:1;width:100%;background:var(--glass-strong);border:1.5px solid var(--glass-brd-strong);
  border-radius:14px;padding:16px 50px 16px 50px;color:var(--neon-green);
  font-family:'Share Tech Mono',monospace;font-size:1rem;letter-spacing:.06em;
  outline:none;transition:.2s;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 0 16px rgba(0,255,157,.25),inset 0 0 14px rgba(0,255,157,.08);
}
.num-search-input::placeholder{color:rgba(0,255,157,.5);letter-spacing:.1em}
.num-search-input:focus{border-color:var(--neon-green);box-shadow:0 0 16px var(--neon-green),0 0 40px rgba(0,255,157,.5),inset 0 0 20px rgba(0,255,157,.12)}
.num-clear{
  position:absolute;right:calc(clamp(12px,4vw,40px) + 10px);
  background:rgba(0,255,157,.1);border:1px solid var(--neon-green);color:var(--neon-green);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:.2s;z-index:1;
}
.num-clear:hover{background:rgba(0,255,157,.25);box-shadow:0 0 14px var(--neon-green)}

/* Search + filter bar — green glass */
.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  max-width:1500px;margin:14px auto 0;padding:0 clamp(12px,4vw,40px);
}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:420px}
.search-input{
  width:100%;background:var(--glass-strong);border:1.5px solid var(--glass-brd-strong);border-radius:12px;
  padding:11px 14px 11px 38px;color:var(--text);font-family:'Share Tech Mono',monospace;font-size:.9rem;
  outline:none;transition:.2s;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 0 10px rgba(0,255,157,.25),inset 0 0 20px rgba(0,255,157,.08);
}
.search-input::placeholder{color:var(--text-dim)}
.search-input:focus{border-color:var(--neon-green);box-shadow:0 0 14px var(--neon-green),0 0 40px rgba(0,255,157,.5),inset 0 0 24px rgba(0,255,157,.15)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--neon-green);font-size:1rem;filter:drop-shadow(0 0 4px var(--neon-green))}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  background:var(--glass-strong);border:1px solid var(--glass-brd-strong);color:var(--text-dim);
  padding:8px 14px;border-radius:20px;cursor:pointer;font-family:'Share Tech Mono',monospace;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;transition:.2s;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.pill:hover{border-color:var(--neon-green);color:var(--text)}
.pill.active{background:rgba(0,255,157,.2);border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 8px var(--neon-green),0 0 22px rgba(0,255,157,.5)}
.refresh-btn{
  background:rgba(0,255,157,.15);
  border:1px solid var(--glass-brd);color:var(--neon-green);
  padding:9px 16px;border-radius:10px;cursor:pointer;font-family:'Share Tech Mono',monospace;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;transition:.2s;display:flex;align-items:center;gap:8px;
}
.refresh-btn:hover{box-shadow:0 0 16px var(--neon-green),0 0 40px rgba(0,255,157,.6),0 0 80px rgba(0,255,157,.3)}
.refresh-btn.spinning .ic{animation:spin 1s linear infinite}

/* Device list — green glass cards */
.device-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(10px,2vw,18px);padding:16px clamp(12px,4vw,40px) 32px;max-width:1500px;margin:0 auto;
}
.device-card{
  position:relative;background:var(--glass);border:1.5px solid var(--glass-brd-strong);border-radius:16px;
  padding:16px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 0 8px rgba(0,255,157,.15),inset 0 0 20px rgba(0,255,157,.05);
  transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  animation:cardin .5s ease both;
}
@keyframes cardin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.device-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--offline);box-shadow:0 0 8px currentColor,0 0 16px currentColor}
.device-card.online::before{background:var(--online)}
/* data-stream corner accent — green */
.device-card::after{content:"";position:absolute;top:0;right:0;width:40px;height:40px;
  background:linear-gradient(225deg,rgba(0,255,157,.12),transparent 60%);pointer-events:none}
.device-card:hover{transform:translateY(-4px);border-color:var(--neon-green);box-shadow:0 0 10px var(--neon-green),0 0 30px rgba(0,255,157,.35),inset 0 0 20px rgba(0,255,157,.05)}
.device-card.online:hover{box-shadow:0 0 10px var(--neon-green),0 0 30px rgba(0,255,157,.35),inset 0 0 20px rgba(0,255,157,.05)}
.device-card.matched{border-color:var(--neon-yellow)!important;box-shadow:0 0 10px var(--neon-yellow),0 0 30px rgba(255,234,0,.4),inset 0 0 20px rgba(255,234,0,.1)!important;animation:matchflash 1.2s ease-in-out infinite}
@keyframes matchflash{0%,100%{box-shadow:0 0 10px var(--neon-yellow),0 0 30px rgba(255,234,0,.4),inset 0 0 20px rgba(255,234,0,.1)}50%{box-shadow:0 0 20px var(--neon-yellow),0 0 50px rgba(255,234,0,.6),inset 0 0 28px rgba(255,234,0,.18)}}

.dc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dc-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);line-height:1.2}
.dc-name small{display:block;font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--text-dim);font-weight:400;letter-spacing:.08em;margin-top:2px;word-break:break-all}
.dc-status{display:flex;align-items:center;gap:6px;font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;white-space:nowrap}
.dc-status.online{color:var(--online);background:rgba(0,255,157,.12);text-shadow:0 0 6px var(--neon-green)}
.dc-status.offline{color:var(--offline);background:rgba(255,43,78,.12);text-shadow:0 0 6px var(--neon-red)}
.dc-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor,0 0 12px currentColor;animation:pulse 1.6s infinite}
.dc-panel{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--neon-green);letter-spacing:.06em;opacity:.9;line-height:1.3;text-shadow:0 0 4px rgba(0,255,157,.5)}

.dc-sims{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-box{background:rgba(0,0,0,.3);border:1px solid rgba(0,255,157,.22);border-radius:8px;padding:8px 10px;transition:.2s}
.sim-box:hover{border-color:var(--neon-green);box-shadow:0 0 8px rgba(0,255,157,.4)}
.sim-box .sl{font-family:'Share Tech Mono',monospace;font-size:.58rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.sim-box .sl .ch{color:var(--neon-green-bright);font-size:.54rem;text-shadow:0 0 4px var(--neon-green-bright)}
.sim-box .num{font-family:'Share Tech Mono',monospace;font-size:.92rem;color:var(--neon-green);font-weight:700;letter-spacing:.02em;margin-top:2px;word-break:break-all;text-shadow:0 0 6px rgba(0,255,157,.5)}
.sim-box .num.unknown{color:var(--text-dim);font-weight:400;font-size:.78rem}

.dc-batt{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:.78rem}
.batt-ic{width:24px;height:12px;border:1.5px solid var(--text-dim);border-radius:2px;position:relative;padding:1px}
.batt-ic::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:var(--text-dim);border-radius:1px}
.batt-fill{height:100%;background:var(--neon-green);border-radius:1px;transition:width .4s,background .4s;box-shadow:0 0 4px var(--neon-green)}
.batt-val{color:var(--text);font-weight:700}
.batt-val.low{color:var(--neon-yellow);text-shadow:0 0 4px var(--neon-yellow)}
.batt-val.crit{color:var(--neon-red);text-shadow:0 0 4px var(--neon-red)}

.dc-sms-btn{
  margin-top:auto;width:100%;padding:11px;border:none;border-radius:9px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;
  color:#02010a;background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));
  transition:transform .15s,box-shadow .25s,opacity .25s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.dc-sms-btn:hover{transform:translateY(-2px);box-shadow:0 0 10px var(--neon-green),0 0 26px rgba(0,255,157,.6)}
.dc-sms-btn:active{transform:translateY(0)}
.dc-sms-btn.has-new{animation:glow 1.6s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 14px rgba(0,255,157,.5)}50%{box-shadow:0 0 14px var(--neon-green),0 0 32px rgba(0,255,157,.9)}}
.dc-lastmsg{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--text-dim);text-align:center;margin-top:4px;letter-spacing:.06em}
.dc-lastmsg b{color:var(--neon-green);font-weight:700;text-shadow:0 0 4px var(--neon-green)}

/* SMS drawer/modal — green glass */
.sms-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s}
.sms-overlay.show{opacity:1;visibility:visible}
.sms-panel{
  position:fixed;right:0;top:0;bottom:0;z-index:61;width:min(520px,100vw);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border-left:1px solid var(--glass-brd-strong);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-10px 0 40px rgba(0,255,157,.15);
}
.sms-panel.show{transform:translateX(0)}
.sms-head{padding:18px 20px;border-bottom:1px solid var(--glass-brd);display:flex;justify-content:space-between;align-items:center;gap:12px}
.sms-head h3{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1rem;color:var(--neon-green);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 8px var(--neon-green)}
.sms-head .dev-name{font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--text-dim);margin-top:4px;word-break:break-all}
.sms-close{background:none;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer;transition:.2s}
.sms-close:hover{color:var(--neon-red);transform:rotate(90deg);text-shadow:0 0 8px var(--neon-red)}
.sms-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sms-empty{text-align:center;color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:.82rem;padding:40px 20px;letter-spacing:.08em}
.sms-msg{background:rgba(0,255,157,.06);border:1px solid rgba(0,255,157,.2);border-radius:10px;padding:11px 13px}
.sms-msg .from{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.sms-msg .sender{font-family:'Share Tech Mono',monospace;color:var(--neon-green);font-weight:700;font-size:.86rem;word-break:break-all;text-shadow:0 0 4px rgba(0,255,157,.5)}
.sms-msg .time{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.64rem;white-space:nowrap}
.sms-msg .body{font-family:'Rajdhani',sans-serif;color:var(--text);font-size:.9rem;line-height:1.4;word-break:break-word}
.sms-msg .sim{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--neon-green-bright);margin-top:6px;letter-spacing:.08em}
.sms-msg.otp{border-color:var(--neon-yellow);background:rgba(255,234,0,.08);box-shadow:0 0 10px var(--neon-yellow),0 0 20px rgba(255,234,0,.25)}
.sms-msg.otp .sender{color:var(--neon-yellow);text-shadow:0 0 6px var(--neon-yellow)}
.sms-foot{padding:12px 16px;border-top:1px solid var(--glass-brd);font-family:'Share Tech Mono',monospace;font-size:.66rem;color:var(--text-dim);text-align:center;letter-spacing:.08em}

/* Pagination — green */
.pagination{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;padding:18px clamp(12px,4vw,40px) 40px;max-width:1500px;margin:0 auto}
.pg-btn{
  background:var(--glass);border:1px solid var(--glass-brd-strong);color:var(--text);min-width:42px;height:42px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 0 8px rgba(0,255,157,.2);
  border-radius:10px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:.84rem;transition:.2s;
  display:flex;align-items:center;justify-content:center;padding:0 10px;
}
.pg-btn:hover:not(:disabled){border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 8px var(--neon-green),0 0 20px rgba(0,255,157,.5)}
.pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pg-btn.active{background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));color:#02010a;font-weight:700;border-color:transparent;box-shadow:0 0 10px var(--neon-green),0 0 22px rgba(0,255,157,.5)}
.pg-search{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:10px;padding:4px 10px 4px 8px}
.pg-search input{background:none;border:none;color:var(--text);font-family:'Share Tech Mono',monospace;font-size:.82rem;width:60px;outline:none;text-align:center}
.pg-search button{background:none;border:none;color:var(--neon-green);cursor:pointer;font-size:.8rem;padding:4px 8px;border-radius:6px;font-family:'Share Tech Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.pg-search button:hover{background:rgba(0,255,157,.15)}
.pg-info{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.74rem;letter-spacing:.06em;width:100%;text-align:center;margin-top:6px}

/* Loading / empty states */
.loading-row{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;grid-column:1/-1}
.loading-row .spinner{width:44px;height:44px;border:3px solid rgba(0,255,157,.18);border-top-color:var(--neon-green);border-radius:50%;animation:spin 1s linear infinite;filter:drop-shadow(0 0 6px var(--neon-green))}
.loading-row .txt{font-family:'Share Tech Mono',monospace;color:var(--neon-green);letter-spacing:.16em;font-size:.8rem;text-shadow:0 0 6px var(--neon-green)}
.empty-row{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-dim);font-family:'Share Tech Mono',monospace;letter-spacing:.1em}

/* Toast — green */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(120px);z-index:90;
  background:var(--glass-strong);border:1.5px solid var(--neon-green);border-radius:12px;padding:12px 22px;
  color:var(--text);font-family:'Share Tech Mono',monospace;font-size:.84rem;letter-spacing:.08em;
  box-shadow:0 0 14px var(--neon-green),0 0 40px rgba(0,255,157,.5),0 0 80px rgba(0,255,157,.3);transition:transform .35s;backdrop-filter:var(--glass-blur);max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--neon-red);box-shadow:0 0 8px var(--neon-red),0 0 24px rgba(255,43,78,.4)}
#toast.ok{border-color:var(--neon-green);box-shadow:0 0 8px var(--neon-green),0 0 24px rgba(0,255,157,.4)}

/* Footer — green */
.app-footer{text-align:center;padding:24px 16px 30px;font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;border-top:1px solid var(--glass-brd);margin-top:20px}
.app-footer b{color:var(--neon-green);text-shadow:0 0 6px var(--neon-green)}

/* ===== Key entry modal (green glass) ===== */
.key-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);padding:20px}
.key-modal.show{display:flex}
.key-card{width:min(440px,92vw);background:var(--glass-strong);border:1.5px solid var(--glass-brd-strong);border-radius:18px;padding:26px 24px;backdrop-filter:var(--glass-blur-strong);-webkit-backdrop-filter:var(--glass-blur-strong);box-shadow:0 0 30px rgba(0,255,157,.4),0 0 80px rgba(0,255,157,.25),0 0 140px rgba(0,255,157,.15)}
.key-card h3{font-family:'Orbitron',sans-serif;color:var(--neon-green);letter-spacing:.12em;text-transform:uppercase;font-size:1rem;margin-bottom:6px;text-shadow:0 0 8px var(--neon-green)}
.key-card p{font-family:'Share Tech Mono',monospace;color:var(--text-dim);font-size:.74rem;line-height:1.5;margin-bottom:16px}
.key-input{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--glass-brd);border-radius:10px;padding:13px 14px;color:var(--text);font-family:'Share Tech Mono',monospace;font-size:.9rem;letter-spacing:.12em;outline:none;text-align:center;text-transform:uppercase;margin-bottom:14px;transition:.2s}
.key-input:focus{border-color:var(--neon-green);box-shadow:0 0 8px var(--neon-green),0 0 22px rgba(0,255,157,.5)}
.key-actions{display:flex;gap:10px}
.key-actions button{flex:1;padding:12px;border:none;border-radius:10px;cursor:pointer;font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;transition:.2s}
.btn-primary{background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));color:#02010a}
.btn-primary:hover{box-shadow:0 0 8px var(--neon-green),0 0 22px rgba(0,255,157,.5)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text-dim);border:1px solid var(--glass-brd)}
.btn-ghost:hover{color:var(--text)}

/* ===== Responsive ===== */
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .header-right{width:100%;justify-content:space-between}
  .toolbar{flex-direction:column;align-items:stretch}
  .search-wrap{max-width:none}
  .num-search-bar{padding:0 12px}
  .num-search-bar .num-icon{left:28px}
  .num-clear{right:22px}
}
@media (max-width:480px){
  .dc-sims{grid-template-columns:1fr}
  .device-grid{grid-template-columns:1fr}
  .dd-info-grid{grid-template-columns:1fr}
  .sms-stats{padding:8px 12px}
  .ss-chip{font-size:.6rem;padding:4px 8px}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Scrollbar — green */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--neon-green),var(--neon-green-bright));border-radius:5px;box-shadow:0 0 6px var(--neon-green)}

/* ===== V3: Card action buttons ===== */
.dc-actions{display:flex;gap:8px;margin-top:10px}
.dc-detail-btn{
  flex:1;padding:8px 12px;border-radius:8px;cursor:pointer;
  font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;transition:.2s;
  background:rgba(0,255,157,.08);border:1px solid var(--glass-brd);color:var(--text-dim);
}
.dc-detail-btn:hover{border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 10px rgba(0,255,157,.4)}
.dc-sms-btn{flex:1}

/* ===== V3: SMS Drawer Redesign ===== */
.sms-head-info{display:flex;align-items:center;gap:14px}
.sms-avatar{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:var(--glass-strong);border:1.5px solid var(--glass-brd-strong);
  box-shadow:0 0 14px rgba(0,255,157,.3),inset 0 0 12px rgba(0,255,157,.1);
}
.sms-stats{
  display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--glass-brd);
  background:rgba(0,0,0,.2);
}
.ss-chip{
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
  font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.06em;
  background:var(--glass-strong);border:1px solid var(--glass-brd);color:var(--text-dim);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.ss-chip.online{border-color:var(--neon-green);color:var(--neon-green)}
.ss-chip.offline{border-color:var(--neon-red);color:var(--neon-red)}
.ss-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.sms-msg{
  margin:10px 16px;padding:12px 14px;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.2s;will-change:transform;
}
.sms-msg:hover{border-color:var(--glass-brd-strong);transform:translateX(-2px)}
.sms-msg.otp{
  border-color:var(--neon-yellow);background:rgba(255,234,0,.06);
  box-shadow:0 0 12px rgba(255,234,0,.2);animation:otppulse 2s ease-in-out infinite;
}
@keyframes otppulse{0%,100%{box-shadow:0 0 12px rgba(255,234,0,.2)}50%{box-shadow:0 0 24px rgba(255,234,0,.4)}}
.sms-msg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sms-sender{color:var(--neon-green);font-weight:700;font-size:.85rem;font-family:'Share Tech Mono',monospace;text-shadow:0 0 4px rgba(0,255,157,.5)}
.sms-time{color:var(--text-dim);font-size:.68rem;font-family:'Share Tech Mono',monospace}
.sms-body-text{color:var(--text);font-size:.84rem;line-height:1.5;word-break:break-word;padding:4px 0}
.sms-msg.otp .sms-body-text{color:var(--neon-yellow);font-weight:600}
.sms-msg-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.sms-sim-tag{
  font-size:.62rem;padding:2px 8px;border-radius:6px;
  background:rgba(0,255,157,.1);border:1px solid var(--glass-brd);color:var(--neon-green);
  font-family:'Share Tech Mono',monospace;letter-spacing:.05em;
}
.sms-ts{font-size:.62rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace}
.sms-empty{
  text-align:center;padding:50px 20px;color:var(--text-dim);
  font-family:'Share Tech Mono',monospace;font-size:.8rem;letter-spacing:.1em;
}

/* ===== V3: Device Detail Panel ===== */
.detail-overlay{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}
.detail-overlay.show{opacity:1;visibility:visible}
.detail-panel{
  position:fixed;right:0;top:0;bottom:0;z-index:66;width:min(560px,100vw);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border-left:1.5px solid var(--glass-brd-strong);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;backdrop-filter:var(--glass-blur-strong);-webkit-backdrop-filter:var(--glass-blur-strong);
  box-shadow:-10px 0 40px rgba(0,255,157,.3),-20px 0 80px rgba(0,255,157,.15);
}
.detail-panel.show{transform:translateX(0)}
.detail-head{
  padding:16px 20px;border-bottom:1px solid var(--glass-brd);
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.2);
}
.detail-back{
  background:rgba(0,255,157,.1);border:1px solid var(--glass-brd-strong);color:var(--neon-green);
  padding:8px 16px;border-radius:8px;cursor:pointer;font-family:'Share Tech Mono',monospace;
  font-size:.74rem;letter-spacing:.1em;transition:.2s;
}
.detail-back:hover{box-shadow:0 0 14px rgba(0,255,157,.5);border-color:var(--neon-green)}
.detail-close{
  background:rgba(255,43,78,.1);border:1px solid var(--neon-red);color:var(--neon-red);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:1rem;transition:.2s;
}
.detail-close:hover{box-shadow:0 0 12px rgba(255,43,78,.5)}
.detail-body{flex:1;overflow-y:auto;padding:0}
.dd-hero{
  position:relative;padding:36px 24px 28px;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse at center top,rgba(0,255,157,.12),transparent 70%);
  border-bottom:1px solid var(--glass-brd);
}
.dd-glow{
  position:absolute;top:50%;left:50%;width:200px;height:200px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,157,.2),transparent 70%);
  animation:ddglow 3s ease-in-out infinite;pointer-events:none;
}
@keyframes ddglow{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}
.dd-icon{font-size:3rem;position:relative;z-index:1;filter:drop-shadow(0 0 16px rgba(0,255,157,.6))}
.dd-title{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:900;color:var(--neon-green);text-shadow:0 0 12px rgba(0,255,157,.6);margin-top:8px;position:relative;z-index:1;letter-spacing:.04em}
.dd-status{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 14px;border-radius:20px;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.1em;position:relative;z-index:1}
.dd-status.online{background:rgba(0,255,157,.1);border:1px solid var(--neon-green);color:var(--neon-green);box-shadow:0 0 12px rgba(0,255,157,.3)}
.dd-status.offline{background:rgba(255,43,78,.1);border:1px solid var(--neon-red);color:var(--neon-red);box-shadow:0 0 12px rgba(255,43,78,.3)}
.dd-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:dddot 1.5s ease-in-out infinite}
@keyframes dddot{0%,100%{opacity:1}50%{opacity:.4}}
.dd-info-grid{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dd-info-item{
  padding:12px 14px;border-radius:12px;background:var(--glass);
  border:1px solid var(--glass-brd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:.2s;
}
.dd-info-item:hover{border-color:var(--glass-brd-strong);box-shadow:0 0 10px rgba(0,255,157,.2)}
.dd-info-item.muted{opacity:.5}
.dd-il{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}
.dd-iv{font-size:.82rem;color:var(--text);word-break:break-word}
.dd-iv.mono{font-family:'Share Tech Mono',monospace;letter-spacing:.02em}
.dd-batt-bar{display:inline-block;width:40px;height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;vertical-align:middle;margin-right:6px}
.dd-batt-bar span{display:block;height:100%;transition:width .5s}
.dd-section-title{
  padding:16px 20px 8px;font-family:'Orbitron',sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.1em;color:var(--neon-green);text-shadow:0 0 6px rgba(0,255,157,.4);
}
.dd-sms-list{padding:0 20px 20px;max-height:400px;overflow-y:auto}
.dd-sms-msg{
  margin-bottom:10px;padding:10px 12px;border-radius:10px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.2s;
}
.dd-sms-msg:hover{border-color:var(--glass-brd-strong)}
.dd-sms-msg.otp{border-color:var(--neon-yellow);background:rgba(255,234,0,.06)}
.dd-msg-from{font-size:.78rem;color:var(--neon-green);font-weight:700;font-family:'Share Tech Mono',monospace;margin-bottom:4px}
.dd-msg-time{float:right;font-size:.64rem;color:var(--text-dim);font-weight:400}
.dd-msg-body{font-size:.8rem;color:var(--text);line-height:1.5;word-break:break-word}
.dd-sms-msg.otp .dd-msg-body{color:var(--neon-yellow)}
.dd-msg-sim{font-size:.6rem;color:var(--text-dim);margin-top:4px;font-family:'Share Tech Mono',monospace}
.dd-actions{padding:16px 20px 24px;border-top:1px solid var(--glass-brd)}
.dd-btn{
  width:100%;padding:12px;border:none;border-radius:10px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.78rem;transition:.2s;
}
.dd-sms-open{background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));color:#02010a}
.dd-sms-open:hover{box-shadow:0 0 16px var(--neon-green),0 0 40px rgba(0,255,157,.5)}

/* ===== V3: Performance — will-change for smooth animations ===== */
.device-card{will-change:transform,box-shadow}
.sms-panel,.detail-panel{will-change:transform}
.earth-globe,.earth-ring{will-change:transform}
.stat-box{will-change:box-shadow}

/* ===== Panel Breakdown (per-panel Online/Offline/Total) ===== */
.panel-breakdown{
  margin:12px 0 0;padding:14px 16px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  border-radius:14px;backdrop-filter:blur(12px);
}
.pb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pb-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.12em;color:var(--neon-green);text-transform:uppercase}
.pb-count{font-size:.68rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace}
.pb-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.pb-list::-webkit-scrollbar{width:4px}
.pb-list::-webkit-scrollbar-thumb{background:var(--neon-green);border-radius:2px}
.pb-empty{text-align:center;padding:16px;color:var(--text-dim);font-size:.78rem}
.pb-row{
  display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;
  padding:8px 10px;border-radius:8px;background:rgba(0,255,157,.04);
  border:1px solid rgba(0,255,157,.1);transition:.2s;font-size:.72rem;
}
.pb-row:hover{background:rgba(0,255,157,.08);border-color:rgba(0,255,157,.2)}
.pb-name{font-family:'Share Tech Mono',monospace;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.pb-stat{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.72rem;text-align:center;min-width:34px}
.pb-total{color:var(--neon-green)}
.pb-online{color:var(--neon-green-bright)}
.pb-offline{color:var(--neon-red)}
.pb-sep{color:var(--text-dim);opacity:.4}

/* ===== Live OTP SMS Feed (global real-time) ===== */
.live-sms-feed{
  margin:12px 0 0;padding:14px 16px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  border-radius:14px;backdrop-filter:blur(12px);
}
.lsf-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lsf-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.12em;color:var(--neon-green);text-transform:uppercase}
.lsf-live{display:flex;align-items:center;gap:5px;font-size:.62rem;color:var(--neon-red);font-family:'Share Tech Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.lsf-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--neon-red);animation:lsf-pulse 1.5s infinite}
@keyframes lsf-pulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--neon-red)}50%{opacity:.3;box-shadow:0 0 2px var(--neon-red)}}
.lsf-count{margin-left:auto;font-size:.68rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace}
.lsf-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.lsf-list::-webkit-scrollbar{width:4px}
.lsf-list::-webkit-scrollbar-thumb{background:var(--neon-green);border-radius:2px}
.lsf-empty{text-align:center;padding:16px;color:var(--text-dim);font-size:.78rem}
.lsf-msg{
  display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:8px;
  background:rgba(0,255,157,.04);border:1px solid rgba(0,255,157,.1);
  animation:lsf-slide .3s ease;
}
.lsf-msg.otp{border-color:var(--neon-yellow);background:rgba(255,234,0,.06)}
@keyframes lsf-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.lsf-msg-top{display:flex;justify-content:space-between;align-items:center}
.lsf-sender{font-size:.7rem;color:var(--neon-green);font-weight:700;font-family:'Share Tech Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.lsf-time{font-size:.6rem;color:var(--text-dim);white-space:nowrap}
.lsf-body{font-size:.76rem;color:var(--text);line-height:1.4;word-break:break-word}
.lsf-msg.otp .lsf-body{color:var(--neon-yellow);font-weight:600}
.lsf-meta{display:flex;gap:8px;font-size:.58rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace}


/* ===== GET NUMBER (web — random online number + live SMS) ===== */
.get-number-section{
  margin:12px 0 0;padding:16px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  border-radius:14px;backdrop-filter:blur(12px);
}
.gn-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.gn-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.12em;color:var(--neon-green);text-transform:uppercase;text-shadow:0 0 8px rgba(0,255,157,.4)}
.gn-sub{font-size:.66rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace}
.gn-actions{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.gn-btn{
  flex:1;min-width:120px;padding:13px 18px;border-radius:10px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--glass-brd);background:rgba(0,0,0,.4);
  color:var(--text);transition:.2s;
}
.gn-get{background:linear-gradient(135deg,rgba(0,255,157,.25),rgba(127,255,0,.15));border-color:var(--neon-green);color:var(--neon-green);text-shadow:0 0 8px rgba(0,255,157,.6)}
.gn-get:hover:not(:disabled){box-shadow:0 0 18px rgba(0,255,157,.5);transform:translateY(-1px)}
.gn-new{background:linear-gradient(135deg,rgba(127,255,0,.18),rgba(0,255,157,.1));border-color:var(--neon-green-bright);color:var(--neon-green-bright)}
.gn-new:hover:not(:disabled){box-shadow:0 0 16px rgba(127,255,0,.45);transform:translateY(-1px)}
.gn-btn:disabled{opacity:.4;cursor:not-allowed}
.gn-btn.spinning{animation:gn-spin .8s linear infinite}
@keyframes gn-spin{to{transform:rotate(360deg)}}
.gn-empty{text-align:center;padding:18px;color:var(--text-dim);font-size:.8rem;font-family:'Share Tech Mono',monospace;letter-spacing:.06em}
.gn-empty b{color:var(--neon-green)}

.gn-card[hidden]{display:none}
.gn-card{
  padding:14px;border-radius:12px;
  background:rgba(0,0,0,.35);border:1px solid var(--glass-brd);
  animation:gn-slide .3s ease;
}
@keyframes gn-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.gn-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gn-card-label{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--neon-green);text-transform:uppercase}
.gn-card-status{display:flex;align-items:center;gap:6px;font-size:.62rem;color:var(--neon-green);font-family:'Share Tech Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.gn-card-sims{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.gn-sim{padding:10px 12px;border-radius:10px;background:rgba(0,255,157,.05);border:1px solid rgba(0,255,157,.15)}
.gn-sim-l{font-size:.66rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace;letter-spacing:.08em;margin-bottom:4px}
.gn-carrier{color:var(--neon-green-bright)}
.gn-sim-num{font-family:'Share Tech Mono',monospace;font-size:1.15rem;font-weight:700;color:var(--neon-green);word-break:break-all;text-shadow:0 0 6px rgba(0,255,157,.4)}
.gn-card-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.gn-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.25)}
.gn-meta-row span:first-child{color:var(--text-dim);font-family:'Share Tech Mono',monospace}
.gn-mono{font-family:'Share Tech Mono',monospace;color:var(--text);font-weight:600}
.gn-sms-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-top:10px;border-top:1px solid rgba(0,255,157,.15)}
.gn-sms-head span:first-child{font-family:'Orbitron',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.1em;color:var(--neon-green);text-transform:uppercase}
.gn-live{display:flex;align-items:center;gap:5px;font-size:.6rem;color:var(--neon-red);font-family:'Share Tech Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.gn-sms-body{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.gn-sms-body::-webkit-scrollbar{width:4px}
.gn-sms-body::-webkit-scrollbar-thumb{background:var(--neon-green);border-radius:2px}
.gn-card-foot{margin-top:10px;text-align:center;font-size:.64rem;color:var(--text-dim);font-family:'Share Tech Mono',monospace;letter-spacing:.06em}

@media(max-width:600px){
  .gn-card-sims{grid-template-columns:1fr}
  .gn-btn{font-size:.7rem;padding:12px 14px}
}

/* ===== Send OTP modal + button ===== */
.dd-otp-send{background:linear-gradient(90deg,var(--neon-green-bright),var(--neon-green));color:#02010a;margin-top:10px}
.dd-otp-send:hover{box-shadow:0 0 16px var(--neon-green-bright),0 0 40px rgba(0,255,157,.5)}

.modal-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex}
.modal-card{
  width:100%;background:var(--glass-bg);border:1px solid var(--neon-green);
  border-radius:16px;padding:24px;backdrop-filter:blur(18px);
  box-shadow:0 0 30px rgba(0,255,157,.25);
}
.modal-title{
  font-family:'Orbitron',sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:.1em;color:var(--neon-green);text-transform:uppercase;
  margin-bottom:6px;
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-btn{
  padding:10px 22px;border:none;border-radius:9px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.75rem;transition:.2s;
}
.modal-btn.cancel{background:rgba(255,255,255,.08);color:var(--text)}
.modal-btn.cancel:hover{background:rgba(255,255,255,.16)}
.modal-btn.primary{background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright));color:#02010a}
.modal-btn.primary:hover{box-shadow:0 0 14px var(--neon-green)}
.modal-btn:disabled{opacity:.5;cursor:wait}

/* ===== Security badge ===== */
.sec-badge{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:8px;
  background:rgba(0,255,157,.1);border:1px solid rgba(0,255,157,.35);
  font-family:'Share Tech Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;color:var(--neon-green);text-transform:uppercase;
  animation:secPulse 3s ease-in-out infinite;
}
.sec-badge .sec-ico{font-size:.85rem}
.sec-badge.blocked{background:rgba(255,43,78,.12);border-color:rgba(255,43,78,.4);color:var(--neon-red)}
.sec-badge.blocked .sec-txt::after{content:"BLOCKED"}
.sec-badge.blocked .sec-txt{display:none}
@keyframes secPulse{0%,100%{box-shadow:0 0 8px rgba(0,255,157,.2)}50%{box-shadow:0 0 16px rgba(0,255,157,.45)}}

/* ===== Panel breakdown header labels + improved rows ===== */
.pb-list-head{
  display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;
  padding:6px 10px;margin-bottom:4px;
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  color:var(--text-dim);text-transform:uppercase;border-bottom:1px solid rgba(0,255,157,.12);
}
.pb-list-head .h-total{text-align:center;min-width:34px;color:var(--neon-green)}
.pb-list-head .h-online{text-align:center;min-width:34px;color:var(--neon-green-bright)}
.pb-list-head .h-offline{text-align:center;min-width:34px;color:var(--neon-red)}
.pb-bar{
  height:4px;border-radius:2px;margin-top:6px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.pb-bar .fill-online{height:100%;background:linear-gradient(90deg,var(--neon-green),var(--neon-green-bright))}
.pb-bar .fill-offline{height:100%;background:var(--neon-red);opacity:.6}
.pb-bar-wrap{display:flex;gap:2px}

/* ===== SMOOTHNESS v10: Jank-free progressive rendering ===== */

/* Smooth fade-in for device cards (staggered) */
@keyframes cardFadeIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.device-card{
  animation:cardFadeIn .35s ease-out both;
  content-visibility:auto;
  contain-intrinsic-size:180px;
}

/* Smooth stat number transitions */
.s-value,.stat-mini .b .v{
  transition:color .3s ease;
}

/* Smooth boot progress bar (already has transition, enhance) */
.boot-fill{
  transition:width .3s cubic-bezier(.4,0,.2,1);
}

/* Smooth panel breakdown row hover */
.pb-row{
  transition:background .15s ease,border-color .15s ease;
}
.pb-row:hover{
  background:rgba(0,255,157,.06);
  border-color:rgba(0,255,157,.15);
}

/* Smooth scrollbar styling for all scrollable areas */
.pb-list::-webkit-scrollbar,
.panel-list::-webkit-scrollbar,
.key-list::-webkit-scrollbar,
.sms-body::-webkit-scrollbar,
.detail-body::-webkit-scrollbar{
  width:5px;
  scrollbar-width:thin;
  scrollbar-color:var(--neon-green) transparent;
}
.pb-list::-webkit-scrollbar-thumb,
.panel-list::-webkit-scrollbar-thumb,
.key-list::-webkit-scrollbar-thumb,
.sms-body::-webkit-scrollbar-thumb,
.detail-body::-webkit-scrollbar-thumb{
  background:var(--neon-green);
  border-radius:3px;
  opacity:.6;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion:reduce){
  .device-card{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Smooth loading spinner */
.spinner{
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}