/* =============================================================================
   NP NETWORK — কনসোল «Ocean Blue» থিম · v1 · [R24 2026-10-19]
   -----------------------------------------------------------------------------
   ভিত্তি: লাইভ কনসোলের আসল HTML/CSS (ভিডিওর ফ্রেম + DOM যাচাই করা)।
   নিয়ম:   • লেখা, বক্স, সাইজ, ক্রম — কিছুই বদলানো হয়নি
           • বদল হয়েছে শুধু কালার + "Network Traffic Intelligence" বক্সের
             ভেতরের সজ্জা (একই তথ্য: ২ বার · ২ নাম · ২ সংখ্যা)
           • শুধুমাত্র #view-console-এর মধ্যে প্রযোজ্য — সাইটের অন্য কোথাও
             কোনো প্রভাব নেই
   রোলব্যাক: index.html থেকে <link> লাইনটি সরালেই (অথবা ব্যাকআপ ফাইল rename)।
   ============================================================================= */

/* ── ১) কনসোলের সাদা কার্ড ── */
#view-console .white-card{
  background:#ffffff !important;
  border:1px solid #dbeafe !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(37,99,235,.08) !important;
}

/* ── ২) ★ Network Traffic Intelligence — নতুন সজ্জা ── */

/* ২ক) যে কার্ডে চার্ট আছে → হালকা গ্রেডিয়েন্ট + গ্রিড-লাইন (একই তথ্য) */
#view-console .white-card:has(#chartBar1){
  background:linear-gradient(165deg,#f5faff,#ffffff) !important;
  padding-bottom:12px !important;
}
#view-console .white-card:has(#chartBar1) > div:has(#chartBar1){
  position:relative;
  padding:14px 6px 0 !important;
  margin-top:12px !important;
  border-radius:14px;
  background:
    repeating-linear-gradient(to top,
      transparent 0 24px,
      #e6efff 24px 25px);
}
/* গ্রিডের নিচের বেসলাইন */
#view-console .white-card:has(#chartBar1) > div:has(#chartBar1)::before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:#e6efff;
}
/* শেষে সময়ের লাইন (আগের লেখা অটুট — শুধু স্টাইল) */
#view-console .white-card:has(#chartBar1)::after{
  content:"Last 60 min  ·  Updated just now";
  display:block;margin-top:11px;padding-top:10px;
  border-top:1px dashed #dbeafe;
  color:#94a3b8;font-size:11px;font-weight:700;
  display:flex;justify-content:space-between;
}

/* ২খ) বার — Ocean Blue গ্রেডিয়েন্ট + গোলাকার উপর + নরম শ্যাডো + হালকা শিন */
#chartBar1,#chartBar2{
  border-radius:12px 12px 0 0 !important;
  position:relative;overflow:hidden;
}
#chartBar1{
  background:linear-gradient(180deg,#38bdf8,#1d4ed8) !important;
  box-shadow:0 10px 22px rgba(29,78,216,.26) !important;
}
#chartBar2{
  background:linear-gradient(180deg,#93c5fd,#60a5fa) !important;
  box-shadow:0 8px 18px rgba(96,165,250,.28) !important;
}
#chartBar1::after,#chartBar2::after{
  content:"";position:absolute;inset:0;border-radius:12px 12px 0 0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.42) 48%,
    rgba(255,255,255,0) 66%);
  animation:npOceanSheen 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes npOceanSheen{
  0%{transform:translateX(-120%)}
  60%,100%{transform:translateX(120%)}
}
@media (prefers-reduced-motion:reduce){
  #chartBar1::after,#chartBar2::after{animation:none}
}

/* ২গ) নাম + সংখ্যার লেবেল (লেখা অপরিবর্তিত) */
#chartName1,#chartName2{ color:#0f172a !important; font-weight:800 !important; }
#chartCount1,#chartCount2{
  display:inline-block !important;
  background:#ffffff !important;
  border:1px solid #dbeafe !important;
  color:#1d4ed8 !important;
  border-radius:20px !important;
  padding:2px 8px !important;
  font-weight:800 !important;
  box-shadow:0 2px 6px rgba(15,23,42,.06) !important;
}
/* লেজেন্ডের রঙিন ডট */
#chartName1::before,#chartName2::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;vertical-align:middle;
}
#chartName1::before{background:linear-gradient(135deg,#38bdf8,#1d4ed8)}
#chartName2::before{background:linear-gradient(135deg,#93c5fd,#60a5fa)}

/* ── ৩) Currently Running ── */
#npLiveCard b{ color:#2563eb !important; }
#liveRangeMeta{ color:#94a3b8 !important; }
#liveRanges > div:not([style*="text-align:center"]){
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#1d4ed8 !important;
  border-radius:9px !important;
  padding:4px 9px !important;
  font-size:11.5px !important;
  font-weight:800 !important;
}

/* ── ৪) সার্চবার + রিফ্রেশ বাটন ── */
#view-console .white-card:has(#searchInput){
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:12px !important;
}
#searchInput{ color:#0f172a !important; }
#view-console button[onclick="forceConsoleRefresh()"]{
  background:#2563eb !important;
  box-shadow:0 4px 12px rgba(37,99,235,.28) !important;
}

/* ── ৫) OTP কার্ড ── */
/* অ্যাপ রানটাইমে <style> ইনজেক্ট করে — তাই স্পেসিফিসিটি বাড়ানো হলো।
   ⚠️ কার্ডে ইনলাইন স্টাইলে বাম প্রান্তে ৪px অ্যাকসেন্ট-বার আছে (আগের ডিজাইন) —
      সেটি রেখেই শুধু রঙ বদলানো হচ্ছে (border-width অপরিবর্তিত)। */
#view-console .console-card,
#view-console #console .console-card,
#view-console div.console-card.console-card{
  background:#ffffff !important;
  border-color:#dbeafe #dbeafe #dbeafe #2563eb !important;  /* বাম = Ocean Blue অ্যাকসেন্ট */
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(37,99,235,.08) !important;
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
#view-console .console-card:hover{
  box-shadow:0 8px 20px rgba(37,99,235,.14) !important;
}
/* কার্ডের নিচের দিকের বিভাজক রেখা */
#view-console .mini-otp{ border-bottom:1px solid #eaf1fd !important; }
/* নাম্বার-চিপ */
#view-console .console-card [data-copy]{
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#1d4ed8 !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}
/* মেসেজ-বক্স */
#view-console .mini-otp .mo-body{
  background:#f5f9ff !important;
  color:#334155 !important;
  border-radius:10px !important;
}
/* OTP-বক্স — Ocean Blue (সাইজ/লেখা অপরিবর্তিত) */
#view-console .otp-box{
  background:linear-gradient(180deg,#f0f9ff,#dbeafe) !important;
  border:1px solid #60a5fa !important;
  color:#1e40af !important;
  border-radius:12px !important;
}
#view-console .otp-box .otp-code,
#view-console .otp-code{
  color:#1d4ed8 !important;
}
#view-console .otp-box.copied{
  background:#dbeafe !important;
  border-color:#3b82f6 !important;
  color:#1e3a8a !important;
}
#view-console .mini-otp{ border-bottom:1px solid #eaf1fd !important; }