/* WhatsApp Campaign Manager — WhatsApp dark theme (owner, 2026-11-11: full site in WhatsApp colours)
   WhatsApp dark surfaces (#111b21 / #202c33), green accents (#00a884 / #25d366).
   Same class names as before, so no Blade view changes are needed. */
:root{
  --bg:#0b141a; --bg2:#111b21;
  --panel:rgba(32,44,51,.88); --panel2:rgba(24,34,41,.94);
  --glass:rgba(134,150,160,.10); --glass-brd:rgba(134,150,160,.30);
  --txt:#e9edef; --muted:#8696a0;
  --accent:#00a884; --accent2:#25d366; --gold:#53bdeb;
  --green:#22c55e; --red:#fb4d6d; --amber:#f59e0b;
  --line:rgba(134,150,160,.30); --radius:18px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(37,211,102,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 10%, rgba(0,168,132,.20), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 55%, #060d10 100%);
  background-attachment:fixed; min-height:100vh;
}
a{color:#53bdeb; text-decoration:none}
a:hover{color:#a5e3ff}
header{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(32,44,51,.92), rgba(32,44,51,.82));
  border-bottom:1px solid var(--glass-brd);
  color:#fff; padding:12px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
header h1{font-size:22px; margin:0; font-weight:800; letter-spacing:.3px}
.header-user{margin-left:auto; display:flex; align-items:center; gap:12px; font-weight:600}
/* EarnNova-style left sidebar: glass panel, vertical links, glowing active pill */
.layout{display:flex; gap:18px; max-width:1680px; margin:20px auto; padding:0 22px 40px; align-items:flex-start}
.sidebar{
  width:262px; flex:0 0 262px; position:sticky; top:76px; border-radius:var(--radius); padding:18px 14px;
  background:linear-gradient(170deg, var(--panel), var(--panel2)); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  max-height:calc(100vh - 96px); overflow:auto;
}
.side-profile{display:flex; align-items:center; gap:11px; padding:8px 10px 14px; border-bottom:1px solid var(--glass-brd); margin-bottom:12px}
.side-profile strong{color:#fff}
.side-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #5eeaa0, #00a884 62%, #075e54); color:#fff; font-weight:800; font-size:17px;
  border:2px solid #d9fdd3; box-shadow:0 0 0 3px rgba(37,211,102,.35), 0 6px 14px rgba(0,0,0,.4);
}
.sidebar nav{display:flex; flex-direction:column; gap:4px}
.side-heading{margin:14px 6px 5px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.side-heading:first-child{margin-top:2px}
.side-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:var(--txt);
  font-weight:600; font-size:15px; transition:background .18s, transform .18s, box-shadow .18s;
}
.side-link:hover{background:rgba(0,168,132,.14); transform:translateX(3px); color:#fff}
.side-link.active{
  background:linear-gradient(90deg, rgba(0,168,132,.55), rgba(37,211,102,.25));
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.55), 0 8px 20px rgba(0,168,132,.35); color:#fff;
}
main{flex:1; min-width:0}
h2,h3{color:#fff}
.not-connected{
  background:rgba(110,18,40,.55); border:1px solid rgba(255,110,140,.65); color:#ffe0e6;
  padding:12px 14px; border-radius:14px; margin-bottom:16px;
}
.not-connected strong{font-size:15px}
/* Green glass notification (EarnNova toast style): connected-state notice,
   not a warning banner. Dismissable with the × button. */
.glass-notice{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:linear-gradient(165deg, rgba(20,90,50,.55), rgba(24,34,41,.92));
  border:1px solid rgba(37,211,102,.65); border-left:4px solid #25d366;
  color:#d3ffe2; padding:12px 14px; border-radius:14px; margin-bottom:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35); backdrop-filter:blur(10px);
  animation:noticeIn .45s cubic-bezier(.2,1.6,.4,1) both;
  transition:opacity .4s ease, transform .4s ease;
}
@keyframes noticeIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:translateY(0)}}
.glass-notice-hide{opacity:0; transform:translateY(-8px)}
.glass-notice a{color:#fff; font-weight:700; text-decoration:underline}
/* Bulk Sender info boxes: old light-theme inline colours (#fff3cd / #f1f1f1)
   became unreadable on the dark glass theme (light text on a light box).
   Dark glass versions with readable text: */
.bulk-warning{
  background:rgba(110,75,8,.55); border:1px solid rgba(255,200,80,.6); border-left:4px solid var(--amber);
  color:#fff3d6; padding:12px 14px; border-radius:14px; margin-bottom:16px;
}
.bulk-status{
  background:linear-gradient(165deg, var(--panel), var(--panel2)); border:1px solid var(--glass-brd);
  color:var(--txt); padding:12px 14px; border-radius:14px; margin-bottom:16px;
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.notice-close{
  background:transparent; border:0; color:#d3ffe2; font-size:20px; line-height:1;
  padding:0 2px; cursor:pointer; box-shadow:none;
}
.notice-close:hover{transform:none; box-shadow:none; color:#fff}
.notice-close::after{display:none}
.card{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  padding:22px; margin-bottom:16px; position:relative; overflow:hidden;
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.stat{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(10px); padding:18px;
}
.stat b{font-size:28px; display:block; color:#fff}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--glass-brd); vertical-align:top}
th{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px}
input,select,textarea{
  width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--glass-brd);
  color:var(--txt); background:rgba(42,57,66,.85); font:inherit; outline:none;
  transition:box-shadow .2s, border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,168,132,.25)}
select option{background:#202c33; color:var(--txt)}
label{font-weight:600; font-size:14px; display:block; margin:10px 0 4px; color:var(--txt)}
button,.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--glass-brd); cursor:pointer;
  background:linear-gradient(180deg, rgba(0,168,132,.5), rgba(1,124,99,.5));
  color:#fff; font-weight:600; padding:9px 18px; border-radius:12px; font-size:15px;
  text-decoration:none; font:inherit; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
button:hover,.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,168,132,.40)}
button::after,.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
button:hover::after,.btn:hover::after{transform:translateX(120%)}
button:disabled,.btn.disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn.danger{background:linear-gradient(180deg, rgba(251,77,109,.35), rgba(190,18,60,.35))}
.btn.ghost{background:rgba(255,255,255,.06); color:var(--txt)}
.flash{padding:12px 14px; border-radius:14px; margin-bottom:14px; border:1px solid var(--glass-brd)}
.flash.success{background:rgba(20,90,50,.55); border-color:rgba(52,255,150,.6); color:#d3ffe2}
.flash.info{background:rgba(14,60,86,.6); border-color:rgba(83,189,235,.6); color:#dff2ff}
.flash.error{background:rgba(110,18,40,.55); border-color:rgba(255,110,140,.65); color:#ffe0e6}
.badge{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--glass-brd); background:var(--glass); color:var(--muted);
}
.badge.ok{background:rgba(10,90,45,.55); border-color:rgba(80,255,160,.55); color:#dcffe9}
.badge.warn{background:rgba(110,75,8,.5); border-color:rgba(255,200,80,.6); color:#fff3d6}
.badge.bad{background:rgba(110,18,40,.55); border-color:rgba(255,110,140,.65); color:#ffe0e6}
.progress{height:14px; background:rgba(255,255,255,.08); border-radius:8px; overflow:hidden}
.progress>div{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2))}
form.inline{display:inline}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>*{flex:1; min-width:180px}
small,.muted{color:var(--muted)}
footer{color:var(--muted); font-size:13px; text-align:center; padding:20px; border-top:1px solid var(--glass-brd); margin-top:40px; background:rgba(11,20,26,.85)}
@media(max-width:820px){
  .layout{flex-direction:column; padding:0 10px 30px}
  .sidebar{width:100%; flex:none; position:static; max-height:none}
  .sidebar nav{flex-direction:row; flex-wrap:wrap}
  .side-link{flex:1 1 160px}
}
@media(max-width:640px){
  table{font-size:14px}
  header h1{font-size:18px}
  .card,.stat{padding:16px}
}

/* Import preview number list: beautiful flowing chips in one block,
   instead of hundreds of separate lines (498 numbers = 498 lines). */
.chip-list{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass); color:var(--txt); font-size:13.5px}
.chip-bad{border-color:rgba(255,110,140,.65); background:rgba(110,18,40,.55); color:#ffe0e6}
.chip-warn{border-color:rgba(255,200,80,.6); background:rgba(110,75,8,.5); color:#fff3d6}

/* ===== Login page - WhatsApp dark design (owner, 2026-11-11) =====
   Same WhatsApp colours as the rest of the site: dark #111b21 page,
   green top band, one centered #202c33 card, the site favicon icon as
   the logo, green button. */
body.wa-login-body{background:#111b21; color:#e9edef; min-height:100vh}
.wa-topband{position:fixed; top:0; left:0; right:0; height:200px; background:#00a884; z-index:0}
.wa-wrap{position:relative; z-index:1; max-width:460px; margin:0 auto; padding:64px 16px 40px}
.wa-card{background:#202c33; border:1px solid rgba(134,150,160,.25); border-radius:14px; box-shadow:0 17px 50px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); padding:38px 36px 30px; color:#e9edef}
.wa-logo{text-align:center; line-height:1}
.wa-logo img{width:88px; height:88px}
.wa-title{font-size:24px; font-weight:700; text-align:center; color:#e9edef; margin:14px 0 6px}
.wa-sub{color:#8696a0; text-align:center; font-size:14.5px; margin:0 0 20px}
.wa-card label{display:block; color:#aebac1; font-weight:600; font-size:14px; margin:16px 0 6px}
.wa-card input{width:100%; background:#2a3942; border:1px solid #374045; border-radius:8px; color:#e9edef; padding:12px 14px; font-size:15.5px; box-shadow:none}
.wa-card input:focus{border-color:#00a884; box-shadow:0 0 0 3px rgba(0,168,132,.28); outline:none}
.wa-btn{width:100%; margin-top:22px; background:#00a884; color:#ffffff; border:none; border-radius:8px; padding:13px 16px; font-size:16px; font-weight:700; cursor:pointer; box-shadow:none}
.wa-btn:hover{background:#017c63; transform:none}
.wa-btn::after{display:none}
.wa-note{color:#8696a0; font-size:12.5px; line-height:1.55; margin:20px 0 0}
.wa-foot{text-align:center; color:#8696a0; font-size:12.5px; margin-top:18px}
.wa-card .flash{border-radius:8px; font-size:14px}
.wa-card .flash.success{background:rgba(0,168,132,.18); border-color:rgba(37,211,102,.6); color:#d9fdd3}
.wa-card .flash.info{background:rgba(14,60,86,.55); border-color:rgba(83,189,235,.6); color:#d7f2ff}
.wa-card .flash.error{background:rgba(110,18,40,.5); border-color:rgba(255,110,140,.6); color:#ffe0e6}
@media (max-width:520px){ .wa-wrap{padding-top:44px} .wa-card{padding:30px 20px 24px} }

/* Brand logo in the site header - the same icon as the favicon */
.brand-logo{width:36px; height:36px; border-radius:50%; vertical-align:-10px; margin-right:10px; box-shadow:0 4px 12px rgba(0,0,0,.45)}

/* ===== Login branding + full animation, 3D look (owner, 2026-11-11) =====
   Animated gradient band, drifting glow orbs, floating chat bubbles,
   brand chips floating around the card, a rising 3D card that tilts
   with the mouse, and a floating logo. Login page only. */
.wa-topband{background:linear-gradient(115deg, #00a884, #25d366, #017c63, #00a884); background-size:260% 100%; animation:waBand 11s ease-in-out infinite}
@keyframes waBand{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.wa-orb{position:fixed; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none}
.orb-a{width:340px; height:340px; background:rgba(0,168,132,.35); left:-90px; bottom:-70px; animation:waOrb 13s ease-in-out infinite}
.orb-b{width:280px; height:280px; background:rgba(37,211,102,.28); right:-70px; top:32%; animation:waOrb 16s ease-in-out infinite reverse}
@keyframes waOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-30px) scale(1.12)}}
.wa-bubbles{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.wa-bubbles span{position:absolute; bottom:-70px; opacity:0; animation:waFloatUp linear infinite; text-shadow:0 6px 18px rgba(0,0,0,.35)}
.wa-bubbles .tick{color:#25d366; font-weight:800}
.wa-bubbles span:nth-child(1){left:6%;  font-size:34px; animation-duration:19s; animation-delay:0s}
.wa-bubbles span:nth-child(2){left:16%; font-size:24px; animation-duration:24s; animation-delay:5s}
.wa-bubbles span:nth-child(3){left:27%; font-size:21px; animation-duration:21s; animation-delay:2s}
.wa-bubbles span:nth-child(4){left:38%; font-size:28px; animation-duration:26s; animation-delay:9s}
.wa-bubbles span:nth-child(5){left:55%; font-size:38px; animation-duration:18s; animation-delay:3s}
.wa-bubbles span:nth-child(6){left:66%; font-size:23px; animation-duration:23s; animation-delay:7s}
.wa-bubbles span:nth-child(7){left:74%; font-size:20px; animation-duration:20s; animation-delay:1s}
.wa-bubbles span:nth-child(8){left:83%; font-size:30px; animation-duration:25s; animation-delay:6s}
.wa-bubbles span:nth-child(9){left:90%; font-size:25px; animation-duration:22s; animation-delay:11s}
.wa-bubbles span:nth-child(10){left:47%; font-size:26px; animation-duration:27s; animation-delay:13s}
@keyframes waFloatUp{0%{transform:translateY(0) rotate(-6deg); opacity:0}10%{opacity:.75}85%{opacity:.6}100%{transform:translateY(-108vh) rotate(9deg); opacity:0}}
.wa-stage{position:relative}
.wa-card{animation:waCardIn .8s cubic-bezier(.2,1.35,.35,1) backwards; transition:transform .18s ease-out; will-change:transform}
@keyframes waCardIn{from{opacity:0; transform:translateY(38px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}
.wa-logo img{animation:waLogoFloat 4.5s ease-in-out infinite; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
@keyframes waLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.wa-chip{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px;
  background:rgba(32,44,51,.92); border:1px solid rgba(37,211,102,.55); color:#e9edef;
  font-size:13.5px; font-weight:700; padding:9px 14px; border-radius:999px;
  box-shadow:0 14px 30px rgba(0,0,0,.45); backdrop-filter:blur(6px);
  animation:waChipFloat 5.5s ease-in-out infinite; white-space:nowrap;
}
.chip-1{left:-218px; top:64px}
.chip-2{right:-228px; top:118px; animation-delay:1.2s}
.chip-3{left:-238px; bottom:104px; animation-delay:2.1s}
.chip-4{right:-196px; bottom:52px; animation-delay:.6s}
@keyframes waChipFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-11px) rotate(1.2deg)}}
@media (max-width:1120px){ .wa-chip{display:none} }
@media (prefers-reduced-motion:reduce){ .wa-topband,.wa-orb,.wa-bubbles span,.wa-card,.wa-logo img,.wa-chip{animation:none} }

/* ===== Pretty scrollbars (owner, 2026-11-11: "ya slider piyara karo") =====
   The default white/gray browser scrollbars clashed with the dark
   WhatsApp theme. Now: slim dark track, WhatsApp-green gradient thumb. */
html{scrollbar-width:thin; scrollbar-color:#00a884 #111b21}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:#111b21; border-radius:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #25d366, #00a884 55%, #017c63); border-radius:8px; border:2px solid #111b21}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, #3be374, #25d366 55%, #00a884)}
::-webkit-scrollbar-corner{background:#111b21}
.sidebar{scrollbar-width:thin; scrollbar-color:rgba(0,168,132,.75) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(37,211,102,.85), rgba(0,168,132,.85)); border:none; border-radius:6px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#25d366}
textarea::-webkit-scrollbar, select::-webkit-scrollbar{width:8px}

/* ===== Login density pack (owner, 2026-11-11: "har jaga bhari hoi ho,
   koi jaga ni khali ho") — the whole login screen stays full: doodle
   dot pattern everywhere, a giant watermark logo turning slowly
   behind the card, four glow orbs, and 26 bubbles whose negative
   delays keep the screen populated from the first second. */
.wa-pattern{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(37,211,102,.13) 1.5px, transparent 1.7px), radial-gradient(rgba(0,168,132,.10) 1.5px, transparent 1.7px);
  background-size:26px 26px, 44px 44px; background-position:0 0, 13px 22px}
.wa-watermark{position:fixed; left:50%; top:55%; width:620px; height:620px; z-index:0; pointer-events:none; opacity:.055; animation:waSpin 80s linear infinite}
@keyframes waSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.orb-c{width:230px; height:230px; background:rgba(0,168,132,.26); right:6%; bottom:-60px; animation:waOrb 15s ease-in-out infinite; animation-delay:2s}
.orb-d{width:190px; height:190px; background:rgba(37,211,102,.22); left:4%; top:8%; animation:waOrb 18s ease-in-out infinite reverse; animation-delay:1s}
.wa-bubbles span:nth-child(1){animation-delay:-4s}
.wa-bubbles span:nth-child(3){animation-delay:-11s}
.wa-bubbles span:nth-child(5){animation-delay:-8s}
.wa-bubbles span:nth-child(7){animation-delay:-15s}
.wa-bubbles span:nth-child(9){animation-delay:-6s}
.wa-bubbles span:nth-child(11){left:3%;  font-size:27px; animation-duration:22s; animation-delay:-9s}
.wa-bubbles span:nth-child(12){left:11%; font-size:20px; animation-duration:18s; animation-delay:-3s}
.wa-bubbles span:nth-child(13){left:21%; font-size:33px; animation-duration:25s; animation-delay:-14s}
.wa-bubbles span:nth-child(14){left:31%; font-size:22px; animation-duration:20s; animation-delay:-7s}
.wa-bubbles span:nth-child(15){left:36%; font-size:26px; animation-duration:24s; animation-delay:-17s}
.wa-bubbles span:nth-child(16){left:44%; font-size:40px; animation-duration:19s; animation-delay:-5s}
.wa-bubbles span:nth-child(17){left:50%; font-size:21px; animation-duration:23s; animation-delay:-12s}
.wa-bubbles span:nth-child(18){left:60%; font-size:24px; animation-duration:17s; animation-delay:-2s}
.wa-bubbles span:nth-child(19){left:64%; font-size:31px; animation-duration:26s; animation-delay:-16s}
.wa-bubbles span:nth-child(20){left:70%; font-size:19px; animation-duration:21s; animation-delay:-8s}
.wa-bubbles span:nth-child(21){left:79%; font-size:36px; animation-duration:24s; animation-delay:-13s}
.wa-bubbles span:nth-child(22){left:86%; font-size:23px; animation-duration:19s; animation-delay:-4s}
.wa-bubbles span:nth-child(23){left:93%; font-size:21px; animation-duration:22s; animation-delay:-10s}
.wa-bubbles span:nth-child(24){left:97%; font-size:28px; animation-duration:25s; animation-delay:-6s}
.wa-bubbles span:nth-child(25){left:14%; font-size:37px; animation-duration:28s; animation-delay:-19s}
.wa-bubbles span:nth-child(26){left:57%; font-size:29px; animation-duration:27s; animation-delay:-15s}
@media (prefers-reduced-motion:reduce){ .wa-watermark{animation:none} }

/* ===== Login chips are real WORKING links now (owner, 2026-11-11) =====
   Prettier: deeper glass, green glow ring, lift on hover. Each chip
   opens its real section — a logged-out visitor is asked to log in and
   then lands on that very section (intended-URL redirect). */
.wa-chip{
  text-decoration:none; cursor:pointer;
  background:linear-gradient(160deg, rgba(38,52,60,.96), rgba(24,34,41,.96));
  border:1px solid rgba(37,211,102,.7);
  box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 0 rgba(37,211,102,0);
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.wa-chip:hover{
  border-color:#25d366; color:#ffffff;
  box-shadow:0 20px 42px rgba(0,0,0,.55), 0 0 24px rgba(0,168,132,.45), 0 0 0 3px rgba(37,211,102,.28);
  animation-play-state:paused;
}
.wa-chip:focus-visible{outline:3px solid rgba(37,211,102,.65); outline-offset:3px}
.wa-divider{display:flex; align-items:center; gap:12px; color:#8696a0; font-size:13px; margin:22px 0 12px}
.wa-divider::before,.wa-divider::after{content:""; flex:1; height:1px; background:rgba(134,150,160,.35)}
.wa-btn.alt{display:block; text-align:center; text-decoration:none; background:rgba(0,168,132,.10); border:2px solid #00a884; color:#25d366; margin-top:0}
.wa-btn.alt:hover{background:rgba(0,168,132,.22); color:#d9fdd3}

/* ===== Login: interactive 3D dots + site information (owner,
   2026-11-11: dots full 3D animated, mouse par door jayen, hataty
   hi wapas theak; aur login par site ki information bhi ho) ===== */
#wa3d{position:fixed; inset:0; z-index:0; pointer-events:none}
body.wa-login-body{overflow-x:hidden}
.wa-pattern{opacity:.85}
.wa-hero{position:relative; z-index:2; text-align:center; margin:0 auto 18px; max-width:460px; padding:0 6px}
.wa-hero h2{color:#ffffff; font-size:24px; line-height:1.25; margin:0 0 6px; text-shadow:0 3px 14px rgba(0,60,40,.45)}
.wa-hero p{color:rgba(255,255,255,.92); font-size:14.5px; margin:0; text-shadow:0 2px 8px rgba(0,60,40,.4)}
.wa-info{position:relative; z-index:1; width:min(1060px,94vw); margin:26px 0 0 50%; transform:translateX(-50%); background:rgba(32,44,51,.94); border:1px solid rgba(134,150,160,.25); border-radius:14px; padding:26px 26px 20px; color:#e9edef; box-shadow:0 17px 50px rgba(0,0,0,.45); text-align:left}
.wa-info h3{margin:0 0 6px; font-size:21px; color:#ffffff}
.wa-info-sub{color:#aebac1; margin:0 0 18px; font-size:14.5px; line-height:1.55}
.wa-info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.wa-tile{background:#111b21; border:1px solid rgba(134,150,160,.18); border-radius:10px; padding:14px 15px; display:flex; flex-direction:column; gap:4px}
.wa-tile span{font-size:22px}
.wa-tile strong{color:#e9edef; font-size:15px}
.wa-tile small{color:#8696a0; line-height:1.5; font-size:13px}
.wa-steps{margin:18px 0 6px; color:#d9fdd3; font-size:14px; line-height:1.6}
.wa-info-note{color:#8696a0; font-size:13px; margin:6px 0 0}
@media (max-width:520px){ .wa-hero h2{font-size:20px} .wa-info{padding:20px 16px 14px} }

/* ---- PRO pass (owner, 2026-11-11: "login page full bhara hova
   piyara professional bano, full animated, full unique detail, 3D
   animated — asy hi full website, sirf ya ni") ---- */
.wa-wrap-wide{max-width:1240px; padding-top:44px}
.wa-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:start}
.wa-hero{display:none}
.wa-side{padding:18px 6px 0; animation:proRise .7s cubic-bezier(.2,.9,.3,1) both}
.wa-kicker{display:inline-flex; align-items:center; gap:8px; background:rgba(0,168,132,.14); border:1px solid rgba(37,211,102,.35); color:#7ff0c1; font-size:12.5px; font-weight:700; letter-spacing:.4px; padding:6px 12px; border-radius:999px}
.wa-side h2{font-size:clamp(28px,3.6vw,44px); line-height:1.12; margin:16px 0 10px; color:#e9edef}
.wa-side h2 em{font-style:normal; background:linear-gradient(90deg,#25d366,#53bdeb); -webkit-background-clip:text; background-clip:text; color:transparent}
.wa-lead{color:#aebac1; font-size:16px; line-height:1.55; margin:0 0 18px}
.wa-points{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.wa-points li{display:flex; gap:10px; align-items:flex-start; color:#d6dee2; font-size:14.5px}
.wa-points .tick{color:#25d366; font-weight:800}
.wa-stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px}
.wa-stat{flex:1 1 120px; background:linear-gradient(180deg,#202c33,#1a262d); border:1px solid #2a3942; border-radius:14px; padding:14px 16px}
.wa-stat b{display:block; font-size:26px; color:#25d366; line-height:1}
.wa-stat span{font-size:12px; color:#8696a0}
.wa-phone{position:relative; width:300px; max-width:86vw; margin:6px auto 0; background:#0b141a; border:1px solid #2a3942; border-radius:30px; padding:12px 12px 14px; box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 0 6px #111b21; transform:rotate(-2deg); animation:waPhoneFloat 7s ease-in-out infinite}
@keyframes waPhoneFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-10px)}}
.wa-phone-notch{width:90px; height:5px; border-radius:99px; background:#2a3942; margin:2px auto 10px}
.wa-phone-head{display:flex; gap:9px; align-items:center; background:#202c33; border-radius:14px; padding:8px 10px}
.wa-phone-head img{width:30px; height:30px; border-radius:50%}
.wa-phone-head strong{display:block; font-size:13px; color:#e9edef}
.wa-phone-head small{font-size:11px; color:#25d366}
.wa-phone-body{display:flex; flex-direction:column; gap:7px; padding:12px 2px; min-height:172px}
.wa-msg{max-width:82%; padding:7px 10px; border-radius:10px; font-size:12.5px; line-height:1.35; opacity:0; animation:waMsgCycle 14s ease-in-out infinite}
.wa-msg.out{align-self:flex-end; background:#005c4b; color:#e7ffdb; border-bottom-right-radius:3px}
.wa-msg.in{align-self:flex-start; background:#202c33; color:#e9edef; border-bottom-left-radius:3px}
.wa-msg.m1{animation-delay:.4s}.wa-msg.m2{animation-delay:2.6s}.wa-msg.m3{animation-delay:5s}.wa-msg.m4{animation-delay:7.6s}
@keyframes waMsgCycle{0%{opacity:0; transform:translateY(10px) scale(.95)}4%,82%{opacity:1; transform:translateY(0) scale(1)}94%,100%{opacity:0; transform:translateY(-4px)}}
.wa-phone-input{display:flex; justify-content:space-between; align-items:center; background:#202c33; color:#8696a0; border-radius:999px; padding:8px 14px; font-size:12.5px}
.wa-float-card{position:absolute; background:#202c33; border:1px solid #2a3942; color:#e9edef; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:12px; box-shadow:0 14px 28px rgba(0,0,0,.45); animation:waChipFloat 6s ease-in-out infinite}
.wa-float-card.fc-a{top:64px; right:-58px}
.wa-float-card.fc-b{bottom:52px; left:-64px; animation-delay:2.2s}
@keyframes waChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wa-marquee{overflow:hidden; margin:30px 0 4px; border-top:1px solid #22303a; border-bottom:1px solid #22303a; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wa-marquee-track{display:flex; gap:44px; width:max-content; animation:waMarquee 30s linear infinite; color:#8696a0; font-weight:700; font-size:14px; white-space:nowrap}
@keyframes waMarquee{to{transform:translateX(-50%)}}
.wa-hero-reg{text-align:center; margin:6px 0 18px; animation:proRise .7s cubic-bezier(.2,.9,.3,1) both}
.wa-hero-reg h2{font-size:clamp(22px,3vw,32px); margin:0 0 6px; color:#e9edef}
.wa-hero-reg p{color:#aebac1; margin:0}
@media (max-width:1080px){ .wa-grid{grid-template-columns:1fr} .wa-side{padding-top:4px} }
@media (max-width:640px){ .wa-float-card{display:none} .wa-phone{transform:none; animation:none} }
/* Inside pages: professional motion everywhere */
.layout main .card, .layout main .stat{animation:proRise .55s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--i,0)*60ms)}
@keyframes proRise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.35)}
.btn{transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.sidebar a{transition:background .2s ease, transform .2s ease}
.sidebar a:hover{transform:translateX(3px)}
table tbody tr{transition:background .15s ease}
@media (prefers-reduced-motion:reduce){ .wa-side,.wa-phone,.wa-msg,.wa-float-card,.wa-marquee-track,.wa-hero-reg,.layout main .card,.layout main .stat{animation:none} .wa-msg{opacity:1} }

/* Overlap fixes (owner: "text nazar ni a raha" — verified by a live
   render check, 2026-11-11): the four floating chips were designed
   for the old lone centred card; in the two-column hero they land
   on top of the headline and the third stat, so they are hidden
   (the side panel carries the same content). The phone pills move
   to the frame corners so they never cover chat text, and the
   floating-bubble layer goes behind all content. */
.wa-grid .wa-chip{display:none}
.wa-bubbles{z-index:0}
.wa-wrap{z-index:2}
.wa-float-card.fc-a{top:-14px; right:-20px}
.wa-float-card.fc-b{bottom:-14px; left:-20px}