*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#dff3ff;background:#03111f}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.top{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(3,17,31,.92);border-bottom:1px solid rgba(65,194,255,.18);position:sticky;top:0;z-index:100;backdrop-filter:blur(16px)}.brand{font-size:25px;font-weight:900;color:white;letter-spacing:-.7px}.logoMark{color:#17e3ff}.top nav{display:flex;gap:22px;align-items:center;color:#cce2f2;font-size:14px}.top nav a:hover{color:#27eaff}.btn{display:inline-block;border:0;border-radius:10px;padding:11px 18px;background:linear-gradient(90deg,#10e7ff,#00efaf);color:#02141f;font-weight:900;cursor:pointer;box-shadow:0 0 22px rgba(20,228,255,.18)}.btn.ghost{background:transparent;color:#eaf7ff;border:1px solid #2c6689;box-shadow:none}.btn.big{padding:14px 24px}.btn.full{width:100%;text-align:center}.heroExtreme{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:70px 6vw;background:radial-gradient(circle at 72% 42%,rgba(0,132,255,.32),transparent 30%),linear-gradient(180deg,#03111f,#04182b);position:relative;overflow:hidden}.heroExtreme:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(50,200,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(50,200,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent)}.heroCopy{position:relative;z-index:2}.eyebrow{color:#14f0c1;font-size:11px;font-weight:900;letter-spacing:4px}.heroExtreme h1{font-size:68px;line-height:.96;margin:16px 0;color:white;letter-spacing:-2px}.heroExtreme h1 span,.pageHero h1 span{color:#13d9ff}.heroExtreme p{font-size:18px;line-height:1.7;color:#a9c3d7;max-width:650px}.actions{display:flex;gap:12px;margin:30px 0}.trustRow{display:flex;gap:24px;color:#a8c7d9;font-size:13px}.heroVisual{min-height:500px;position:relative;display:flex;align-items:center;justify-content:center}.glowOrb{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,#0e6ad6 0,#06305b 35%,transparent 68%);filter:blur(3px);opacity:.8}.world{position:absolute;font-size:420px;line-height:1;color:#15a7ff;opacity:.16;filter:drop-shadow(0 0 35px #0a8cff)}.floatingChannels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,150px);gap:18px}.floatingChannels div{padding:18px;border:1px solid rgba(66,205,255,.35);border-radius:14px;background:linear-gradient(135deg,rgba(9,53,92,.92),rgba(8,35,61,.92));box-shadow:0 12px 35px rgba(0,0,0,.35),inset 0 0 24px rgba(20,205,255,.06);text-align:center;font-weight:900}.jpHero{position:absolute;right:2%;bottom:8%;writing-mode:vertical-rl;font-family:serif;font-size:28px;letter-spacing:6px;color:white;z-index:2}.jpHero small{font:9px Inter,sans-serif;letter-spacing:2px;color:#7fb7d2;margin-top:12px}.statBand{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(90deg,#05213c,#0a3e69,#05213c);border-top:1px solid #115b8e;border-bottom:1px solid #115b8e}.statBand div{padding:24px;text-align:center;border-right:1px solid rgba(84,194,255,.15)}.statBand b{display:block;font-size:28px;color:white}.statBand span{font-size:12px;color:#9ac0d8}.sectionDark{padding:64px 5vw;background:#041322;border-top:1px solid rgba(61,202,255,.08)}.sectionDark.alt{background:linear-gradient(180deg,#061a2e,#041322)}.sectionTitle{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}.sectionTitle h2{font-size:36px;margin:6px 0;color:white}.sectionTitle p{color:#8eafc4}.jpSide{font-family:serif;color:#8bdcff;opacity:.7;letter-spacing:3px}.channelCards,.pricingGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.channelCard,.priceCard{border:1px solid rgba(75,203,255,.17);background:linear-gradient(180deg,rgba(8,38,65,.9),rgba(5,26,46,.9));border-radius:16px;padding:22px;text-align:center;box-shadow:0 14px 35px rgba(0,0,0,.22)}.channelCard:hover,.featureCard:hover,.previewCard:hover,.priceCard:hover{transform:translateY(-3px);border-color:#22dfff;transition:.25s}.channelIcon{font-size:28px;color:#17e4ff}.channelCard h3,.priceCard h3{color:white}.channelCard p{font-size:12px;color:#86a8bd}.flowGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.flowGrid div{position:relative;text-align:center;padding:25px 15px}.flowGrid b{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#17f3ff,#0b4386);box-shadow:0 0 28px rgba(20,218,255,.25);font-size:20px}.flowGrid h3{color:white}.flowGrid p{color:#88aabd;font-size:12px}.featureGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.featureCard{min-height:120px;border:1px solid rgba(59,191,255,.15);border-radius:14px;background:rgba(8,37,62,.8);padding:18px;display:flex;flex-direction:column;gap:8px}.featureCard span{color:#12f0d0}.featureCard b{color:white}.featureCard small{color:#7fa3b9}.previewGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.previewCard{border:1px solid rgba(55,197,255,.16);background:#061a2e;border-radius:14px;padding:14px}.previewCard b{display:block;color:white;margin-top:12px}.previewCard small{color:#789cb4}.miniUi{height:110px;border-radius:10px;background:#edf7ff;padding:12px;display:grid;grid-template-columns:34px 1fr;gap:8px;overflow:hidden}.miniUi i{display:block;background:#d5eaf9;border-radius:4px}.miniUi span{grid-column:2;height:60px;background:linear-gradient(90deg,#9ee8ff,#bffbe7);border-radius:7px}.priceCard b{display:block;font-size:34px;color:white}.priceCard span,.priceCard small{display:block;color:#88aabd;margin-top:5px}.discountStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.discountStrip span{padding:14px;text-align:center;border:1px solid rgba(77,193,255,.16);border-radius:10px;background:#061c31;color:#abd0e6}.supportGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.supportGrid div{padding:18px;border-radius:12px;border:1px solid rgba(50,206,255,.18);background:#06213a;text-align:center;font-weight:800}.finalCta{display:flex;justify-content:space-between;align-items:center;padding:48px 6vw;background:radial-gradient(circle at 80% 20%,rgba(32,93,255,.3),transparent 35%),linear-gradient(90deg,#07172a,#0a2851);border-top:1px solid rgba(88,204,255,.2)}.finalCta h2{font-size:34px;margin:0;color:white}.finalCta p{color:#8eb0c6}.pageHero{min-height:300px;padding:60px 7vw;display:flex;justify-content:space-between;align-items:center;background:radial-gradient(circle at 78% 30%,rgba(0,122,255,.35),transparent 30%),linear-gradient(180deg,#041322,#061a2e)}.pageHero h1{font-size:52px;margin:10px 0;color:white}.pageHero p{color:#9abbd0}.jpBig{font-family:serif;font-size:44px;letter-spacing:6px}.sectionLight{background:#eef6fb;color:#0b1c2f;padding:55px 5vw}.pricingGrid.light .priceCard.light{background:white;border:1px solid #d9e8f2;color:#0c2033}.priceCard.light b,.priceCard.light h3{color:#0d2134}.priceCard.light .btn{margin-top:14px}.authWrap{min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;background:#edf6fb;color:#0b1a29}.authVisual{position:relative;padding:90px 8vw;background:radial-gradient(circle at 70% 30%,rgba(11,115,255,.35),transparent 30%),linear-gradient(135deg,#03111f,#08345d);color:white;overflow:hidden}.authVisual h1{font-size:56px}.authVisual p{color:#a5c2d5}.authGlow{position:absolute;width:360px;height:360px;border-radius:50%;background:#0d71dd;filter:blur(80px);opacity:.25;right:-80px;bottom:-80px}.authBox{width:min(480px,86%);margin:auto;background:white;border-radius:20px;padding:38px;box-shadow:0 30px 80px rgba(0,28,52,.18)}.authBox h2{font-size:36px}.appShell{display:grid;grid-template-columns:245px 1fr;min-height:820px;background:#edf5fa;color:#0a1b2d}.side{background:linear-gradient(180deg,#03111f,#061c31);padding:16px 12px;color:#b9d2e3}.sideBrand{font-size:20px;font-weight:900;color:white;padding:13px}.side a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:9px;margin:4px 0;font-size:14px}.side a.active,.side a:hover{background:linear-gradient(90deg,#0d5068,#0b314e);color:#39f0d5}.workspace{padding:30px}.dashHead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.dashHead h1{font-size:38px;margin:5px 0}.dashHead p{color:#657c8e}.darkText{color:#008c78}.jpDash{font-family:serif;font-size:34px;letter-spacing:4px;color:#0a7991}.metricGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metricGrid>div{background:white;border:1px solid #d7e6ef;border-radius:15px;padding:20px;box-shadow:0 8px 25px rgba(23,55,76,.06)}.metricGrid small{display:block;color:#688093}.metricGrid b{display:block;font-size:28px;margin-top:8px}.quickGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.quickGrid a{background:linear-gradient(135deg,#08395c,#0a5671);color:white;border-radius:14px;padding:20px;font-weight:900}.panel{background:white;border:1px solid #d7e6ef;border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(20,47,68,.05);overflow:auto}.panelTop{display:flex;align-items:center;justify-content:space-between}.panelTop a,.panelTop span{color:#1683a6;font-size:13px}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #e9eff4;text-align:left;font-size:13px}th{color:#617689}.status{display:inline-block;background:#e0f8ed;color:#08784d;border-radius:99px;padding:5px 9px;font-size:11px}.status.pending{background:#fff1c9;color:#8a5d00}.status.rejected{background:#ffe1e3;color:#ad2430}.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.topGap{margin-top:20px}label{display:block;font-size:13px;font-weight:800;margin:13px 0 7px}input,select,textarea{width:100%;border:1px solid #cbdde8;border-radius:9px;padding:12px 13px;background:white;color:#0a1c2e}.dropHint{padding:12px;border:1px dashed #aac7d9;border-radius:10px;background:#f6fbff;color:#6b8494;font-size:12px}.templateGrid{display:grid;gap:12px}.templateCard{border:1px solid #dbe8f1;border-radius:12px;padding:14px}.templateCard small{display:block;color:#1f90aa}.templateCard b{display:block;margin:5px 0}.stepBar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.stepBar span{padding:12px;text-align:center;background:#e4eef5;border-radius:9px;font-weight:800;color:#6a8091}.stepBar span.on{background:linear-gradient(90deg,#0ddcca,#11bde7);color:#062436}.formGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.composer{display:grid;grid-template-columns:1fr 300px;gap:18px;margin-top:15px}.composerTools{display:flex;gap:8px;flex-wrap:wrap}.composerTools span{font-size:11px;padding:7px 10px;background:#eef6fb;border-radius:99px}.phonePreview{border:9px solid #0b2234;border-radius:30px;padding:16px;background:#f7fbfe;min-height:280px}.phoneTop{text-align:center;font-size:12px;font-weight:900}.bubble{margin-top:50px;padding:12px;background:#dff4ff;border-radius:14px;font-size:12px}.audienceBox{margin-top:18px;padding:16px;background:#f5f9fc;border:1px solid #dce8ef;border-radius:12px;display:flex;gap:18px;align-items:end}.audienceBox>div{display:flex;flex-direction:column}.audienceBox b{font-size:26px}.darkBtn{background:#0b2c45;color:white}.costBar{display:flex;gap:25px;align-items:center;border-top:1px solid #e2ebf1;margin-top:18px;padding-top:18px}.costBar .btn{margin-left:auto}.walletHero{font-size:38px;font-weight:900;color:#00a884}.paymentInfo{margin-top:18px;padding:15px;background:#f1f8fd;border-radius:10px}.chartBars{height:300px;display:flex;align-items:flex-end;gap:16px;padding:24px;background:linear-gradient(#f7fbff,#eef6fa);border-radius:12px}.chartBars i{flex:1;background:linear-gradient(#0fd9ff,#08e5ac);border-radius:8px 8px 0 0}.contactGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.contactGrid>div{background:white;border:1px solid #d8e6ef;border-radius:14px;padding:18px;display:flex;flex-direction:column}.contactGrid span{margin-top:7px;color:#5b7588}.darkPanel{background:linear-gradient(135deg,#041322,#0a3156);color:white}.darkPanel textarea{background:#0b2740;color:white;border-color:#2b5d7f}.flash{padding:14px 5vw;font-weight:900}.flash.ok{background:#dffbea;color:#067943}.flash.error{background:#ffe6e7;color:#ad1c27}.inline{display:flex;gap:6px;align-items:center}.inline input{min-width:130px;padding:7px}.mini{border:0;border-radius:6px;padding:7px 10px;color:white;cursor:pointer}.approve{background:#08a66b}.reject{background:#da3e4b}footer{min-height:110px;padding:0 5vw;background:#020c15;color:#89a8bb;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(77,190,255,.1)}footer b{display:block;color:white;font-size:20px}footer small{display:block;margin-top:5px}@media(max-width:1050px){.heroExtreme{grid-template-columns:1fr}.heroVisual{min-height:380px}.channelCards,.pricingGrid{grid-template-columns:repeat(3,1fr)}.featureGrid,.previewGrid{grid-template-columns:repeat(2,1fr)}.flowGrid{grid-template-columns:repeat(3,1fr)}.supportGrid{grid-template-columns:repeat(2,1fr)}.metricGrid,.quickGrid{grid-template-columns:repeat(2,1fr)}.composer{grid-template-columns:1fr}.contactGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.top{padding:13px 18px;height:auto}.top nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.top nav a:not(.btn){display:none}.heroExtreme{padding:45px 22px}.heroExtreme h1{font-size:48px}.heroVisual{min-height:300px}.world{font-size:260px}.floatingChannels{grid-template-columns:repeat(2,120px)}.statBand,.channelCards,.pricingGrid,.featureGrid,.previewGrid,.flowGrid,.discountStrip,.supportGrid,.metricGrid,.quickGrid,.twoCol,.formGrid,.contactGrid{grid-template-columns:1fr}.finalCta{flex-direction:column;align-items:flex-start;gap:20px}.authWrap{grid-template-columns:1fr}.authVisual{display:none}.authBox{margin:35px auto}.appShell{grid-template-columns:1fr}.side{display:flex;overflow:auto}.sideBrand{display:none}.side a{white-space:nowrap}.workspace{padding:18px}.audienceBox,.costBar{flex-direction:column;align-items:stretch}.costBar .btn{margin-left:0}.pageHero{padding:40px 24px}.pageHero h1{font-size:42px}}
/* ===== SENDINGBULK V3.1 EXTREME POLISH ===== */
:root{
--bg0:#020915;
--bg1:#041321;
--bg2:#06243a;
--cyan:#24e8ff;
--mint:#17f2bf;
--blue:#0e7dff;
--violet:#8a5cff;
--pink:#ff4fb8;
--text:#eefaff;
--muted:#8eb4c9;
--line:rgba(67,206,255,.17);
}
body{
background:
radial-gradient(circle at 15% 5%,rgba(0,128,255,.08),transparent 25%),
radial-gradient(circle at 85% 15%,rgba(57,255,210,.05),transparent 22%),
var(--bg0);
}
.top{
box-shadow:0 10px 40px rgba(0,0,0,.18);
}
.brand{
text-shadow:0 0 18px rgba(37,229,255,.15);
}
.logoMark{
display:inline-grid;
place-items:center;
width:30px;height:30px;
border-radius:9px;
background:linear-gradient(135deg,#15e5ff,#14f1ba);
color:#03202d;
margin-right:7px;
box-shadow:0 0 25px rgba(19,229,255,.3);
}
.heroExtreme{
min-height:690px;
background:
radial-gradient(circle at 72% 42%,rgba(15,136,255,.34),transparent 28%),
radial-gradient(circle at 83% 20%,rgba(139,71,255,.12),transparent 18%),
radial-gradient(circle at 10% 95%,rgba(0,255,194,.08),transparent 26%),
linear-gradient(180deg,#02101e,#04172a);
}
.heroExtreme:after{
content:"";
position:absolute;
width:700px;height:700px;
border-radius:50%;
right:-260px;top:-250px;
border:1px solid rgba(68,193,255,.09);
box-shadow:
0 0 0 80px rgba(68,193,255,.025),
0 0 0 160px rgba(68,193,255,.018),
0 0 0 240px rgba(68,193,255,.012);
}
.heroCopy{max-width:700px}
.heroExtreme h1{
font-size:74px;
letter-spacing:-3px;
text-shadow:0 10px 40px rgba(0,0,0,.35);
}
.heroExtreme h1 span{
background:linear-gradient(90deg,#23e7ff,#13f1b7,#69c7ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.heroExtreme p{
max-width:690px;
font-size:19px;
}
.btn{
position:relative;
overflow:hidden;
transition:.25s ease;
}
.btn:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.34),transparent);
transform:translateX(-120%);
transition:.45s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(7,208,232,.18)}
.btn:hover:before{transform:translateX(120%)}
.heroBadges{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:18px;
}
.heroBadges span{
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(59,207,255,.16);
background:rgba(7,34,57,.72);
color:#b6d9ea;
font-size:11px;
backdrop-filter:blur(12px);
}
.glowOrb{
width:470px;height:470px;
background:
radial-gradient(circle at 44% 44%,rgba(29,176,255,.55),rgba(17,83,160,.18) 34%,transparent 69%);
box-shadow:inset 0 0 120px rgba(0,184,255,.15),0 0 80px rgba(0,123,255,.12);
}
.world{
font-size:455px;
color:#37bdff;
opacity:.14;
}
.floatingChannels{
grid-template-columns:repeat(2,165px);
gap:20px;
}
.floatingChannels div{
position:relative;
background:
linear-gradient(180deg,rgba(10,58,97,.92),rgba(4,30,52,.94));
border:1px solid rgba(69,213,255,.28);
box-shadow:
0 18px 35px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 30px rgba(0,180,255,.06);
}
.floatingChannels div:nth-child(2n){transform:translateY(10px)}
.statBand{
box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 16px 45px rgba(0,0,0,.18);
}
.statBand b{
background:linear-gradient(90deg,#fff,#8deeff);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sectionDark{
position:relative;
overflow:hidden;
}
.sectionDark:before{
content:"";
position:absolute;
width:340px;height:340px;
border-radius:50%;
background:radial-gradient(circle,rgba(24,183,255,.08),transparent 70%);
right:-100px;top:-150px;
}
.sectionTitle,.channelCards,.featureGrid,.previewGrid,.pricingGrid,.supportGrid,.flowGrid,.discountStrip{
position:relative;z-index:1;
}
.sectionTitle h2{
font-size:40px;
letter-spacing:-1.2px;
}
.channelCard,.featureCard,.previewCard,.priceCard,.supportGrid div{
position:relative;
overflow:hidden;
backdrop-filter:blur(12px);
}
.channelCard:after,.featureCard:after,.previewCard:after,.priceCard:after{
content:"";
position:absolute;
left:-50%;top:-80%;
width:200%;height:160%;
background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.045) 50%,transparent 55%);
transform:rotate(8deg);
pointer-events:none;
}
.channelCard:hover:after,.featureCard:hover:after,.previewCard:hover:after,.priceCard:hover:after{
animation:sheen 1.1s ease;
}
@keyframes sheen{from{transform:translateX(-30%) rotate(8deg)}to{transform:translateX(30%) rotate(8deg)}}
.channelCard{
min-height:170px;
padding:26px 18px;
}
.channelIcon{
width:54px;height:54px;
margin:0 auto 10px;
border-radius:16px;
display:grid;place-items:center;
background:linear-gradient(135deg,rgba(19,218,255,.18),rgba(22,240,187,.08));
border:1px solid rgba(46,218,255,.22);
box-shadow:inset 0 0 24px rgba(0,197,255,.08);
position:relative;
}
.pulseDot{
width:7px;height:7px;border-radius:50%;
background:#12f1c2;
box-shadow:0 0 0 0 rgba(18,241,194,.35);
position:absolute;right:7px;top:7px;
animation:pulse 1.8s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(18,241,194,.35)}
70%{box-shadow:0 0 0 10px rgba(18,241,194,0)}
100%{box-shadow:0 0 0 0 rgba(18,241,194,0)}
}
.flowGrid div{
border-radius:16px;
background:linear-gradient(180deg,rgba(7,30,50,.45),rgba(4,22,39,.12));
border:1px solid rgba(65,199,255,.08);
}
.flowGrid b{
box-shadow:0 0 30px rgba(20,218,255,.28),inset 0 0 20px rgba(255,255,255,.08);
}
.featureCard{
min-height:135px;
background:
radial-gradient(circle at 100% 0,rgba(14,113,255,.12),transparent 30%),
linear-gradient(180deg,rgba(7,38,65,.92),rgba(4,24,42,.92));
}
.featureCard b{font-size:15px}
.previewCard{
padding:16px;
background:linear-gradient(180deg,rgba(6,30,52,.95),rgba(4,21,38,.95));
}
.miniUi{
box-shadow:inset 0 0 0 1px rgba(10,72,112,.08);
}
.priceCard{
min-height:180px;
display:flex;
flex-direction:column;
justify-content:center;
}
.priceCard:nth-child(2){box-shadow:0 0 35px rgba(21,239,184,.08)}
.priceCard:nth-child(3){box-shadow:0 0 35px rgba(111,102,255,.08)}
.priceCard b{
font-size:38px;
text-shadow:0 0 25px rgba(22,220,255,.16);
}
.discountStrip span{
background:linear-gradient(180deg,#082640,#061c31);
}
.supportGrid div{
min-height:76px;
display:grid;place-items:center;
background:linear-gradient(135deg,#07243c,#0a3654);
}
.finalCta{
min-height:180px;
position:relative;
overflow:hidden;
}
.finalCta:after{
content:"";
position:absolute;
width:230px;height:230px;
border-radius:50%;
right:5%;top:-60px;
background:radial-gradient(circle,#0d78ff 0,rgba(13,120,255,.12) 45%,transparent 70%);
}
.finalCta>*{position:relative;z-index:1}
footer{
background:
radial-gradient(circle at 80% 0,rgba(13,93,162,.12),transparent 25%),
#020c15;
}
.appShell{background:#edf5fa}
.workspace{
background:
radial-gradient(circle at 95% 0,rgba(20,153,255,.04),transparent 24%),
#edf5fa;
}
.metricGrid>div,.panel{
box-shadow:0 12px 28px rgba(19,57,82,.055);
}
.metricGrid>div{
position:relative;
overflow:hidden;
}
.metricGrid>div:before{
content:"";
position:absolute;
width:90px;height:90px;border-radius:50%;
right:-35px;top:-35px;
background:radial-gradient(circle,rgba(12,190,255,.12),transparent 70%);
}
.quickGrid a{
box-shadow:0 10px 24px rgba(9,71,96,.12);
transition:.2s;
}
.quickGrid a:hover{transform:translateY(-2px)}
.panel{
backdrop-filter:blur(8px);
}
.phonePreview{
box-shadow:0 14px 30px rgba(12,38,58,.14);
}
.chartBars i{
box-shadow:0 -8px 20px rgba(12,215,220,.12);
}
@media(max-width:760px){
.heroExtreme h1{font-size:50px}
.heroBadges{gap:6px}
.heroBadges span{font-size:10px}
.sectionTitle h2{font-size:32px}
}
/* ===== V3.2 PREMIUM VISUAL UPGRADE ===== */
.heroExtreme{
min-height:720px;
padding-top:86px;
padding-bottom:86px;
}
.heroCopy{
padding-right:20px;
}
.heroExtreme h1{
font-size:78px;
max-width:760px;
}
.heroVisual{
min-height:520px;
}
.heroSignal{
position:absolute;
left:4%;
bottom:5%;
z-index:3;
display:grid;
grid-template-columns:auto 1fr;
gap:2px 9px;
padding:12px 15px;
border:1px solid rgba(64,207,255,.18);
border-radius:14px;
background:rgba(3,23,40,.72);
backdrop-filter:blur(14px);
box-shadow:0 16px 35px rgba(0,0,0,.22);
}
.heroSignal span{
grid-row:1/3;
align-self:center;
padding:6px 8px;
border-radius:7px;
background:#0af0b4;
color:#03251c;
font-weight:900;
font-size:10px;
box-shadow:0 0 18px rgba(10,240,180,.25);
}
.heroSignal b{
color:#effbff;
font-size:12px;
}
.heroSignal small{
color:#82aabd;
font-size:9px;
}
.heroChannel{
display:flex !important;
align-items:center;
justify-content:flex-start;
gap:10px;
position:relative;
overflow:hidden;
}
.heroChannel:before{
content:"";
position:absolute;
inset:0;
opacity:.13;
background:linear-gradient(135deg,currentColor,transparent 60%);
}
.heroDot{
width:12px;height:12px;border-radius:50%;
background:currentColor;
box-shadow:0 0 18px currentColor;
position:relative;z-index:1;
}
.hero-sms{color:#25b9ff!important}
.hero-whatsapp{color:#26e07f!important}
.hero-email{color:#7c8cff!important}
.hero-imessage{color:#6fb8ff!important}
.hero-rcs{color:#a56dff!important}
.hero-mms{color:#ff6aa9!important}
.channelCard{
min-height:190px;
padding-top:28px;
}
.channelGlyph{
font-size:22px;
line-height:1;
}
.channelRate{
display:inline-block;
margin-top:10px;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.05);
color:#c8e5f4;
font-size:10px;
letter-spacing:.2px;
}
.channel-sms .channelIcon{background:linear-gradient(135deg,rgba(34,183,255,.28),rgba(4,62,94,.65));color:#25b9ff}
.channel-whatsapp .channelIcon{background:linear-gradient(135deg,rgba(38,224,127,.28),rgba(6,75,50,.65));color:#26e07f}
.channel-email .channelIcon{background:linear-gradient(135deg,rgba(124,140,255,.28),rgba(47,52,120,.65));color:#7c8cff}
.channel-imessage .channelIcon{background:linear-gradient(135deg,rgba(111,184,255,.28),rgba(31,78,125,.65));color:#6fb8ff}
.channel-rcs .channelIcon{background:linear-gradient(135deg,rgba(165,109,255,.28),rgba(72,41,117,.65));color:#a56dff}
.channel-mms .channelIcon{background:linear-gradient(135deg,rgba(255,106,169,.28),rgba(111,36,75,.65));color:#ff6aa9}
.channel-sms{box-shadow:inset 0 0 40px rgba(37,185,255,.035)}
.channel-whatsapp{box-shadow:inset 0 0 40px rgba(38,224,127,.035)}
.channel-email{box-shadow:inset 0 0 40px rgba(124,140,255,.035)}
.channel-imessage{box-shadow:inset 0 0 40px rgba(111,184,255,.035)}
.channel-rcs{box-shadow:inset 0 0 40px rgba(165,109,255,.035)}
.channel-mms{box-shadow:inset 0 0 40px rgba(255,106,169,.035)}
.statBand{
background:
linear-gradient(90deg,rgba(6,42,73,.98),rgba(9,67,108,.98),rgba(6,42,73,.98));
}
.statBand div{
position:relative;
}
.statBand div:after{
content:"";
position:absolute;
width:46px;height:46px;
border-radius:50%;
right:20px;top:50%;
transform:translateY(-50%);
background:radial-gradient(circle,rgba(18,229,255,.08),transparent 70%);
}
.sectionDark{
padding-top:72px;
padding-bottom:72px;
}
.sectionDark.alt{
background:
radial-gradient(circle at 10% 20%,rgba(0,125,255,.05),transparent 24%),
linear-gradient(180deg,#061a2e,#041322);
}
.channelCards{
gap:18px;
}
.featureCard{
min-height:145px;
}
.featureCard span{
width:36px;height:36px;
display:grid;place-items:center;
border-radius:10px;
background:rgba(20,220,255,.08);
border:1px solid rgba(58,207,255,.12);
}
.previewCard{
min-height:195px;
}
.previewCard .miniUi{
height:120px;
background:
linear-gradient(180deg,#f4fbff,#eaf5fb);
}
.priceCard{
min-height:215px;
padding:26px 18px;
}
.priceCard h3{
margin-bottom:10px;
}
.priceCard b{
font-size:42px;
}
.priceCard span{
font-weight:700;
color:#b4d1e0;
}
.priceCard small{
margin-top:10px;
padding-top:10px;
border-top:1px solid rgba(90,199,255,.12);
}
.pricingGrid .priceCard:nth-child(1){border-color:rgba(37,185,255,.26)}
.pricingGrid .priceCard:nth-child(2){border-color:rgba(38,224,127,.26)}
.pricingGrid .priceCard:nth-child(3){border-color:rgba(124,140,255,.26)}
.pricingGrid .priceCard:nth-child(4){border-color:rgba(111,184,255,.26)}
.pricingGrid .priceCard:nth-child(5){border-color:rgba(165,109,255,.26)}
.pricingGrid .priceCard:nth-child(6){border-color:rgba(255,106,169,.26)}
.supportGrid div{
min-height:88px;
font-size:14px;
letter-spacing:.1px;
}
.finalCta{
padding-top:56px;
padding-bottom:56px;
}
.finalCta h2{
font-size:40px;
letter-spacing:-1px;
}
.side{
box-shadow:8px 0 28px rgba(0,0,0,.08);
}
.side a{
border:1px solid transparent;
}
.side a.active{
border-color:rgba(33,222,255,.15);
box-shadow:inset 0 0 20px rgba(30,200,255,.05);
}
.workspace{
padding:34px;
}
.dashHead{
margin-bottom:24px;
}
.metricGrid>div{
min-height:112px;
padding:22px;
}
.metricGrid>div b{
font-size:30px;
}
.quickGrid a{
min-height:78px;
display:flex;
align-items:center;
}
.panel{
border-color:#d4e4ee;
}
.panel h2{
margin-top:0;
}
.stepBar span{
position:relative;
overflow:hidden;
}
.stepBar span.on:after{
content:"";
position:absolute;
left:0;right:0;bottom:0;height:3px;
background:#00cfa5;
}
.phonePreview{
position:relative;
background:linear-gradient(180deg,#fafdff,#eef7fc);
}
.phonePreview:before{
content:"";
position:absolute;
top:7px;left:50%;
transform:translateX(-50%);
width:62px;height:6px;
border-radius:10px;
background:#0d2639;
}
.walletHero{
padding:12px 16px;
border-radius:14px;
background:linear-gradient(135deg,#dffbf3,#e8f8ff);
border:1px solid #cfe8e0;
}
.darkPanel{
background:
radial-gradient(circle at 90% 10%,rgba(18,148,255,.18),transparent 25%),
linear-gradient(135deg,#041322,#0a3156);
}
@media(max-width:1050px){
.heroExtreme h1{font-size:64px}
}
@media(max-width:760px){
.heroExtreme{min-height:auto;padding-top:50px;padding-bottom:50px}
.heroExtreme h1{font-size:48px}
.heroSignal{position:relative;left:auto;bottom:auto;margin-top:20px}
.floatingChannels{grid-template-columns:repeat(2,130px)}
}
/* ===== V3.3 EXTREME POLISH ===== */
.heroExtreme{
border-bottom:1px solid rgba(77,205,255,.14);
box-shadow:inset 0 -90px 120px rgba(0,0,0,.12);
}
.heroCopy:before{
content:"";
position:absolute;
left:-28px;
top:4px;
width:4px;
height:120px;
border-radius:8px;
background:linear-gradient(#16ebff,#14efb8,transparent);
box-shadow:0 0 24px rgba(20,235,255,.25);
}
.heroVisual:after{
content:"";
position:absolute;
inset:40px;
border-radius:50%;
border:1px solid rgba(68,202,255,.10);
box-shadow:
0 0 0 40px rgba(68,202,255,.025),
0 0 0 80px rgba(68,202,255,.018);
}
.heroBadges span{
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.statBand{
backdrop-filter:blur(14px);
}
.statBand div{
transition:.2s ease;
}
.statBand div:hover{
background:rgba(13,90,145,.2);
}
.cinematicFlow{
position:relative;
}
.cinematicFlow:before{
content:"";
position:absolute;
top:54px;
left:8%;
right:8%;
height:2px;
background:linear-gradient(90deg,transparent,#13dfff,#11f0b6,#13dfff,transparent);
opacity:.22;
z-index:0;
}
.cinematicFlow div{
position:relative;
z-index:1;
min-height:240px;
padding:28px 18px 24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
background:
radial-gradient(circle at 50% 0,rgba(24,177,255,.10),transparent 38%),
linear-gradient(180deg,rgba(8,35,58,.9),rgba(4,21,37,.72));
border:1px solid rgba(64,200,255,.12);
box-shadow:0 16px 35px rgba(0,0,0,.12);
}
.cinematicFlow div:hover{
border-color:rgba(51,225,255,.35);
transform:translateY(-4px);
transition:.25s ease;
}
.cinematicFlow b{
position:absolute;
top:14px;
right:16px;
width:30px;
height:30px;
font-size:11px;
background:#071a2b;
border:1px solid rgba(72,211,255,.18);
box-shadow:none;
}
.flowIcon{
display:grid;
place-items:center;
width:72px;height:72px;
border-radius:22px;
margin:10px 0 18px;
font-size:28px;
color:#15e8ff;
background:linear-gradient(135deg,rgba(18,224,255,.18),rgba(11,93,168,.12));
border:1px solid rgba(63,214,255,.18);
box-shadow:0 0 30px rgba(13,191,255,.10),inset 0 0 25px rgba(255,255,255,.03);
}
.cinematicFlow h3{
font-size:18px;
margin:0 0 8px;
}
.cinematicFlow p{
max-width:190px;
line-height:1.55;
}
.pricingHighlight{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-bottom:18px;
}
.pricingHighlight>div{
padding:15px 17px;
border-radius:12px;
background:linear-gradient(180deg,#08233b,#061b2e);
border:1px solid rgba(75,198,255,.13);
display:flex;
flex-direction:column;
}
.pricingHighlight small{
color:#6ea7c2;
font-size:9px;
letter-spacing:1.5px;
font-weight:900;
}
.pricingHighlight b{
color:#eafaff;
margin-top:5px;
font-size:14px;
}
.priceCard{
position:relative;
}
.priceCard:before{
content:"";
position:absolute;
left:12px;
right:12px;
top:0;
height:2px;
border-radius:3px;
background:linear-gradient(90deg,transparent,#19dfff,transparent);
opacity:.3;
}
.priceCard:hover{
box-shadow:0 18px 50px rgba(0,0,0,.18),0 0 30px rgba(19,220,255,.06);
}
.previewGrid{
gap:18px;
}
.previewCard{
min-height:220px;
}
.miniUi{
position:relative;
overflow:hidden;
}
.miniUi:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
transform:translateX(-120%);
}
.previewCard:hover .miniUi:after{
transform:translateX(120%);
transition:.8s ease;
}
.featureGrid{
gap:16px;
}
.featureCard{
padding:20px;
}
.featureCard small{
line-height:1.5;
}
.supportGrid div{
position:relative;
}
.supportGrid div:before{
content:"";
width:8px;height:8px;border-radius:50%;
background:#10efba;
box-shadow:0 0 12px rgba(16,239,186,.45);
margin-right:8px;
}
.finalCta{
background:
radial-gradient(circle at 82% 30%,rgba(22,101,255,.34),transparent 24%),
radial-gradient(circle at 14% 100%,rgba(0,247,188,.09),transparent 22%),
linear-gradient(90deg,#061425,#0b2d59);
}
.finalCta .btn{
margin-left:8px;
}
.dashPills{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:7px 0 10px;
}
.dashPills span{
padding:5px 8px;
border-radius:999px;
background:#e3f4fb;
color:#397286;
border:1px solid #d4e7f0;
font-size:10px;
font-weight:800;
}
.metricGrid>div{
position:relative;
overflow:hidden;
}
.metricGrid>div:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#12dfff,#12e9b8);
opacity:.35;
}
.metricGrid>div:nth-child(2):after{background:linear-gradient(90deg,#7b8cff,#21c8ff)}
.metricGrid>div:nth-child(3):after{background:linear-gradient(90deg,#14e7b5,#6de5ff)}
.metricGrid>div:nth-child(4):after{background:linear-gradient(90deg,#ff7bb8,#9d76ff)}
.quickGrid a{
position:relative;
overflow:hidden;
}
.quickGrid a:after{
content:"→";
position:absolute;
right:16px;
font-size:22px;
opacity:.5;
}
.panel{
box-shadow:0 14px 34px rgba(15,47,70,.07);
}
.panelTop h2{
letter-spacing:-.4px;
}
table tr:hover td{
background:#f7fbfd;
}
.side{
background:
radial-gradient(circle at 20% 0,rgba(25,144,255,.10),transparent 28%),
linear-gradient(180deg,#03111f,#061c31);
}
.side a.active{
background:
linear-gradient(90deg,rgba(12,91,112,.95),rgba(7,47,76,.95));
}
.phonePreview{
background:
radial-gradient(circle at 50% 10%,rgba(36,194,255,.08),transparent 28%),
linear-gradient(180deg,#fafdff,#edf7fc);
}
.phonePreview .bubble{
box-shadow:0 7px 18px rgba(29,85,117,.08);
}
.walletHero{
box-shadow:0 8px 20px rgba(8,137,113,.08);
}
.contactGrid>div{
transition:.22s ease;
}
.contactGrid>div:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(25,61,82,.08);
}
@media(max-width:1050px){
.cinematicFlow:before{display:none}
}
@media(max-width:760px){
.pricingHighlight{grid-template-columns:1fr}
.heroCopy:before{display:none}
}
/* ===== FINAL COMPLETE POLISH ===== */
:root{
--sb-cyan:#19e6ff;
--sb-mint:#14efb7;
--sb-deep:#03111f;
--sb-deep2:#061b2f;
--sb-card:#08233c;
--sb-line:rgba(66,205,255,.16);
}
/* Header */
.top{
min-height:76px;
background:rgba(2,15,27,.94);
border-bottom:1px solid rgba(76,201,255,.12);
box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.top nav a{
position:relative;
}
.top nav a:not(.btn):after{
content:"";
position:absolute;
left:0;right:100%;bottom:-8px;
height:2px;
background:linear-gradient(90deg,var(--sb-cyan),var(--sb-mint));
transition:.25s;
}
.top nav a:not(.btn):hover:after{right:0}
/* Hero stronger depth */
.heroExtreme{
background:
radial-gradient(circle at 76% 36%,rgba(0,144,255,.32),transparent 26%),
radial-gradient(circle at 83% 22%,rgba(146,78,255,.11),transparent 17%),
radial-gradient(circle at 20% 100%,rgba(0,244,185,.06),transparent 25%),
linear-gradient(180deg,#020d18,#04172a);
}
.heroExtreme .eyebrow{
text-shadow:0 0 18px rgba(20,240,190,.2);
}
.heroExtreme h1{
text-wrap:balance;
}
.heroExtreme p{
color:#b3cede;
}
.heroVisual{
perspective:1100px;
}
.floatingChannels{
transform:rotateY(-7deg) rotateX(2deg);
}
.heroChannel{
transition:.25s ease;
}
.heroChannel:hover{
transform:translateY(-3px) scale(1.02);
}
/* Homepage sections */
.sectionDark{
border-top:1px solid rgba(74,200,255,.07);
}
.channelCard,.featureCard,.previewCard,.priceCard{
transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.channelCard:hover,.featureCard:hover,.previewCard:hover,.priceCard:hover{
transform:translateY(-5px);
}
.sectionTitle h2{
text-wrap:balance;
}
.featureCard b{
letter-spacing:-.15px;
}
.previewCard .miniUi{
border:1px solid rgba(8,87,135,.08);
}
/* Pricing homepage and page */
.pricingGrid{
align-items:stretch;
}
.priceCard{
overflow:hidden;
}
.priceCard:after{
content:"";
position:absolute;
width:120px;height:120px;
border-radius:50%;
right:-45px;bottom:-45px;
background:radial-gradient(circle,rgba(31,198,255,.09),transparent 70%);
}
.pricingGrid .priceCard:nth-child(2):after{background:radial-gradient(circle,rgba(23,239,181,.1),transparent 70%)}
.pricingGrid .priceCard:nth-child(5):after{background:radial-gradient(circle,rgba(151,99,255,.1),transparent 70%)}
.pricingGrid .priceCard:nth-child(6):after{background:radial-gradient(circle,rgba(255,83,161,.09),transparent 70%)}
/* App shell */
.appShell{
background:linear-gradient(180deg,#edf6fb,#f6fafc);
}
.workspace{
min-width:0;
}
.side{
position:relative;
}
.side:after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:150px;
pointer-events:none;
background:linear-gradient(transparent,rgba(0,0,0,.13));
}
.side a{
position:relative;
z-index:1;
}
.side a span{
min-width:26px;
text-align:center;
opacity:.9;
}
/* Dashboard */
.dashHead h1{
letter-spacing:-1px;
}
.metricGrid>div{
min-height:118px;
background:
radial-gradient(circle at 95% 8%,rgba(15,188,255,.07),transparent 32%),
white;
}
.metricGrid>div small{
font-weight:700;
letter-spacing:.1px;
}
.quickGrid a{
background:
radial-gradient(circle at 100% 0,rgba(26,229,255,.12),transparent 30%),
linear-gradient(135deg,#08395d,#0a5570);
}
.quickGrid a:nth-child(2){
background:
radial-gradient(circle at 100% 0,rgba(19,239,183,.12),transparent 30%),
linear-gradient(135deg,#08473f,#0b5a52);
}
.quickGrid a:nth-child(3){
background:
radial-gradient(circle at 100% 0,rgba(122,139,255,.14),transparent 30%),
linear-gradient(135deg,#243d6b,#315384);
}
.quickGrid a:nth-child(4){
background:
radial-gradient(circle at 100% 0,rgba(255,95,173,.12),transparent 30%),
linear-gradient(135deg,#49355f,#64477a);
}
/* Tables */
table{
border-collapse:separate;
border-spacing:0;
}
th{
background:#f5f9fc;
font-weight:800;
}
th:first-child{border-radius:9px 0 0 9px}
th:last-child{border-radius:0 9px 9px 0}
td{
vertical-align:middle;
}
.status{
font-weight:800;
text-transform:capitalize;
}
/* Campaign builder */
.stepBar{
position:relative;
}
.stepBar:before{
content:"";
position:absolute;
top:50%;
left:5%;right:5%;
height:1px;
background:#cfe1eb;
z-index:0;
}
.stepBar span{
position:relative;
z-index:1;
}
.composer{
align-items:start;
}
.composerTools span{
cursor:default;
border:1px solid #dbeaf2;
}
.phonePreview{
min-height:340px;
}
.phonePreview .bubble{
max-width:85%;
}
/* Contacts / Templates */
.dropHint{
margin-top:8px;
margin-bottom:8px;
}
.templateCard{
transition:.2s;
}
.templateCard:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(25,59,80,.06);
}
/* Wallet */
.paymentInfo{
border:1px solid #d8e9f1;
}
.walletHero{
min-width:180px;
text-align:center;
}
/* Contact */
.contactGrid>div{
min-height:110px;
justify-content:center;
}
.contactGrid b{
font-size:15px;
}
.contactGrid span{
font-size:13px;
}
/* Admin */
.workspace .panel h2{
letter-spacing:-.35px;
}
.inline .mini{
white-space:nowrap;
}
.approve{
box-shadow:0 7px 16px rgba(8,166,107,.12);
}
.reject{
box-shadow:0 7px 16px rgba(218,62,75,.12);
}
/* Footer */
footer{
min-height:130px;
background:
radial-gradient(circle at 85% 0,rgba(13,109,191,.13),transparent 24%),
linear-gradient(180deg,#020d16,#020a12);
}
footer>div:nth-child(2){
font-size:13px;
}
/* Responsive final */
@media(max-width:1100px){
.workspace{padding:24px}
}
@media(max-width:760px){
.top .brand{font-size:21px}
.metricGrid>div{min-height:100px}
.quickGrid a{min-height:66px}
.workspace{padding:16px}
.panel{padding:16px}
.dashHead{gap:12px}
.walletHero{min-width:0}
footer{flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:28px 18px}
}
.pricingHeroPro{min-height:360px;background:radial-gradient(circle at 78% 35%,rgba(24,132,255,.30),transparent 28%),linear-gradient(180deg,#03111f,#082443)}
.pricingHeroPro h1 span{background:linear-gradient(90deg,#20e5ff,#15efb8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricingHeroBadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.pricingHeroBadges span{padding:7px 10px;border:1px solid rgba(74,205,255,.17);border-radius:999px;background:rgba(7,35,58,.72);color:#b7d6e7;font-size:10px;font-weight:800}
.pricingProSection{padding-top:52px;padding-bottom:70px}.pricingIntro{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:end;margin-bottom:24px}.pricingIntro h2{font-size:38px;margin:6px 0 10px;letter-spacing:-1px}.pricingIntro p{color:#607a8d;max-width:760px;line-height:1.65}
.pricingMiniNote{background:linear-gradient(135deg,#071c30,#0b3557);color:white;border-radius:16px;padding:20px;border:1px solid rgba(47,189,255,.13);display:flex;flex-direction:column}.pricingMiniNote small{color:#70b7d5;letter-spacing:1.4px;font-size:9px;font-weight:900}.pricingMiniNote b{font-size:24px;margin:6px 0}.pricingMiniNote span{color:#9fc0d2;font-size:12px;line-height:1.5}
.pricingDetailedGrid{grid-template-columns:repeat(3,1fr);gap:18px}.priceDetailed{text-align:left;min-height:520px;padding:24px;display:flex;flex-direction:column}.priceTopRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.channelTag{color:#0a9684!important;font-size:9px!important;font-weight:900;letter-spacing:1px;text-transform:uppercase}.priceTopRow h3{font-size:22px;margin:6px 0 0}.pricePill{display:inline-grid!important;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#e4fbff,#e6fff7);color:#08728a!important;font-size:12px;font-weight:900}
.priceDetailed>b{font-size:42px;color:#0b2033;margin-top:18px}.priceDetailed>span{color:#668093;font-weight:700}.priceDetailed .perSend{color:#2d7f96;margin-top:7px;padding-bottom:14px;border-bottom:1px solid #e0ebf2}.channelDescription{color:#526d80;line-height:1.6;font-size:13px;min-height:64px}.bestUse,.performanceNote{padding:13px 14px;border-radius:11px;margin-top:10px}.bestUse{background:#f0faf7;border:1px solid #d9eee8}.performanceNote{background:#f3f8fc;border:1px solid #dceaf2}.bestUse small,.performanceNote small{display:block;font-size:9px;font-weight:900;letter-spacing:1.2px;color:#0b8d78}.performanceNote small{color:#3d7e9c}.bestUse p,.performanceNote p{margin:6px 0 0;color:#526d80;font-size:12px;line-height:1.55}.priceDetailed .btn{margin-top:auto}
.conversionSection{margin-top:56px;padding:36px;border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(21,128,255,.12),transparent 25%),linear-gradient(135deg,#061a2d,#0a3556);color:white}.conversionLead h2{font-size:34px;margin:7px 0 10px}.conversionLead p{color:#a8c5d6;max-width:900px;line-height:1.7}.conversionGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.conversionGrid>div{background:rgba(4,24,41,.55);border:1px solid rgba(66,201,255,.13);border-radius:14px;padding:18px}.conversionGrid span{color:#12efbd;font-weight:900;font-size:11px}.conversionGrid p{color:#91b3c6;font-size:12px;line-height:1.55}
.ratioExplainer{margin-top:24px;padding:28px;border-radius:18px;background:white;border:1px solid #dce8f0}.ratioVisual{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.2fr;gap:12px;align-items:center}.ratioVisual>div{min-height:88px;display:flex;flex-direction:column;justify-content:center;padding:15px;border-radius:12px;background:#f4f9fc;border:1px solid #dceaf2}.ratioVisual>i{font-style:normal;font-size:22px;color:#7895a8;font-weight:900}.ratioVisual span{margin-top:5px;color:#6a8192;font-size:11px}.ratioVisual .resultBox{background:linear-gradient(135deg,#e8fff8,#e8f8ff);border-color:#cfece3}.ratioExplainer>p{margin:18px 0 0;color:#5e7687;line-height:1.6;font-size:13px}
.pricingPolicy{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.pricingPolicy>div{padding:22px;border-radius:15px;background:#f7fbfd;border:1px solid #dce9f1}.pricingPolicy h3{margin:0 0 8px}.pricingPolicy p{color:#5f7889;line-height:1.6;margin:0}
@media(max-width:1050px){.pricingDetailedGrid{grid-template-columns:repeat(2,1fr)}.conversionGrid{grid-template-columns:repeat(2,1fr)}.ratioVisual{grid-template-columns:1fr}.ratioVisual>i{text-align:center}}
@media(max-width:760px){.pricingIntro,.pricingDetailedGrid,.conversionGrid,.pricingPolicy{grid-template-columns:1fr}.pricingHeroPro{min-height:auto}.priceDetailed{min-height:auto}.conversionSection{padding:24px}}
/* ===== FINAL INSIGHTS SECTION ===== */
.performanceInsightsBlock{
margin-top:28px;
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:22px;
align-items:center;
padding:24px;
border-radius:20px;
background:
radial-gradient(circle at 90% 10%, rgba(22,136,255,.08), transparent 24%),
linear-gradient(135deg,#f7fbfd,#edf6fb);
border:1px solid #d7e6ef;
box-shadow:0 18px 40px rgba(18,52,78,.06);
}
.performanceInsightsCopy h2{
margin:8px 0 12px;
font-size:36px;
line-height:1.1;
letter-spacing:-1px;
color:#0b2237;
}
.performanceInsightsCopy p{
color:#5b7688;
line-height:1.65;
}
.insightList{
margin:16px 0;
padding-left:18px;
color:#4e6778;
}
.insightList li{
margin:10px 0;
line-height:1.6;
}
.insightSmall{
margin-top:12px;
font-size:12px;
color:#6c8393!important;
}
.performanceInsightsVisual{
border-radius:18px;
overflow:hidden;
border:1px solid #d5e6ef;
background:#071627;
box-shadow:0 12px 30px rgba(10,40,65,.12);
}
.performanceInsightsVisual img{
display:block;
width:100%;
height:auto;
}
@media(max-width:1050px){
.performanceInsightsBlock{
grid-template-columns:1fr;
}
}
/* ===== PRICING HEAVY SECURITY PAGE ===== */
.pricingHeavyHero{
min-height:420px;
align-items:center;
background:
radial-gradient(circle at 78% 38%,rgba(23,133,255,.30),transparent 26%),
radial-gradient(circle at 12% 100%,rgba(0,238,186,.07),transparent 24%),
linear-gradient(180deg,#03111f,#082748);
}
.pricingHeavyHero h1{
font-size:54px;
max-width:720px;
letter-spacing:-1.6px;
}
.pricingHeavyHero h1 span{
display:block;
background:linear-gradient(90deg,#22e8ff,#15efb8,#8ed2ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.pricingHeavyHero p{max-width:760px;color:#b4cfdf;line-height:1.7}
.pricingHeroVisual{position:relative;display:flex;justify-content:flex-end;align-items:center}
.eastasianLine{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.eastasianLine b,.eastasianLine span{
padding:6px 10px;border-radius:999px;
background:rgba(8,34,56,.65);
border:1px solid rgba(74,206,255,.14);
color:#d5f6ff;
font-size:12px;
}
.securityPanel{
width:340px;max-width:100%;
border-radius:22px;
padding:18px;
background:linear-gradient(180deg,rgba(4,20,36,.92),rgba(8,42,69,.92));
border:1px solid rgba(66,205,255,.16);
box-shadow:0 22px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
position:relative;
z-index:2;
}
.securityTop{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.securityTop .pulse{
width:11px;height:11px;border-radius:50%;
background:#14efbb;box-shadow:0 0 0 0 rgba(20,239,187,.35);animation:sbpulse 1.8s infinite;
}
@keyframes sbpulse{
0%{box-shadow:0 0 0 0 rgba(20,239,187,.35)}
70%{box-shadow:0 0 0 12px rgba(20,239,187,0)}
100%{box-shadow:0 0 0 0 rgba(20,239,187,0)}
}
.securityTop b{color:#effcff}
.securityTop small{grid-column:2;color:#8bb5ca}
.securityGraph{
height:150px;margin-top:16px;border-radius:16px;
background:
linear-gradient(transparent 24%,rgba(255,255,255,.04) 25%,transparent 26%),
linear-gradient(90deg,transparent 24%,rgba(255,255,255,.04) 25%,transparent 26%),
linear-gradient(180deg,#062746,#031524);
background-size:100% 32px, 60px 100%, 100% 100%;
position:relative;
display:flex;align-items:flex-end;gap:16px;padding:18px;
overflow:hidden;
}
.securityGraph .bar{
width:38px;border-radius:10px 10px 0 0;
background:linear-gradient(180deg,#7be2ff,#2c8fd7);
box-shadow:0 0 18px rgba(32,176,255,.16);
}
.securityGraph .b1{height:24px}.securityGraph .b2{height:52px}.securityGraph .b3{height:88px}.securityGraph .b4{height:116px}
.securityGraph .curve{
position:absolute;right:18px;top:16px;font-size:54px;font-weight:900;color:#ffffffd8;
text-shadow:0 0 24px rgba(255,255,255,.18);
}
.securityStats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.securityStats div{
padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)
}
.securityStats small{display:block;color:#83aec1;font-size:10px}
.securityStats b{display:block;color:#f2fcff;margin-top:4px;font-size:13px}
.pricingHeavySection{padding-top:42px;padding-bottom:74px}
.securityStrip{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px
}
.securityStrip>div{
background:linear-gradient(135deg,#081c30,#0a3355);
border:1px solid rgba(59,194,255,.12);
border-radius:15px;
padding:16px;
color:#fff;
box-shadow:0 12px 28px rgba(10,32,52,.10);
}
.securityStrip span{font-size:18px;display:block;margin-bottom:8px}
.securityStrip b{display:block;font-size:15px}
.securityStrip small{display:block;margin-top:6px;color:#9fc2d3;line-height:1.5}
.pricingIntro.heavy{display:grid;grid-template-columns:1.18fr .82fr;gap:24px;align-items:end;margin:24px 0}
.pricingIntro.heavy h2{font-size:40px;letter-spacing:-1px;margin:8px 0 10px}
.pricingIntro.heavy p{color:#607b8d;line-height:1.7}
.pricingMiniNote.heavy{
background:linear-gradient(135deg,#071b2f,#0b3559);
color:#fff;border:1px solid rgba(59,194,255,.13);box-shadow:0 18px 35px rgba(10,32,52,.08)
}
.signalCards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 26px}
.signalCard{
background:#fff;border:1px solid #dbe8f0;border-radius:16px;padding:18px;
box-shadow:0 12px 28px rgba(22,52,78,.05)
}
.signalCard .icon{
width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(135deg,#e9fbff,#e8fff8);font-size:22px;margin-bottom:10px
}
.signalCard b{display:block;color:#10273b}
.signalCard span{display:block;color:#617b8d;line-height:1.6;font-size:13px;margin-top:6px}
.pricingDetailedGrid.heavy{grid-template-columns:repeat(3,1fr);gap:18px}
.priceDetailed.heavy{
min-height:610px;padding:24px;position:relative;overflow:hidden;
border:1px solid #dce8f0;box-shadow:0 18px 34px rgba(21,53,78,.06)
}
.priceDetailed.heavy:before{
content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,rgba(36,203,255,.12),transparent 70%);
}
.priceDecor{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.priceDecor .glyph{
width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
font-size:22px;background:linear-gradient(135deg,#e9fbff,#f1f7ff);color:#0c7191;border:1px solid #d6eaf3
}
.microTag{
font-size:10px;color:#688395;padding:6px 10px;border-radius:999px;background:#f4f9fc;border:1px solid #dce8f0
}
.channel-sms .glyph{color:#0d93d2}.channel-whatsapp .glyph{color:#0fa56a}.channel-email .glyph{color:#6b67da}
.channel-imessage .glyph{color:#2e89f4}.channel-rcs .glyph{color:#8b5be5}.channel-mms .glyph{color:#d44f99}
.miniTelemetry{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.miniTelemetry span{
font-size:10px;padding:6px 8px;border-radius:999px;background:#f1f7fb;border:1px solid #dce7ef;color:#4d687b
}
.techLine{
margin-top:10px;padding:14px;border-radius:12px;background:#fff8ef;border:1px solid #f2e1c8
}
.techLine small{display:block;font-size:9px;font-weight:900;letter-spacing:1.1px;color:#a36a13}
.techLine p{margin:6px 0 0;color:#6d7d87;line-height:1.55;font-size:12px}
.bestUse,.performanceNote{margin-top:12px}
.conversionSection.heavy{
margin-top:34px;padding:36px;border-radius:22px;
background:radial-gradient(circle at 88% 10%,rgba(15,123,255,.13),transparent 25%),linear-gradient(135deg,#061a2d,#0a3556);
box-shadow:0 22px 44px rgba(12,39,61,.12)
}
.deliveryMatrix{
margin-top:24px;padding:28px;border-radius:20px;background:#fff;border:1px solid #dce8f0;box-shadow:0 14px 28px rgba(19,55,82,.05)
}
.matrixIntro h2{margin:8px 0 8px;font-size:32px;letter-spacing:-.8px;color:#0c2337}
.matrixIntro p{color:#657d8d;line-height:1.6}
.matrixGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.matrixGrid>div{
border-radius:14px;padding:16px;background:#f6fafc;border:1px solid #dce8f0
}
.matrixGrid b{display:block;color:#10273a;margin-bottom:6px}
.matrixGrid span{display:block;color:#637b8c;font-size:13px;line-height:1.55}
.performanceInsightsBlock.heavy{margin-top:24px}
.ratioExplainer.heavy{box-shadow:0 14px 28px rgba(19,55,82,.05)}
@media(max-width:1100px){
.securityStrip,.signalCards,.matrixGrid{grid-template-columns:repeat(2,1fr)}
.pricingDetailedGrid.heavy{grid-template-columns:repeat(2,1fr)}
.pricingIntro.heavy{grid-template-columns:1fr}
}
@media(max-width:760px){
.pricingHeavyHero h1{font-size:40px}
.securityStrip,.signalCards,.matrixGrid,.pricingDetailedGrid.heavy{grid-template-columns:1fr}
.securityPanel{width:100%}
.securityGraph{gap:10px}
.securityGraph .bar{width:28px}
}
/* ===== HEAVY AUTH / REGISTER / LOGIN ===== */
.authMega{
min-height:720px;
display:grid;
grid-template-columns:1.08fr .92fr;
background:#edf5fa;
color:#0b1b2c;
}
.authMegaLeft{
position:relative;
overflow:hidden;
padding:72px 7vw;
color:white;
background:
radial-gradient(circle at 85% 28%,rgba(0,121,255,.32),transparent 24%),
radial-gradient(circle at 10% 90%,rgba(0,239,185,.08),transparent 24%),
linear-gradient(135deg,#02101e,#07345c);
}
.authMegaLeft:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(67,199,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(67,199,255,.035) 1px,transparent 1px);
background-size:34px 34px;
mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.authMegaLeft:after{
content:"";
position:absolute;
width:520px;height:520px;border-radius:50%;
right:-220px;top:-170px;
border:1px solid rgba(75,208,255,.11);
box-shadow:
0 0 0 70px rgba(75,208,255,.025),
0 0 0 140px rgba(75,208,255,.018);
}
.authMegaLeft>*{position:relative;z-index:2}
.authBrandRow{
display:grid;
grid-template-columns:auto 1fr;
gap:3px 10px;
align-items:center;
margin-bottom:26px;
}
.authBrandRow .authSignal{
width:12px;height:12px;border-radius:50%;
background:#12efba;
box-shadow:0 0 0 0 rgba(18,239,186,.35);
animation:authpulse 1.8s infinite;
grid-row:1/3;
}
@keyframes authpulse{
0%{box-shadow:0 0 0 0 rgba(18,239,186,.35)}
70%{box-shadow:0 0 0 11px rgba(18,239,186,0)}
100%{box-shadow:0 0 0 0 rgba(18,239,186,0)}
}
.authBrandRow b{font-size:11px;letter-spacing:1.4px}
.authBrandRow small{color:#74a9c3;font-size:9px;letter-spacing:1px}
.authMegaLeft h1{
font-size:58px;
line-height:1.02;
letter-spacing:-2px;
max-width:650px;
margin:14px 0 16px;
}
.authMegaLeft p{
color:#a8c7d9;
max-width:680px;
line-height:1.7;
font-size:16px;
}
.authAsian{
display:flex;
flex-wrap:wrap;
gap:9px;
margin:22px 0;
}
.authAsian span{
padding:7px 10px;
border-radius:999px;
background:rgba(4,27,45,.66);
border:1px solid rgba(73,205,255,.14);
color:#dff8ff;
font-size:12px;
}
.authFeatureGrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:26px;
}
.authFeatureGrid>div{
padding:16px;
border-radius:14px;
background:rgba(5,29,49,.62);
border:1px solid rgba(67,199,255,.13);
backdrop-filter:blur(12px);
}
.authFeatureGrid span{font-size:20px}
.authFeatureGrid b{display:block;margin:8px 0 5px}
.authFeatureGrid small{color:#88b0c5;line-height:1.45}
.authTerminal{
margin-top:22px;
border-radius:14px;
padding:15px 17px;
background:#020d16;
border:1px solid rgba(68,199,255,.13);
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:11px;
color:#76a9bf;
line-height:1.8;
}
.authTerminal .greenDot{
display:inline-block;width:8px;height:8px;border-radius:50%;
background:#16efb8;box-shadow:0 0 10px rgba(22,239,184,.4);margin-right:7px
}
.authMegaRight{
display:flex;
align-items:center;
justify-content:center;
padding:45px 5vw;
background:
radial-gradient(circle at 80% 10%,rgba(23,128,255,.05),transparent 25%),
linear-gradient(180deg,#f1f8fc,#eaf3f8);
}
.authCardPro{
width:min(520px,100%);
padding:32px;
border-radius:22px;
background:white;
border:1px solid #d7e6ef;
box-shadow:0 28px 70px rgba(17,50,75,.14);
}
.authCardTop{
display:flex;
gap:14px;
align-items:center;
margin-bottom:18px;
}
.authIcon{
width:52px;height:52px;border-radius:16px;
display:grid;place-items:center;
background:linear-gradient(135deg,#16e6ff,#14efb8);
color:#042330;
font-size:24px;font-weight:900;
box-shadow:0 10px 24px rgba(15,211,225,.18);
}
.authCardTop small{
color:#5b8196;font-size:9px;letter-spacing:1.4px;font-weight:900
}
.authCardTop h2{
margin:4px 0 0;
font-size:30px;
letter-spacing:-.7px;
}
.securityBadgeRow{
display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px
}
.securityBadgeRow span{
padding:6px 8px;border-radius:999px;background:#edf8fb;border:1px solid #d8ebf1;
color:#3c7488;font-size:9px;font-weight:800
}
.authCardPro label{
margin-top:14px;
}
.fieldWrap{
display:grid;
grid-template-columns:38px 1fr;
border:1px solid #ccdee8;
border-radius:10px;
overflow:hidden;
background:#fbfdfe;
}
.fieldWrap span{
display:grid;place-items:center;
border-right:1px solid #dce8ef;
background:#f1f7fa;
}
.fieldWrap input{
border:0;
border-radius:0;
background:transparent;
}
.fieldWrap:focus-within{
border-color:#16cfe2;
box-shadow:0 0 0 3px rgba(22,207,226,.08);
}
.passwordRules{
display:grid;
gap:6px;
padding:12px 13px;
margin-top:12px;
border-radius:10px;
background:#f5fafc;
border:1px solid #deebf2;
}
.passwordRules span{
color:#627d8f;font-size:11px
}
.authSubmit{
margin-top:18px;
min-height:48px;
}
.authSwitch{
margin-top:17px;
text-align:center;
color:#657e8e;
font-size:13px;
}
.authSwitch a{
color:#0a8fa9;
font-weight:900;
}
.authTrustNote{
display:flex;
gap:10px;
align-items:flex-start;
margin-top:18px;
padding:12px 13px;
border-radius:10px;
background:#eef8f5;
border:1px solid #d9ebe5;
}
.authTrustNote p{
margin:0;
color:#587264;
font-size:11px;
line-height:1.55;
}
@media(max-width:900px){
.authMega{grid-template-columns:1fr}
.authMegaLeft{padding:50px 26px}
.authMegaLeft h1{font-size:44px}
}
@media(max-width:600px){
.authFeatureGrid{grid-template-columns:1fr}
.authMegaRight{padding:25px 16px}
.authCardPro{padding:22px}
}
/* ===== ULTRA CAMPAIGN BUILDER ===== */
.campaignUltra{color:#dff4ff;background:
radial-gradient(circle at 80% 5%,rgba(0,119,255,.10),transparent 25%),
linear-gradient(180deg,#041323,#061b2d);min-height:100%;padding:18px}
.campaignTopCards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.campaignTopCards>div{position:relative;display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:14px 15px;border-radius:14px;background:linear-gradient(180deg,#0a2942,#071d31);border:1px solid rgba(50,203,255,.20);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.cuIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#0ad6ff,#0c6dd7);box-shadow:0 0 22px rgba(18,204,255,.18)}
.campaignTopCards b{display:block;color:white}.campaignTopCards small{display:block;color:#86aabd;margin-top:3px}.campaignTopCards em{font-style:normal;color:#8dcde4}
.campaignTitleRow{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:10px 6px 14px;background:linear-gradient(90deg,transparent,rgba(13,96,156,.10),transparent);border-bottom:1px solid rgba(68,204,255,.11)}
.campaignTitleRow>div:first-child{display:flex;gap:14px;align-items:center}.titleDiamond{font-size:48px;color:#13ecff;text-shadow:0 0 22px rgba(19,236,255,.35)}
.campaignTitleRow h1{margin:0;color:white;font-size:31px;letter-spacing:-.7px}.campaignTitleRow p{margin:4px 0 0;color:#88abc0}
.campaignMiniStats{display:flex;border:1px solid rgba(64,201,255,.15);border-radius:12px;background:#071d30;overflow:hidden}.campaignMiniStats span{padding:10px 15px;text-align:center;border-right:1px solid rgba(255,255,255,.05)}.campaignMiniStats span:last-child{border:0}.campaignMiniStats b{display:block;color:#eaffff}.campaignMiniStats small{color:#789db3;font-size:9px}
.campaignSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.campaignSteps>div{position:relative;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;background:#08223a;border:1px solid rgba(65,197,255,.10)}.campaignSteps>div:after{content:"";position:absolute;right:-12px;width:18px;height:1px;background:#2a5874}.campaignSteps>div:last-child:after{display:none}.campaignSteps b{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;border:1px solid #5b91b0;color:#d7f3ff}.campaignSteps span{font-weight:900}.campaignSteps small{display:block;color:#7fa0b5;font-weight:500;margin-top:2px}.campaignSteps .active{background:linear-gradient(90deg,#10d7ff,#12efbd);color:#032435}.campaignSteps .active b{background:#073b58;color:white;border-color:#67efff}
.campaignUltraGrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.cuMain{min-width:0}.cuPanel{background:linear-gradient(180deg,#08253e,#061a2d);border:1px solid rgba(59,198,255,.17);border-radius:15px;padding:16px;margin-bottom:14px;box-shadow:0 12px 30px rgba(0,0,0,.16)}.cuPanelHead{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;margin-bottom:14px}.cuPanelHead>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#13e8ff;background:#083955;border:1px solid rgba(52,212,255,.16)}.cuPanelHead h2{margin:0;color:white;font-size:18px}.cuPanelHead p{margin:2px 0 0;color:#84a7bc;font-size:12px}.cuPanelHead i{font-style:normal;color:#8dc3d9}
.cuFieldGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.cuFieldGrid label{color:#d7eef8;margin:0}.cuFieldIcon{display:grid;grid-template-columns:42px 1fr;border:1px solid #1f6590;border-radius:9px;overflow:hidden;background:#051a2d}.cuFieldIcon>span{display:grid;place-items:center;color:#19dbff;background:#0a3857;border-right:1px solid rgba(255,255,255,.06)}.cuFieldIcon input,.cuFieldIcon select{border:0;border-radius:0;background:transparent;color:white}.cuFieldIcon select option{color:#111}.costField input{color:#16efcf;font-weight:900}
.composerUltra{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;margin-top:14px}.messageLabelRow{display:flex;justify-content:space-between;align-items:center}.messageLabelRow span{font-size:10px;color:#8eb0c2}.composerLeft textarea{background:#04182a;color:white;border-color:#1e638c;min-height:130px}.composerButtons{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.toolBtn{border:1px solid #1d6f97;background:#0a2c45;color:#d7f7ff;border-radius:999px;padding:8px 12px;font-size:11px;cursor:pointer}.channelHelp{display:grid;grid-template-columns:34px 1fr;gap:9px;align-content:start;padding:14px;border-radius:12px;background:linear-gradient(180deg,#0b3552,#08263e);border:1px solid rgba(76,202,255,.15)}.helpIcon{font-size:22px}.channelHelp b{color:white}.channelHelp p{color:#9bc0d1;line-height:1.45;font-size:11px}.helpDots{grid-column:2;display:flex;gap:7px}.helpDots i{width:7px;height:7px;border-radius:50%;background:#0be0c3;box-shadow:0 0 9px rgba(11,224,195,.35)}
.audienceHead{display:flex;justify-content:space-between;gap:20px;align-items:center}.audienceHead>div:first-child{display:flex;gap:10px;align-items:center}.audIcon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#073c5a;border:1px solid rgba(53,203,255,.16)}.audienceHead h2{margin:0;color:white;font-size:18px}.audienceHead p{margin:3px 0 0;color:#86aabc;font-size:12px}.audStats{display:flex;gap:18px}.audStats span{min-width:110px;padding-left:14px;border-left:1px solid rgba(255,255,255,.08)}.audStats small{display:block;color:#7fa3b6}.audStats b{font-size:22px;color:white}
.uploadAndScan{display:grid;grid-template-columns:310px 1fr;gap:14px;margin-top:14px}.uploadDrop{margin:0;min-height:170px;border:1px dashed #5f9bb9;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#071f33;color:#e7f8ff;cursor:pointer}.uploadCloud{font-size:25px}.uploadDrop small{color:#86a9bb;margin:5px 0 12px}.uploadButton{padding:9px 16px;border-radius:8px;background:linear-gradient(90deg,#12e6ff,#15efbd);color:#052636;font-weight:900}
.scanPanel{position:relative;min-height:170px;padding:14px 130px 14px 14px;border-radius:12px;background:#071e32;border:1px solid rgba(64,198,255,.12);overflow:hidden}.scanFileTop{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}.scanFileIcon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#0b3956}.scanFileTop b{color:white}.scanFileTop small{display:block;color:#789eb3;margin-top:2px}.scanFileTop>span:last-child{color:#bdefff}.scanProgress{height:9px;border-radius:999px;background:#123149;margin:12px 0;overflow:hidden}.scanProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#12e7ff,#12efbd);box-shadow:0 0 12px rgba(18,231,255,.24);transition:width .18s}.scanChecks{display:grid;grid-template-columns:1fr 1fr;gap:7px;color:#86a9bc;font-size:10px}.scanChecks .done{color:#21e8af}.scanVisual{position:absolute;right:15px;top:18px;width:100px;text-align:center}.scanVisual>span{display:grid;place-items:center;width:65px;height:80px;margin:auto;border:1px solid #14dfff;border-radius:10px;color:#16eaff;font-size:34px;box-shadow:0 0 28px rgba(18,222,255,.15)}.scanVisual b{display:block;color:#13e6ff;margin-top:7px}.scanVisual small{color:#779caf;font-size:9px}
.contactsUseRow{display:flex;align-items:end;gap:12px;margin-top:12px}.contactsUseRow label{margin:0;width:160px;color:#d8edf7}.contactsUseRow input{background:#061b2d;color:white;border-color:#205f84}.darkBtnInline{display:inline-block;padding:10px 14px;border-radius:8px;background:#0c3855;border:1px solid #1e668f;color:white;font-weight:800}
.campaignBottomBar{display:flex;gap:25px;align-items:center;padding:10px 5px;color:#cde3ef}.campaignBottomBar b{color:white}.bottomEast{margin-left:auto;color:#77b9d1}
.cuPreview{position:sticky;top:90px;align-self:start;padding:13px;border-radius:16px;background:linear-gradient(180deg,#071f34,#06192b);border:1px solid rgba(61,203,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.20)}.previewHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.previewHead>div{display:flex;gap:8px;align-items:center}.previewHead b{color:white}.recipientBadge{font-size:10px;color:#c6f6e8;background:#0b3047;padding:6px 9px;border-radius:999px}.recipientBadge::first-letter{color:#10efa9}
.phoneUltra{position:relative;width:290px;max-width:100%;height:520px;margin:0 auto;border:7px solid #d4e4ed;border-radius:45px;background:#05090d;box-shadow:0 0 0 3px #05111c,0 0 30px rgba(32,219,255,.15);overflow:hidden}.phoneNotch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:95px;height:20px;background:#000;border-radius:999px;z-index:3}.phoneStatus{display:flex;justify-content:space-between;padding:13px 18px 8px;color:white;font-size:9px}.phoneContact{text-align:center;color:white;border-bottom:1px solid #20272e;padding:10px 15px 12px;position:relative}.backArrow{position:absolute;left:13px;top:15px;color:#15dfff;font-size:32px}.avatarCircle{width:44px;height:44px;border-radius:50%;margin:0 auto 5px;background:linear-gradient(#cdd4dc,#707b86);display:grid;place-items:center;color:white}.phoneContact b{display:block;font-size:11px}.phoneContact small{display:block;color:#c6cbd0;margin-top:8px}.phoneConversation{padding:38px 14px;height:335px;overflow:auto;background:linear-gradient(180deg,#05090d,#070a0d)}.previewBubble{margin-left:auto;max-width:88%;padding:12px;border-radius:17px;background:#67717e;color:white;line-height:1.45;font-size:12px;white-space:pre-wrap}.mediaPreview{margin-left:auto;margin-top:8px;width:88%;height:110px;border-radius:15px;background:linear-gradient(135deg,#163a4c,#3d6f89);display:grid;place-items:center;color:#d9f8ff;font-size:11px}.phoneComposer{position:absolute;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:26px 1fr 30px;gap:8px;align-items:center;color:#7f8a94}.phoneComposer div{border:1px solid #343a40;border-radius:999px;padding:8px 12px;color:#858e96;font-size:10px}.phoneComposer b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#17e862;color:white}.previewNote{margin:10px 0;padding:10px;border-radius:10px;background:#0b304b;color:#b8d7e7;font-size:10px;line-height:1.4}.confirmUltra{min-height:44px}
@media(max-width:1200px){.campaignUltraGrid{grid-template-columns:1fr}.cuPreview{position:relative;top:auto}.phoneUltra{width:300px}.campaignTopCards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.campaignTopCards,.cuFieldGrid,.campaignSteps{grid-template-columns:1fr}.composerUltra,.uploadAndScan{grid-template-columns:1fr}.campaignSteps>div:after{display:none}.campaignTitleRow,.audienceHead{flex-direction:column;align-items:flex-start}.campaignMiniStats{width:100%;overflow:auto}.scanPanel{padding-right:14px}.scanVisual{position:relative;right:auto;top:auto;width:auto;margin-top:12px}.scanChecks{grid-template-columns:1fr}.campaignUltra{padding:10px}}
/* ===== ULTRA NEON DASHBOARD ===== */
.dashUltra{padding:18px;background:
radial-gradient(circle at 85% 0,rgba(0,132,255,.11),transparent 25%),
linear-gradient(180deg,#041321,#061a2d);min-height:100%;color:#dff6ff}
.dashHeroUltra{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;min-height:270px;padding:28px;border-radius:20px;background:
radial-gradient(circle at 80% 30%,rgba(15,124,255,.26),transparent 30%),
radial-gradient(circle at 12% 100%,rgba(15,238,183,.06),transparent 22%),
linear-gradient(135deg,#06192b,#092d50);border:1px solid rgba(62,204,255,.17);box-shadow:0 18px 45px rgba(0,0,0,.16);overflow:hidden;position:relative}
.dashHeroUltra:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(66,201,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(66,201,255,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to right,black,transparent 72%)}
.dashHeroUltra>*{position:relative;z-index:1}.dashLiveLine{font-size:10px;letter-spacing:1.5px;font-weight:900;color:#75b9d4;display:flex;gap:9px;align-items:center}.dashLiveLine>span{width:9px;height:9px;border-radius:50%;background:#12efb8;box-shadow:0 0 0 0 rgba(18,239,184,.35);animation:dashpulse 1.8s infinite}.dashLiveLine em{font-style:normal;margin-left:7px;color:#83d4df}
@keyframes dashpulse{0%{box-shadow:0 0 0 0 rgba(18,239,184,.35)}70%{box-shadow:0 0 0 10px rgba(18,239,184,0)}100%{box-shadow:0 0 0 0 rgba(18,239,184,0)}}
.dashHeroCopy h1{font-size:42px;letter-spacing:-1.4px;margin:10px 0;color:white}.dashHeroCopy p{max-width:720px;color:#9ebed1;line-height:1.65}.dashHeroButtons{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.dashGhostBtn{padding:11px 15px;border-radius:9px;border:1px solid rgba(74,201,255,.18);background:#071f34;color:#d8f2ff;font-weight:800}.dashAsianLine{display:flex;gap:8px;margin-top:17px;flex-wrap:wrap}.dashAsianLine span{padding:6px 9px;border-radius:999px;background:rgba(3,26,44,.58);border:1px solid rgba(71,203,255,.12);font-size:11px;color:#c4efff}
.dashHeroVisual{position:relative;min-height:220px;display:grid;place-items:center}.dashHeroVisual img{width:100%;max-height:230px;object-fit:contain}.heroVisualBadge{position:absolute;right:0;bottom:2px;padding:10px 12px;border-radius:12px;background:rgba(4,24,42,.8);border:1px solid rgba(64,202,255,.14);backdrop-filter:blur(12px);display:grid;grid-template-columns:auto 1fr;gap:2px 8px}.heroVisualBadge>span{grid-row:1/3;color:#13efb9}.heroVisualBadge b{color:white;font-size:12px}.heroVisualBadge small{color:#83a9bd;font-size:9px}
.dashSecurityGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.dashSecurityGrid>div{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:13px;border-radius:14px;background:linear-gradient(180deg,#09283f,#071c2e);border:1px solid rgba(59,200,255,.14)}.dsecIcon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#0a3855}.dashSecurityGrid b{display:block;color:white}.dashSecurityGrid small{display:block;color:#82a7ba;line-height:1.4;margin-top:3px}.dashSecurityGrid em{font-style:normal;color:#78bed4}
.dashMetricsUltra{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-bottom:14px}.dashMetricsUltra .metric{position:relative;min-height:115px;padding:16px;border-radius:14px;background:linear-gradient(180deg,#0a2a43,#071c30);border:1px solid rgba(66,199,255,.13);overflow:hidden}.dashMetricsUltra .metric:after{content:"";position:absolute;right:-30px;bottom:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(15,217,255,.09),transparent 70%)}.dashMetricsUltra span{display:block;color:#76abc1;font-size:9px;font-weight:900;letter-spacing:.8px}.dashMetricsUltra b{display:block;font-size:25px;color:white;margin-top:9px}.dashMetricsUltra small{display:block;color:#779aae;margin-top:4px;font-size:9px}.dashMetricsUltra i{position:absolute;right:13px;top:13px;font-style:normal;color:#16e2ff}.walletMetric{box-shadow:inset 0 -3px 0 rgba(17,238,184,.36)}
.dashMainGrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.dashPanel{padding:16px;border-radius:16px;background:linear-gradient(180deg,#08243b,#061a2c);border:1px solid rgba(62,199,255,.14);box-shadow:0 14px 32px rgba(0,0,0,.13);margin-bottom:14px}.dashPanelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.dashPanelHead>div:first-child{display:flex;gap:10px;align-items:center}.headIcon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#0b3b58}.dashPanelHead h2{margin:0;color:white;font-size:18px}.dashPanelHead p{margin:3px 0 0;color:#7fa5ba;font-size:11px}.headEast{color:#7ac1d9}.dashPanelHead>a{color:#25dfff;font-size:11px}
.paymentFlowSteps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.paymentFlowSteps>div{position:relative;padding:14px;border-radius:12px;background:#071f34;border:1px solid rgba(58,195,255,.09);min-height:120px}.paymentFlowSteps>div:after{content:"→";position:absolute;right:-9px;top:50%;color:#34708f}.paymentFlowSteps>div:last-child:after{display:none}.paymentFlowSteps b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#12ddff,#14efb8);color:#052431;margin-bottom:9px}.paymentFlowSteps strong{display:block;color:white}.paymentFlowSteps small{display:block;color:#7f9fb2;line-height:1.5;margin-top:5px}.walletStatusRow{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;margin-top:12px;align-items:stretch}.walletStatusRow>div{padding:11px;border-radius:10px;background:#09243a}.walletStatusRow small{display:block;color:#739bb0}.walletStatusRow b{display:block;color:white;margin-top:4px}.walletAction{display:grid;place-items:center;padding:0 15px;border-radius:10px;background:linear-gradient(90deg,#10dfff,#12efb9);color:#062431;font-weight:900}
.deliveryContent{display:grid;grid-template-columns:1fr 1.1fr;gap:14px}.deliveryContent img{width:100%;height:230px;object-fit:contain;border-radius:13px;background:#061827;border:1px solid rgba(255,255,255,.03)}.deliveryFactors{display:grid;grid-template-columns:1fr 1fr;gap:9px}.deliveryFactors>div{padding:13px;border-radius:11px;background:#071f33;border:1px solid rgba(59,192,255,.09)}.deliveryFactors span{font-size:9px;color:#13e8bc;font-weight:900}.deliveryFactors b{display:block;color:white;margin:6px 0}.deliveryFactors small{color:#7fa0b1;line-height:1.45}.deliveryDisclaimer{margin-top:10px;padding:10px;border-radius:9px;background:#0a3047;color:#9fc3d4;font-size:10px;line-height:1.5}
.recentCampaignsUltra table{color:#cfe8f4}.recentCampaignsUltra th{background:#0b3049;color:#a5c6d6}.recentCampaignsUltra td{border-bottom-color:rgba(255,255,255,.05)}.recentCampaignsUltra tr:hover td{background:#082239}.emptyState{padding:20px;text-align:center;color:#7ea2b6}.emptyState a{color:#20e0ff}
.dashColSide{min-width:0}.dashSideArt{position:relative;border-radius:16px;overflow:hidden;background:#071d31;border:1px solid rgba(61,201,255,.14);margin-bottom:14px}.dashSideArt img{display:block;width:100%;height:250px;object-fit:cover}.sideArtWords{position:absolute;left:18px;right:18px;bottom:16px;padding:13px;border-radius:12px;background:rgba(2,16,29,.74);backdrop-filter:blur(10px);border:1px solid rgba(74,203,255,.13)}.sideArtWords b{display:block;color:#21e7ff;font-size:28px}.sideArtWords span{display:block;color:white}.sideArtWords small{display:block;color:#83aabd;margin-top:4px}
.quickActionsUltra>a{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:10px;background:#071f33;border:1px solid rgba(65,195,255,.08);margin-top:8px}.quickActionsUltra>a>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#0a3855;color:#16e2ff}.quickActionsUltra b{display:block;color:white}.quickActionsUltra small{color:#779daf}.quickActionsUltra i{font-style:normal;color:#5ea6c4}
.accountRules ul{padding-left:18px;color:#96b6c7;line-height:1.7;font-size:11px}.accountRules li::marker{color:#12eebb}.languagePanel{text-align:center}.languageCloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.languageCloud span{padding:7px 9px;border-radius:999px;background:#092a42;border:1px solid rgba(68,198,255,.10);color:#d2f6ff}.languagePanel p{color:#759aad;font-size:10px;margin:12px 0 0}
@media(max-width:1300px){.dashMetricsUltra{grid-template-columns:repeat(3,1fr)}.dashSecurityGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.dashMainGrid{grid-template-columns:1fr}.dashHeroUltra{grid-template-columns:1fr}.dashHeroVisual{min-height:170px}.paymentFlowSteps{grid-template-columns:1fr 1fr}.paymentFlowSteps>div:after{display:none}}
@media(max-width:760px){.dashUltra{padding:10px}.dashMetricsUltra,.dashSecurityGrid,.paymentFlowSteps,.walletStatusRow,.deliveryContent,.deliveryFactors{grid-template-columns:1fr}.dashHeroCopy h1{font-size:34px}.campaignTopCards{grid-template-columns:1fr}}
/* ===== NEON SUITE PAGES: CONTACTS / TEMPLATES / ANALYTICS ===== */
.neonPage{padding:18px;background:
radial-gradient(circle at 85% 0,rgba(0,132,255,.11),transparent 25%),
linear-gradient(180deg,#041321,#061a2d);min-height:100%;color:#dff6ff}
.neonHead{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:12px 4px 16px}
.neonHead h1{margin:5px 0 8px;font-size:40px;letter-spacing:-1px;color:#fff}
.neonHead p{max-width:720px;color:#95b9cb;line-height:1.65}
.neonEyebrow{color:#19e7ff;letter-spacing:2.2px}
.neonLangBadge{padding:10px 14px;border-radius:999px;background:#08253b;border:1px solid rgba(69,199,255,.13);color:#c7f2ff;white-space:nowrap}
.neonSummaryGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.neonSummaryGrid>div{position:relative;padding:16px;border-radius:15px;background:linear-gradient(180deg,#0a2a43,#071c30);border:1px solid rgba(66,199,255,.13);overflow:hidden}
.neonSummaryGrid>div:after{content:"";position:absolute;right:-28px;bottom:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(19,230,255,.10),transparent 70%)}
.neonSummaryGrid small{display:block;color:#81a7bd;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.neonSummaryGrid b{display:block;font-size:31px;color:#fff;margin-top:6px}
.neonSummaryGrid span{display:block;color:#8eb0c2;margin-top:8px;font-size:12px;line-height:1.45}
.neonTwoCol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.neonPanel{padding:16px;border-radius:16px;background:linear-gradient(180deg,#08243b,#061a2c);border:1px solid rgba(62,199,255,.14);box-shadow:0 14px 32px rgba(0,0,0,.13);margin-bottom:14px}
.neonPanelHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.neonPanelHead>div:first-child{display:flex;gap:10px;align-items:center}
.panelIcon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#0a3855;color:#19e8ff}
.neonPanelHead h2{margin:0;color:#fff;font-size:21px}
.neonPanelHead p{margin:3px 0 0;color:#84a9bb;font-size:12px}
.panelEast{color:#78cddd;font-size:12px}
.formHeavyPanel form label{color:#dceef8}
.neonHint{background:#082233;border-color:#266080;color:#9fc1d2}
.uploadHeroArt{position:relative;min-height:155px;border-radius:14px;overflow:hidden;background:#061928;border:1px solid rgba(255,255,255,.04);margin-bottom:14px}
.uploadHeroArt img{display:block;width:100%;height:155px;object-fit:cover;opacity:.95}
.uploadHeroWords{position:absolute;left:14px;right:14px;bottom:12px;padding:12px;border-radius:12px;background:rgba(5,20,32,.78);backdrop-filter:blur(10px);border:1px solid rgba(78,206,255,.12)}
.uploadHeroWords b{display:block;color:#fff}
.uploadHeroWords small{display:block;color:#95bbca;margin-top:3px}
.miniGuideRow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.miniGuideRow span{padding:7px 10px;border-radius:999px;background:#071f33;border:1px solid rgba(60,195,255,.10);color:#beeaf8;font-size:11px}
.tableGlowWrap{border-radius:12px;overflow:hidden;border:1px solid rgba(80,207,255,.08)}
.tableGlowWrap table th{background:#0b3049;color:#a5c6d6}
.tableGlowWrap table td{border-bottom-color:rgba(255,255,255,.05);color:#d7edf7}
.status.good{background:#0c3650;color:#c9f9ea;border:1px solid rgba(27,236,183,.18)}
.neonInfoCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.neonInfoCards>div{padding:16px;border-radius:14px;background:linear-gradient(180deg,#092740,#071d31);border:1px solid rgba(67,203,255,.11)}
.neonInfoCards b{display:block;color:#fff;margin-bottom:6px}
.neonInfoCards p{margin:0;color:#8db0c3;line-height:1.6;font-size:13px}
.templateNeonCards{display:grid;gap:12px;max-height:820px;overflow:auto;padding-right:4px}
.neonTemplateCard{background:#071f33;border:1px solid rgba(61,198,255,.10)}
.neonTemplateCard small{color:#18e9ff;letter-spacing:1px}
.neonTemplateCard b{color:#fff}
.neonTemplateCard p{color:#b5d2df}
.templateTag{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;background:#0d324c;color:#cff5ff;font-size:11px}
.analyticsStats{grid-template-columns:repeat(6,1fr)}
.analyticsMainGrid{display:grid;grid-template-columns:minmax(0,1.25fr) 350px;gap:14px}
.chartHeroPanel{min-width:0}
.graphHero{padding:10px 0 4px}
.graphLegend{display:flex;gap:18px;flex-wrap:wrap;color:#8db2c5;font-size:12px;margin-bottom:10px}
.graphLegend i{display:inline-block;width:18px;height:4px;border-radius:99px;margin-right:6px;vertical-align:middle}
.graphLegend .lineC{background:#fff}
.graphLegend .barC{background:linear-gradient(90deg,#17e6ff,#14efb9)}
.neonGraphWrap{position:relative;height:360px;border-radius:18px;background:linear-gradient(180deg,#061726,#071c2d);border:1px solid rgba(74,205,255,.12);overflow:hidden;padding:20px 18px 44px}
.gridOverlay{position:absolute;inset:0;background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:100% 56px, 72px 100%}
.lineTrail{position:absolute;left:8%;right:6%;top:16%;bottom:24%;border-left:0;border-bottom:0}
.lineTrail:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
clip-path:polygon(0% 72%,12% 62%,26% 64%,39% 38%,53% 45%,67% 27%,82% 35%,100% 14%,100% 18%,82% 39%,67% 31%,53% 49%,39% 42%,26% 68%,12% 66%,0% 76%);
background:#fff;opacity:.95}
.lineTrail:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
clip-path:polygon(0% 72%,12% 62%,26% 64%,39% 38%,53% 45%,67% 27%,82% 35%,100% 14%,100% 24%,82% 43%,67% 35%,53% 53%,39% 46%,26% 72%,12% 70%,0% 80%);
background:rgba(255,255,255,.15);filter:blur(10px)}
.bars{position:absolute;left:22px;right:22px;bottom:58px;top:34px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:end}
.bars i{display:block;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#18e9ff,#14efb9);box-shadow:0 0 22px rgba(22,228,255,.15)}
.graphLabels{position:absolute;left:20px;right:20px;bottom:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.graphLabels span{color:#84a9bc;text-align:center;font-size:11px}
.chartFootNotes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.chartFootNotes>div{padding:13px;border-radius:12px;background:#071f33;border:1px solid rgba(59,194,255,.09)}
.chartFootNotes b{display:block;color:#fff}
.chartFootNotes small{display:block;color:#8eb0c2;line-height:1.5;margin-top:5px}
.analyticsSideStack{display:grid;gap:14px}
.sideVisualPanel img{width:100%;height:160px;object-fit:cover;border-radius:12px;background:#061726;border:1px solid rgba(255,255,255,.03)}
.sidePanelCopy{color:#95bacb;line-height:1.6;font-size:13px}
.metricMiniStack{display:grid;gap:10px}
.metricMiniStack>div{padding:12px;border-radius:12px;background:#071f33;border:1px solid rgba(60,196,255,.10)}
.metricMiniStack small{display:block;color:#84abc1}
.metricMiniStack b{display:block;margin-top:5px;color:#fff;font-size:24px}
.neonThreeCol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.channelMixList{display:grid;gap:10px}
.mixRow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px;border-radius:12px;background:#071f33;border:1px solid rgba(61,197,255,.09)}
.mixRow b{color:#fff}.mixRow span,.mixRow small{color:#94b8ca}
.notesGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.notesGrid>div{padding:12px;border-radius:12px;background:#071f33;border:1px solid rgba(59,194,255,.09)}
.notesGrid b{display:block;color:#fff;margin-bottom:6px}.notesGrid p{margin:0;color:#8eb1c2;font-size:13px;line-height:1.55}
.analyticsBullets{padding-left:20px;color:#9ab9ca;line-height:1.8;font-size:13px}
.analyticsBullets li::marker{color:#17efbc}
@media(max-width:1300px){
.analyticsStats{grid-template-columns:repeat(3,1fr)}
.neonSummaryGrid{grid-template-columns:repeat(2,1fr)}
.neonInfoCards,.neonThreeCol{grid-template-columns:1fr}
}
@media(max-width:1050px){
.analyticsMainGrid,.neonTwoCol{grid-template-columns:1fr}
}
@media(max-width:760px){
.neonPage{padding:10px}
.neonHead{flex-direction:column}
.neonHead h1{font-size:34px}
.neonSummaryGrid,.analyticsStats,.chartFootNotes,.notesGrid{grid-template-columns:1fr}
}
/* ===== SENDER ID APPROVAL SYSTEM ===== */
.senderDashboardCard{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 14px;padding:16px;border-radius:16px;background:
radial-gradient(circle at 90% 0,rgba(17,215,255,.12),transparent 25%),
linear-gradient(135deg,#082740,#071d31);border:1px solid rgba(65,201,255,.15);color:#dff6ff}
.senderDashLeft{display:flex;align-items:center;gap:13px}.senderShield{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#16e7ff,#14efb9);color:#032532;font-weight:900;box-shadow:0 0 24px rgba(20,228,255,.16)}
.senderDashLeft small{color:#78a8bd;letter-spacing:1px}.senderDashLeft h3{margin:4px 0;color:#fff;font-size:24px}.senderDashLeft p{margin:0;color:#8eb1c3}
.senderDashStatus{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.senderDashStatus>span{padding:7px 10px;border-radius:999px;background:#0d3550;color:#d7f8ff;font-size:10px;font-weight:900}.senderDashStatus.approved>span{background:#0b4a3e;color:#bfffe7}.senderDashStatus.pending>span{background:#584612;color:#ffe69a}.senderDashStatus.rejected>span{background:#5b2630;color:#ffc6cd}.senderDashStatus a{color:#20e3ff;font-size:11px}
.senderHeroGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.senderHeroCard{display:flex;gap:13px;align-items:center;padding:16px;border-radius:15px;background:linear-gradient(180deg,#092942,#071c30);border:1px solid rgba(66,200,255,.13)}.senderBigIcon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#0a3c5c;color:#19e7ff;font-weight:900}.senderHeroCard small{display:block;color:#79a4b9}.senderHeroCard b{display:block;color:#fff;font-size:28px;margin-top:2px}.senderHeroCard p{margin:4px 0 0;color:#89acbe;font-size:12px}
.senderArt{position:relative;height:170px;overflow:hidden;border-radius:14px;background:#061928;margin-bottom:14px;border:1px solid rgba(255,255,255,.04)}.senderArt img{width:100%;height:100%;object-fit:cover}.senderArt>div{position:absolute;left:14px;right:14px;bottom:12px;padding:11px;border-radius:11px;background:rgba(3,20,32,.76);border:1px solid rgba(73,202,255,.12)}.senderArt b{display:block;color:#fff}.senderArt small{display:block;color:#92b6c7;margin-top:3px}
.senderRules{display:grid;gap:7px;padding:12px;margin:10px 0;border-radius:11px;background:#071f33;border:1px solid rgba(59,195,255,.09)}.senderRules span{color:#9fc4d4;font-size:11px}
.senderRequestList{display:grid;gap:11px;max-height:780px;overflow:auto}.senderRequestCard{padding:14px;border-radius:13px;background:#071f33;border:1px solid rgba(61,198,255,.10)}.senderReqTop{display:flex;justify-content:space-between;gap:10px}.senderReqTop small{color:#76a6bb}.senderReqTop b{display:block;color:#fff;margin-top:4px;font-size:18px}.senderBadge{padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;background:#0c3450;color:#d7f5ff}.senderBadge.approved{background:#0b4c3e;color:#bfffe7}.senderBadge.pending{background:#5b4814;color:#ffe7a3}.senderBadge.rejected{background:#592832;color:#ffc4cb}
.assignedNumber{margin-top:12px;padding:11px;border-radius:10px;background:#092840;border:1px solid rgba(57,193,255,.08)}.assignedNumber small{display:block;color:#7ea8ba}.assignedNumber strong{display:block;color:#18e9ff;font-size:19px;margin-top:4px}.senderRequestCard p{color:#8eb0c2;margin:10px 0 0}
.senderExplainerGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.senderExplainerGrid>div{padding:15px;border-radius:13px;background:linear-gradient(180deg,#092740,#071d31);border:1px solid rgba(61,199,255,.10)}.senderExplainerGrid b{color:#fff}.senderExplainerGrid p{color:#8db0c3;line-height:1.55;font-size:12px}
.adminSenderForm{display:grid;gap:6px;min-width:220px}.adminSenderForm input{padding:7px}.adminSenderForm>div{display:flex;gap:6px}
.fieldWrap select{border:0;border-radius:0;background:transparent;width:100%;padding:12px;color:#0a1c2e}
@media(max-width:1050px){.senderHeroGrid,.senderExplainerGrid{grid-template-columns:1fr 1fr}.senderDashboardCard{align-items:flex-start;flex-direction:column}.senderDashStatus{align-items:flex-start}}
@media(max-width:760px){.senderHeroGrid,.senderExplainerGrid{grid-template-columns:1fr}}
/* ===== NEON HUMAN + EMAIL OTP VERIFICATION ===== */
.humanHoneypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important}
.humanVerifyBox{display:grid!important;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;margin-top:16px!important;padding:13px;border-radius:12px;background:linear-gradient(135deg,#eefbf8,#eef8fc);border:1px solid #d5ebe5;cursor:pointer}
.humanVerifyBox>input{position:absolute;opacity:0;pointer-events:none}
.humanCheckMark{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#d9e8ec;color:#7a919b;font-weight:900}
.humanVerifyBox input:checked + .humanCheckMark{background:linear-gradient(135deg,#13e5ff,#14efb8);color:#042733;box-shadow:0 0 18px rgba(18,224,214,.18)}
.humanVerifyBox b{display:block;color:#163247}.humanVerifyBox small{display:block;color:#678493;margin-top:2px}
.humanVerifyBox em{font-style:normal;color:#0d927d;font-size:9px;font-weight:900;letter-spacing:1px}
.authRulesBox{margin-top:14px;padding:13px;border-radius:12px;background:#071c2e;border:1px solid rgba(65,198,255,.12);color:#cdebf7}
.rulesHead{display:flex;gap:9px;align-items:center}.rulesHead>span{font-size:20px}.rulesHead b{display:block;color:#fff}.rulesHead small{color:#70aec6}
.authRulesBox ul{margin:10px 0 0;padding-left:19px;color:#90b5c7;line-height:1.6;font-size:11px}.authRulesBox li::marker{color:#14edb8}
.verifyMega{min-height:720px;display:grid;grid-template-columns:1.05fr .95fr;background:#edf6fb}
.verifyVisual{position:relative;overflow:hidden;padding:70px 7vw;color:white;background:
radial-gradient(circle at 75% 25%,rgba(0,128,255,.30),transparent 26%),
radial-gradient(circle at 15% 95%,rgba(18,239,185,.08),transparent 24%),
linear-gradient(135deg,#02101e,#07345c)}
.verifyVisual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(66,199,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(66,199,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.verifyVisual>*{position:relative;z-index:2}.verifyVisual h1{font-size:58px;letter-spacing:-2px;line-height:1.02;margin:10px 0 16px}.verifyVisual p{max-width:650px;color:#a8c9d9;line-height:1.7;font-size:16px}.verifyVisual strong{color:#e9fbff}
.verifyRadar{position:absolute!important;right:-70px;top:45px;width:330px;height:330px;display:grid;place-items:center;z-index:1!important}
.radarRing{position:absolute;border-radius:50%;border:1px solid rgba(66,209,255,.13)}.r1{width:120px;height:120px}.r2{width:220px;height:220px}.r3{width:320px;height:320px}
.verifyShield{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg,#14e7ff,#14efb8);color:#052735;font-size:34px;box-shadow:0 0 38px rgba(20,227,255,.24)}
.verifyLanguage{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.verifyLanguage span{padding:7px 10px;border-radius:999px;background:rgba(4,27,45,.65);border:1px solid rgba(69,203,255,.14);color:#d9f8ff}
.verifySteps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;max-width:670px}.verifySteps>div{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(5,29,49,.63);border:1px solid rgba(64,201,255,.12)}.verifySteps b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid #548aa5}.verifySteps span{font-weight:800}.verifySteps small{display:block;color:#82a9bc;font-weight:500;margin-top:2px}.verifySteps .done b{background:#0b5749;border-color:#14efb8}.verifySteps .active{border-color:#1ddfff;box-shadow:inset 0 0 24px rgba(17,218,255,.06)}
.verifyFormSide{display:flex;align-items:center;justify-content:center;padding:42px 5vw;background:radial-gradient(circle at 80% 5%,rgba(23,128,255,.05),transparent 25%),linear-gradient(180deg,#f1f8fc,#eaf3f8)}
.verifyCard{width:min(510px,100%);padding:32px;border-radius:22px;background:#fff;border:1px solid #d8e6ef;box-shadow:0 28px 70px rgba(17,50,75,.14)}
.verifyCardHead{display:flex;gap:13px;align-items:center;margin-bottom:18px}.verifyCardHead>span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#16e6ff,#14efb8);font-size:24px}.verifyCardHead small{color:#5c8196;font-size:9px;letter-spacing:1.3px;font-weight:900}.verifyCardHead h2{margin:3px 0 0;font-size:30px}
.otpInput{text-align:center!important;font-size:31px!important;letter-spacing:10px!important;font-weight:900!important;padding-left:20px!important}
.verifyButton{margin-top:13px;min-height:48px}.resendForm{text-align:center;margin-top:12px}.resendBtn{border:0;background:transparent;color:#0a8ea9;font-weight:900;cursor:pointer;text-decoration:underline}
.verifySecurityNotes{display:grid;gap:7px;margin-top:18px;padding:13px;border-radius:11px;background:#f4fafc;border:1px solid #deebf2}.verifySecurityNotes span{font-size:11px;color:#5e798a}
.mailWarning{padding:12px 13px;margin-bottom:14px;border-radius:11px;background:#fff8eb;border:1px solid #f0dfbd}.mailWarning b{color:#7f5b16}.mailWarning p{margin:5px 0 0;color:#836e47;font-size:11px;line-height:1.5}
.verificationAdminPanel table{font-size:12px}
@media(max-width:900px){.verifyMega{grid-template-columns:1fr}.verifyVisual{padding:48px 25px}.verifyVisual h1{font-size:44px}.verifyRadar{opacity:.35}.verifySteps{grid-template-columns:1fr}}
@media(max-width:600px){.verifyCard{padding:22px}.otpInput{font-size:25px!important;letter-spacing:7px!important}}
/* ===== WALLET / USDT PREMIUM UPGRADE ===== */
.walletPremiumPage{display:grid;gap:18px}
.walletHeroBar{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.walletHeroLeft,.walletHeroRight{background:linear-gradient(180deg,#ffffff,#f6fbff);border:1px solid #d7e7f0;border-radius:24px;padding:24px;box-shadow:0 18px 50px rgba(12,48,77,.08)}
.walletHeroLeft h1{font-size:50px;line-height:1.02;margin:8px 0 12px;color:#0b2438}
.walletHeroLeft p{font-size:15px;line-height:1.75;color:#537189;max-width:820px}
.walletSecureTags{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.walletSecureTags span{padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#08253c,#0a3858);color:#dff7ff;border:1px solid rgba(65,197,255,.13);font-size:11px;font-weight:800;letter-spacing:.3px}
.walletBalanceCard{height:100%;min-height:190px;border-radius:22px;padding:28px;background:
radial-gradient(circle at 80% 10%,rgba(20,239,185,.16),transparent 24%),
radial-gradient(circle at 20% 100%,rgba(18,222,255,.12),transparent 24%),
linear-gradient(135deg,#051321,#0a3657);
display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(72,211,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.walletBalanceCard small{color:#83b0c3;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.walletBalanceCard strong{font-size:58px;line-height:1;margin:10px 0;color:#18efb9}
.walletBalanceCard span{color:#a7cbda;font-size:13px}
.walletMainGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.walletFlowColumn,.walletHistoryColumn{display:grid;gap:18px}
.walletStepPanel,.walletSidePanel{background:linear-gradient(180deg,#ffffff,#f8fbfd);border:1px solid #d5e6ef;border-radius:22px;padding:22px;box-shadow:0 20px 50px rgba(11,44,70,.08)}
.walletStepHead{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.walletStepNo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#14e7ff,#14efb8);color:#062736;font-weight:900;box-shadow:0 12px 24px rgba(20,227,255,.18)}
.walletStepHead h2{margin:0 0 5px;color:#10293c;font-size:28px}
.walletStepHead p{margin:0;color:#5f7c8e;font-size:14px}
.walletActionForm,.walletProofForm{display:grid;gap:14px}
.walletActionForm label,.walletProofForm label{display:grid;gap:7px;font-weight:700;color:#163147}
.walletActionForm input,.walletProofForm input{border:1px solid #c7dde8;background:#f8fcff;border-radius:12px;padding:14px 15px;color:#17344a}
.walletPrimaryBtn{min-height:50px;font-size:16px}
.walletMethodBadge{padding:16px;border-radius:16px;background:linear-gradient(135deg,#08243a,#0b3959);border:1px solid rgba(70,205,255,.13)}
.walletMethodBadge span{display:block;color:#86b5c9;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.walletMethodBadge b{display:block;color:#fff;font-size:26px;margin:6px 0}
.walletMethodBadge small{color:#a5c8d6}
.walletCheckoutCard{display:grid;gap:14px;padding:18px;border-radius:18px;background:linear-gradient(180deg,#071728,#0a2942);color:#d9f8ff;border:1px solid rgba(60,200,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.walletCheckoutTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.walletCheckoutTop small{color:#7fb2c5;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.walletCheckoutTop h3{margin:6px 0 0;color:#fff;font-size:26px}
.walletCopyField{display:grid;gap:6px}
.walletCopyField label{font-size:12px;color:#8db6c8}
.walletCopyField input{border:1px solid rgba(94,209,255,.12);background:#04121e;color:#ccf7ff;border-radius:12px;padding:13px 14px}
.walletDetailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.walletDetailGrid>div,.walletAddressBox,.walletComplianceNote{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(71,203,255,.10)}
.walletDetailGrid small,.walletAddressBox small{display:block;color:#7ca8bc;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.walletDetailGrid b{display:block;margin-top:6px;color:#fff;font-size:20px}
.walletAddressBox code{display:block;margin:8px 0 6px;font-size:16px;color:#18efb9;word-break:break-all}
.walletAddressBox p{margin:0;color:#92b7c8;font-size:12px;line-height:1.55}
.walletComplianceNote b{display:block;color:#fff;margin-bottom:8px}
.walletComplianceNote ul{margin:0;padding-left:19px;color:#a1c4d3;line-height:1.7}
.walletProofForm{margin-top:14px;padding:18px;border-radius:18px;background:#f3faff;border:1px solid #d8e8f1}
.walletProofHead h3{margin:0 0 5px;font-size:24px;color:#10293d}
.walletProofHead p{margin:0;color:#628094}
.walletEmptyCheckout{display:grid;place-items:center;text-align:center;gap:8px;min-height:270px;border-radius:18px;background:#f4fbff;border:1px dashed #b8d6e6;color:#547387;padding:18px}
.walletEmptyCheckout span{font-size:42px}
.walletEmptyCheckout h3{margin:0;color:#18364b;font-size:24px}
.walletThankYouBar{display:grid;gap:6px;padding:18px 20px;border-radius:18px;background:
linear-gradient(135deg,#0a2a43,#0c3657);border:1px solid rgba(70,206,255,.12);color:#d9f6ff}
.walletThankYouBar strong{font-size:22px;color:#fff}
.walletThankYouBar span{color:#99c0d1;line-height:1.6}
.walletSidePanel h2,.walletSidePanel h3{margin:0 0 8px;color:#133048}
.walletSidePanel p{margin:0 0 14px;color:#5b788d;line-height:1.65}
.walletSidePanel table{width:100%;font-size:13px}
.walletHelpPanel{background:linear-gradient(135deg,#071a2b,#0a2e48);border:1px solid rgba(72,204,255,.14)}
.walletHelpPanel h3{color:#fff}
.walletHelpPanel p{color:#a7cad9}
.walletHelpLinks{display:grid;gap:10px}
.walletHelpLinks a{display:block;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(71,205,255,.10);color:#ddf6ff}
.walletMicroNote{margin-top:12px;color:#77a7ba;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.walletPopupOverlay{position:fixed;inset:0;background:rgba(1,9,16,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:9999;padding:20px}
.walletPopupBox{position:relative;width:min(470px,100%);padding:28px;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f7fbfd);border:1px solid #dbe8ef;box-shadow:0 30px 80px rgba(6,32,54,.22);text-align:center}
.walletPopupClose{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:28px;color:#688497;cursor:pointer}
.walletPopupIcon{width:68px;height:68px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#14e7ff,#14efb8);color:#062836;font-size:30px;font-weight:900}
.walletPopupBox h3{margin:0 0 10px;font-size:30px;color:#10273b}
.walletPopupBox p{margin:0;color:#5a778b;line-height:1.7}
.walletPopupContact{display:grid;gap:10px;margin:16px 0}
.walletPopupContact a{display:block;padding:11px 14px;border-radius:12px;background:#f4fbff;border:1px solid #dcebf2;color:#0c87a7;font-weight:800}
.walletPopupBox small{display:block;color:#7b97a7}
@media (max-width:1050px){.walletHeroBar,.walletMainGrid{grid-template-columns:1fr}}
@media (max-width:700px){.walletHeroLeft h1{font-size:38px}.walletBalanceCard strong{font-size:42px}.walletDetailGrid{grid-template-columns:1fr}}
/* ===== HEAVY TRAFFIC — RED / BLUE CAMPAIGN MODULE ===== */
.trafficPage{padding:18px;background:#eef3f9;color:#14233a;min-height:100%}
.trafficHero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;min-height:300px;padding:30px;border-radius:24px;background:
radial-gradient(circle at 85% 15%,rgba(38,112,255,.28),transparent 28%),
radial-gradient(circle at 15% 100%,rgba(224,38,54,.17),transparent 24%),
linear-gradient(135deg,#071938,#0c2c62);color:#fff;overflow:hidden;box-shadow:0 20px 50px rgba(18,42,83,.18)}
.trafficKicker{font-size:11px;font-weight:900;letter-spacing:2px;color:#8cb9ff}
.trafficHero h1{font-size:58px;letter-spacing:-2px;margin:10px 0 12px}.trafficHero h1 em{font-style:normal;color:#ff475a}
.trafficHero p{color:#c0d2ee;max-width:760px;line-height:1.7}
.trafficHeroTags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.trafficHeroTags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(130,177,255,.18);font-size:11px}
.trafficHeroArt{position:relative;min-height:240px;display:grid;place-items:center}.trafficHeroArt img{width:100%;max-height:250px;object-fit:contain}.trafficLiveBadge{position:absolute;right:8px;bottom:8px;padding:10px 12px;border-radius:12px;background:rgba(5,18,40,.82);border:1px solid rgba(115,164,255,.18)}.trafficLiveBadge b{display:block;font-size:11px}.trafficLiveBadge span{display:block;color:#8faee2;font-size:10px;margin-top:2px}
.trafficWalletStrip{display:grid;grid-template-columns:1fr .8fr 1.2fr;gap:12px;margin:14px 0}
.trafficWalletMain,.trafficWalletSource,.trafficWalletTransfer{padding:18px;border-radius:18px;background:#fff;border:1px solid #d7e1ec;box-shadow:0 12px 28px rgba(18,46,86,.07)}
.trafficWalletMain{background:linear-gradient(135deg,#0a2454,#0d397b);color:#fff}.trafficWalletMain small{color:#9ebcf0;letter-spacing:1px}.trafficWalletMain strong{display:block;font-size:38px;margin:6px 0;color:#fff}.trafficWalletMain span{color:#afc7ef;font-size:12px}
.trafficWalletSource small{display:block;color:#6a7f9a}.trafficWalletSource b{display:block;font-size:28px;color:#152a4d;margin:5px 0}.trafficWalletSource p{margin:0;color:#6f8299;font-size:12px;line-height:1.5}
.trafficWalletTransfer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.trafficWalletTransfer label{display:grid;gap:6px;font-weight:800}.trafficWalletTransfer input{border:1px solid #cbd8e7;border-radius:10px;padding:12px}.trafficRedBtn{border:0;border-radius:10px;background:linear-gradient(90deg,#e5263d,#ff4a58);color:#fff;font-weight:900;padding:13px 16px;cursor:pointer}
.trafficSteps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}.trafficSteps>div{display:flex;align-items:center;gap:9px;padding:12px;border-radius:13px;background:#fff;border:1px solid #dbe4ef;color:#6b7c95}.trafficSteps b{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#e9eef5;color:#5a6f8d}.trafficSteps .on{background:linear-gradient(90deg,#0f3d84,#174fa5);color:#fff;border-color:#194c99}.trafficSteps .on b{background:#e72e42;color:#fff}
.trafficFormGrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px}.trafficMainColumn{min-width:0}.trafficSideColumn{min-width:0}
.trafficCard,.trafficRulesCard,.trafficPreviewCard,.trafficSideInfo,.trafficHistory{background:#fff;border:1px solid #d7e1ec;border-radius:18px;padding:18px;box-shadow:0 14px 34px rgba(22,49,88,.07);margin-bottom:14px}
.trafficCardHead{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;margin-bottom:16px}.trafficCardHead>span{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#0d3c82,#1954ad);color:#fff;font-weight:900}.trafficCardHead h2{margin:0;color:#142846;font-size:22px}.trafficCardHead p{margin:3px 0 0;color:#6c7f98;font-size:12px}.trafficCardHead em{font-style:normal;font-size:10px;color:#e32a3e;font-weight:900;letter-spacing:1px}
.trafficFields{display:grid;gap:12px}.trafficFields.two{grid-template-columns:repeat(2,1fr)}.trafficFields.three{grid-template-columns:repeat(3,1fr)}.trafficFields .span2{grid-column:span 2}.trafficFields .span3{grid-column:span 3}
.trafficFields label,.trafficFullLabel{display:grid;gap:6px;font-weight:800;color:#213754}.trafficFields input,.trafficFields select,.trafficFields textarea,.trafficFullLabel input{border:1px solid #cad7e7;background:#f9fbfe;border-radius:10px;padding:12px;color:#17304f}
.trafficUrlField{display:grid;grid-template-columns:42px 1fr;border:1px solid #cad7e7;border-radius:10px;overflow:hidden;background:#f9fbfe}.trafficUrlField span{display:grid;place-items:center;background:#0e3f86;color:#fff}.trafficUrlField input{border:0;border-radius:0}
.trafficSafeLine{display:flex;gap:10px;align-items:center;margin-top:12px;padding:11px;border-radius:10px;background:#f1f5fb;border:1px solid #dbe4ef}.trafficSafeLine b{color:#17345d}.trafficSafeLine span{color:#6e829d;font-size:12px}
.trafficSelectorRows{display:grid;gap:10px;margin-top:12px}.trafficSelectorRows>div{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:11px;border-radius:10px;background:#f4f7fb;border:1px solid #e0e7f0}.trafficSelectorRows b{min-width:80px;color:#173357}.trafficSelectorRows label{font-weight:600;color:#637892}.trafficFullLabel{margin-top:12px}
.trafficMapMock{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#f5f8fd,#eef3fa);border:1px solid #dbe4ef}.mapRadar{position:relative;width:100px;height:100px;margin:auto;border-radius:50%;background:#e7edf7;display:grid;place-items:center}.mapRadar i{position:absolute;border-radius:50%;border:1px solid #9fb5d4}.mapRadar i:nth-child(1){width:35px;height:35px}.mapRadar i:nth-child(2){width:65px;height:65px}.mapRadar i:nth-child(3){width:95px;height:95px}.mapRadar span{font-size:28px;color:#e42d42}.trafficMapMock b{color:#173458}.trafficMapMock p{color:#6f839c;line-height:1.5}
.trafficScheduleNote{display:flex;gap:10px;margin-top:13px;padding:12px;border-radius:11px;background:#fff3f4;border:1px solid #f2d6da;color:#6f4b53}.trafficScheduleNote span{font-size:20px}.trafficScheduleNote p{margin:0;line-height:1.5}
.trafficModelTabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}.trafficModelTabs label{cursor:pointer}.trafficModelTabs input{position:absolute;opacity:0}.trafficModelTabs span{display:block;padding:14px;border-radius:13px;background:#f4f7fb;border:1px solid #d9e2ee}.trafficModelTabs input:checked+span{background:linear-gradient(135deg,#0e3d82,#174fa7);color:#fff;border-color:#164b9b;box-shadow:0 10px 22px rgba(21,72,152,.16)}.trafficModelTabs b{display:block}.trafficModelTabs small{display:block;margin-top:3px;opacity:.75}
.trafficBudgetMeter{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.trafficBudgetMeter>div{padding:13px;border-radius:12px;background:#f2f5fa;border:1px solid #dce4ee}.trafficBudgetMeter small{display:block;color:#6f8299}.trafficBudgetMeter b{display:block;font-size:23px;color:#17345a;margin-top:5px}.trafficBudgetMeter span{display:block;color:#788aa0;font-size:10px;margin-top:3px}
.trafficRulesCard{background:linear-gradient(135deg,#081c42,#0b3472);color:#fff}.trafficRulesCard h3{margin:0 0 13px;font-size:22px}.trafficRulesGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.trafficRulesGrid>div{padding:13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(150,187,255,.13)}.trafficRulesGrid b{display:block}.trafficRulesGrid p{margin:5px 0 0;color:#b7c9e9;font-size:12px;line-height:1.55}
.trafficPreviewCard{position:sticky;top:90px;background:linear-gradient(180deg,#07162f,#0b2a5c);color:#fff;border-color:#173f7a}.trafficPreviewHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.trafficPreviewHead span{padding:6px 8px;border-radius:999px;background:#e72d42;font-size:9px;font-weight:900}
.trafficBrowserMock{border:1px solid #274c84;border-radius:14px;overflow:hidden;background:#fff}.browserTop{height:36px;background:#10264a;display:flex;gap:5px;align-items:center;padding:0 9px}.browserTop i{width:8px;height:8px;border-radius:50%;background:#e72e43}.browserTop i:nth-child(2){background:#f3b43f}.browserTop i:nth-child(3){background:#45bd72}.browserTop span{margin-left:7px;color:#9fb9df;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browserScreen{min-height:260px;padding:14px;text-align:center;background:#f5f7fb;color:#243650}.browserScreen img{width:100%;height:150px;object-fit:contain}.browserScreen b{display:block;font-size:18px;margin-top:5px}.browserScreen small{display:block;color:#708199;line-height:1.5;margin-top:5px}
.trafficSummaryList{display:grid;gap:8px;margin-top:12px}.trafficSummaryList>div{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:9px;background:rgba(255,255,255,.05)}.trafficSummaryList span{color:#9fb8df}.trafficSummaryList b{color:#fff}
.trafficSubmitBtn{width:100%;border:0;border-radius:11px;padding:14px;margin-top:12px;background:linear-gradient(90deg,#e52b40,#ff5260);color:#fff;font-weight:900;cursor:pointer}.trafficSubmitNote{color:#9eb5d8;font-size:10px;line-height:1.5;text-align:center}
.trafficSideInfo{background:#fff5f6;border-color:#f0d6da}.trafficSideInfo b{color:#b51f32}.trafficSideInfo p{color:#765b61;line-height:1.6}
.trafficHistory{margin-top:4px}.trafficHistoryHead{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:12px}.trafficHistoryHead small{color:#e12b3f;font-weight:900;letter-spacing:1px}.trafficHistoryHead h2{margin:4px 0 0;color:#172e50}.trafficHistoryHead span{color:#72849b}.trafficHistoryTable{overflow:auto}.trafficHistoryTable table{min-width:950px}.trafficHistoryTable th{background:#eef3f8;color:#536b8b}.trafficHistoryTable a{color:#174c9d}.trafficStatus{padding:6px 8px;border-radius:999px;background:#e9eef5;color:#405775;font-size:9px;font-weight:900}.trafficStatus.queued{background:#fff0f2;color:#b41f32}.trafficEmpty{padding:24px;text-align:center;color:#71849a}
@media(max-width:1200px){.trafficFormGrid{grid-template-columns:1fr}.trafficPreviewCard{position:relative;top:auto}.trafficWalletStrip{grid-template-columns:1fr 1fr}.trafficWalletTransfer{grid-column:span 2}}
@media(max-width:850px){.trafficHero,.trafficWalletStrip,.trafficFields.two,.trafficFields.three,.trafficBudgetMeter,.trafficRulesGrid{grid-template-columns:1fr}.trafficWalletTransfer{grid-column:auto;grid-template-columns:1fr}.trafficSteps{grid-template-columns:repeat(2,1fr)}.trafficFields .span2,.trafficFields .span3{grid-column:auto}.trafficHero h1{font-size:44px}.trafficMapMock{grid-template-columns:1fr}.trafficModelTabs{grid-template-columns:1fr}}
/* ===== ADMIN CAMPAIGN APPROVAL CENTER ===== */
.campaignApprovalPanel .panelTop,.trafficAdminApprovalPanel .panelTop{align-items:flex-start}
.campaignApprovalPanel .panelTop p,.trafficAdminApprovalPanel .panelTop p{margin:4px 0 0;color:#6f8496;font-size:12px}
.adminPendingCount{padding:7px 11px;border-radius:999px;background:#fff1c9;color:#886300;font-size:10px;font-weight:900;white-space:nowrap}
.adminPendingCount.red{background:#ffe5e8;color:#b51e33}
.adminCampaignCard,.adminTrafficCard{margin-top:13px;padding:16px;border-radius:15px;background:linear-gradient(180deg,#fbfdff,#f4f9fc);border:1px solid #d8e6ef;box-shadow:0 10px 24px rgba(19,52,78,.05)}
.adminTrafficCard{border-left:4px solid #e52b42}
.adminCampaignTop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.adminCampaignTop small{color:#54829b;font-size:9px;font-weight:900;letter-spacing:1px}
.adminCampaignTop h3{margin:4px 0;font-size:21px;color:#102a40}
.adminCampaignTop p{margin:0;color:#6b8192;font-size:12px}
.status.pending_approval,.status.queued{background:#fff1c9;color:#876100;border:1px solid #f0d99c}
.status.approved{background:#dff7ec;color:#087652;border:1px solid #c5eadc}
.status.rejected{background:#ffe4e8;color:#b11f35;border:1px solid #f0cbd1}
.adminCampaignMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:13px 0}
.adminCampaignMetrics>div{padding:11px;border-radius:11px;background:#edf5f9;border:1px solid #dce9f0}
.adminCampaignMetrics small{display:block;color:#6b8597;font-size:9px;text-transform:uppercase;letter-spacing:.8px}
.adminCampaignMetrics b{display:block;color:#153349;margin-top:5px;font-size:15px;word-break:break-word}
.adminCampaignDetails{border-top:1px solid #dfeaf0;padding-top:11px}
.adminCampaignDetails summary{cursor:pointer;color:#0c7fa1;font-weight:900;font-size:12px;user-select:none}
.adminCampaignDetailGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;margin-top:12px}
.adminDetailBlock{padding:13px;border-radius:11px;background:#fff;border:1px solid #dce9f0}
.adminDetailBlock>small{display:block;color:#567f94;font-size:9px;font-weight:900;letter-spacing:1px}
.adminMessagePreview{margin-top:8px;padding:13px;border-radius:10px;background:#071b2d;color:#e7f7ff;line-height:1.6;min-height:66px;word-break:break-word}
.adminDetailBlock p{color:#587487}
.adminDownloadFile{display:inline-block;margin-top:8px;padding:9px 11px;border-radius:9px;background:#0c3552;color:#fff;font-weight:800;font-size:11px}
.mutedAdmin{color:#718899!important;font-size:11px}
.adminExistingNote{margin-top:10px;padding:10px;border-radius:9px;background:#fff8e8;border:1px solid #f1dfb9;color:#765f30}
.adminCampaignReviewForm{margin-top:12px;padding:13px;border-radius:11px;background:#eef6fa;border:1px solid #d8e8f0}
.adminCampaignReviewForm label{display:grid;gap:6px;color:#16344a;font-weight:800}
.adminCampaignReviewForm textarea{border:1px solid #c9dce6;border-radius:9px;padding:10px;background:#fff}
.adminCampaignReviewForm>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adminApproveCampaign,.adminRejectCampaign{border:0;border-radius:9px;padding:10px 14px;color:#fff;font-weight:900;cursor:pointer}
.adminApproveCampaign{background:linear-gradient(90deg,#08795b,#0da879)}
.adminRejectCampaign{background:linear-gradient(90deg,#b52438,#e3394e)}
.adminTrafficUrl{padding:10px 11px;border-radius:10px;background:#fff5f6;border:1px solid #f0dadd;color:#6e4b53;margin-top:10px}
.adminTrafficUrl a{color:#174f9e;font-weight:800;word-break:break-all}
.adminTrafficDetailGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}
.adminTrafficDetailGrid>div{padding:10px;border-radius:10px;background:#fff;border:1px solid #dce8ef}
.adminTrafficDetailGrid small{display:block;color:#71889a;font-size:8px;font-weight:900;letter-spacing:.8px}
.adminTrafficDetailGrid b{display:block;color:#153249;margin-top:5px;font-size:12px;word-break:break-word}
@media(max-width:1050px){.adminCampaignMetrics,.adminTrafficDetailGrid{grid-template-columns:repeat(2,1fr)}.adminCampaignDetailGrid{grid-template-columns:1fr}}
@media(max-width:680px){.adminCampaignTop{flex-direction:column}.adminCampaignMetrics,.adminTrafficDetailGrid{grid-template-columns:1fr}}
/* =====================================================================
PRO RESPONSIVE NAVIGATION — DESKTOP + MOBILE
===================================================================== */
html{overflow-x:hidden}
body{overflow-x:hidden}
.proTop{
height:78px;
padding:0 3.2vw;
background:linear-gradient(90deg,rgba(3,16,31,.98),rgba(5,25,48,.98));
border-bottom:1px solid rgba(68,194,255,.18);
box-shadow:0 10px 34px rgba(0,0,0,.14);
}
.proBrand{display:flex;align-items:center;gap:10px;min-width:max-content}
.proLogoMark{
display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
background:linear-gradient(135deg,#12e8ff,#13efb8);
color:#062536;box-shadow:0 0 22px rgba(17,225,230,.22);
font-size:18px
}
.brandText{font-weight:950;letter-spacing:-.7px}
.topCenterSearch{
width:min(480px,34vw);margin:0 auto;
height:42px;border-radius:13px;display:flex;align-items:center;gap:8px;
background:rgba(9,39,67,.72);border:1px solid rgba(71,186,255,.18);
padding:0 13px
}
.topCenterSearch input{border:0;background:transparent;color:#eaf8ff;padding:0;outline:none}
.topCenterSearch input::placeholder{color:#7499b2}
.topSearchIcon{font-size:18px;color:#18dcff}
.topTagline{width:100%;text-align:center;color:#729cb6;font-size:10px;font-weight:900;letter-spacing:1.8px}
.desktopTopNav{display:flex!important;align-items:center;gap:17px!important}
.topAccountChip{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:12px;background:rgba(12,45,73,.6);border:1px solid rgba(73,195,255,.12)}
.topAvatar,.sideAvatar{
width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,#4a7fff,#eb4562);color:#fff;font-weight:900
}
.topAccountChip b{display:block;color:#fff;font-size:11px}
.topAccountChip small{display:block;color:#7fa6ba;font-size:8px;margin-top:1px}
.mobileMenuButton{display:none;width:44px;height:42px;border:1px solid rgba(78,197,255,.22);border-radius:11px;background:#08243b;padding:9px;cursor:pointer}
.mobileMenuButton span,.workspaceMenuFab span{display:block;height:2px;border-radius:9px;background:#dff7ff;margin:5px 0;transition:.25s}
.mobileGlobalMenu,.menuBackdrop{display:none}
/* Desktop side */
.appShell{
grid-template-columns:274px minmax(0,1fr)!important;
align-items:stretch
}
.proSide{
position:sticky!important;top:78px;height:calc(100vh - 78px);
display:flex!important;flex-direction:column!important;overflow:hidden!important;
padding:14px 12px 12px!important;
background:
radial-gradient(circle at 20% 0,rgba(15,109,200,.11),transparent 25%),
linear-gradient(180deg,#041629,#061d34 60%,#041526)!important;
border-right:1px solid rgba(70,190,255,.13)
}
.sideMobileHead{display:flex;align-items:center;justify-content:space-between}
.proSideBrand{display:flex!important;align-items:center;gap:9px;padding:7px 8px 12px!important;font-size:18px!important}
.sideBrandMark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#12e7ff,#12efb8);color:#052536;font-size:14px}
.sideMenuClose{display:none;border:0;background:transparent;color:#d8f4ff;font-size:28px;cursor:pointer}
.sideUserCard{
display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;
padding:11px;border-radius:14px;margin:0 1px 12px;
background:linear-gradient(135deg,rgba(12,58,92,.82),rgba(7,35,60,.82));
border:1px solid rgba(68,192,255,.12)
}
.sideUserCard .sideAvatar{width:38px;height:38px}
.sideUserCard b{display:block;color:#f3fbff;font-size:12px}
.sideUserCard small{display:block;color:#6f9bb4;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;margin-top:2px}
.onlineDot{width:8px;height:8px;border-radius:50%;background:#16efaa;box-shadow:0 0 10px rgba(22,239,170,.5)}
.sideSectionLabel{padding:3px 11px 7px;color:#527e98;font-size:8px;font-weight:950;letter-spacing:1.7px}
.sideLinks{overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin;scrollbar-color:#174765 transparent}
.sideMenuItem{
display:grid!important;grid-template-columns:36px 1fr auto auto;gap:7px!important;
align-items:center;padding:9px 10px!important;margin:3px 0!important;
min-height:44px;border:1px solid transparent;border-radius:12px!important;
color:#a9c7d9!important;transition:.18s ease
}
.sideMenuItem:hover{transform:translateX(2px);background:#092943!important;border-color:rgba(51,184,255,.10);color:#e8f9ff!important}
.sideMenuItem.active{
background:linear-gradient(90deg,#0a5974,#0d3b62)!important;
color:#eaffff!important;border-color:rgba(40,229,218,.20)!important;
box-shadow:inset 3px 0 0 #19efcf,0 8px 20px rgba(0,0,0,.09)
}
.sideMenuIcon{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:rgba(12,58,92,.72);border:1px solid rgba(71,190,255,.10);
color:#62ddff;font-size:11px;font-weight:900
}
.sideMenuItem.active .sideMenuIcon{background:linear-gradient(135deg,#17e8ff,#15e9bd);color:#07304a}
.sideMenuText{font-size:12px;font-weight:750;white-space:nowrap}
.sideArrow{font-style:normal;color:#497b98;font-size:18px}
.newMenuBadge{font-style:normal;padding:3px 6px;border-radius:999px;background:linear-gradient(90deg,#ff324b,#ff5967);color:white;font-size:7px;font-weight:950;letter-spacing:.5px}
.adminMenuLink{margin-top:6px!important;border-top:1px solid rgba(255,255,255,.04)}
.sideBottomZone{margin-top:auto;padding-top:10px;border-top:1px solid rgba(78,184,246,.08)}
.sideWalletMini{padding:10px;border-radius:13px;background:linear-gradient(135deg,#092b48,#0a3558);border:1px solid rgba(69,194,255,.12)}
.sideWalletMini>div{display:flex;gap:9px;align-items:center}
.sideWalletIcon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#7644ff,#e63c63);color:#fff;font-weight:900}
.sideWalletMini small{display:block;color:#75a0b8;font-size:8px}
.sideWalletMini b{display:block;color:#fff;font-size:17px;margin-top:2px}
.sideWalletMini>a{display:block!important;text-align:center!important;padding:8px!important;margin:8px 0 0!important;border-radius:9px!important;background:linear-gradient(90deg,#13e4ff,#12eab9)!important;color:#06283a!important;font-size:10px!important;font-weight:950!important}
.sideHelpCard{
display:grid!important;grid-template-columns:35px 1fr auto!important;gap:9px!important;
align-items:center;margin-top:8px!important;padding:9px!important;
background:#071f35!important;border:1px solid rgba(69,191,255,.11)!important
}
.sideHelpCard>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#19e5ff;background:#092e4b}
.sideHelpCard b{display:block;color:#fff;font-size:10px}.sideHelpCard small{display:block;color:#7199af;font-size:8px}.sideHelpCard i{font-style:normal;color:#5c91ad}
.sideLogoutMobile{display:none!important}
.workspaceMenuFab,.sideBackdrop{display:none}
/* workspace overflow protection */
.workspace{min-width:0!important;max-width:100%;overflow-x:hidden}
.workspace img{max-width:100%}
.workspace table{max-width:100%}
.panel,.neonPanel,.trafficCard,.walletStepPanel{max-width:100%}
/* tablet */
@media(max-width:1100px){
.topCenterSearch{width:min(350px,30vw)}
.desktopTopNav{gap:10px!important}
.desktopTopNav>a:not(.btn){font-size:12px}
.appShell{grid-template-columns:238px minmax(0,1fr)!important}
.sideMenuText{font-size:11px}
.proSide{padding-left:9px!important;padding-right:9px!important}
}
/* Mobile Navigation */
@media(max-width:820px){
body.menuOpen,body.sideOpen{overflow:hidden}
.proTop{height:66px!important;padding:0 14px!important}
.proBrand{font-size:19px!important}
.proLogoMark{width:31px;height:31px}
.topCenterSearch,.desktopTopNav{display:none!important}
.mobileMenuButton{display:block}
.mobileGlobalMenu{
display:flex;position:fixed;z-index:1200;top:0;right:0;bottom:0;
width:min(88vw,370px);transform:translateX(105%);transition:.28s ease;
flex-direction:column;padding:16px;
background:
radial-gradient(circle at 75% 4%,rgba(21,92,226,.22),transparent 25%),
linear-gradient(180deg,#031226,#071d3b);
border-left:1px solid rgba(71,190,255,.16);
box-shadow:-25px 0 70px rgba(0,0,0,.32)
}
.mobileGlobalMenu.open{transform:translateX(0)}
.mobileGlobalMenuHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(86,180,246,.10)}
.mobileGlobalClose{width:40px;height:40px;border-radius:11px;border:1px solid rgba(75,190,255,.18);background:#092744;color:#fff;font-size:25px}
.mobileGlobalLinks{display:grid;gap:7px;margin-top:16px}
.mobileGlobalLinks a{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:12px;border-radius:12px;color:#c7dcee;background:rgba(10,40,72,.50);border:1px solid rgba(70,180,245,.08)}
.mobileGlobalLinks a>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#0c3760;color:#47dcff;font-weight:900}
.mobileGlobalLinks .mobileSignupLink{background:linear-gradient(90deg,#0e57bc,#e52f49);color:#fff}
.mobileGlobalLinks .mobileLogoutLink{margin-top:10px;background:#401827;border-color:#6d2639;color:#ffd5da}
.menuBackdrop,.sideBackdrop{display:block;position:fixed;inset:0;z-index:1150;background:rgba(1,8,17,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s}
.menuBackdrop.open,.sideBackdrop.open{opacity:1;visibility:visible}
.appShell{display:block!important;min-height:auto!important}
.proSide{
position:fixed!important;z-index:1300!important;top:0!important;left:0!important;bottom:0!important;
width:min(88vw,335px)!important;height:100dvh!important;
transform:translateX(-105%);transition:.28s ease;padding:13px 11px!important;
box-shadow:30px 0 75px rgba(0,0,0,.38)
}
.proSide.open{transform:translateX(0)}
.sideMenuClose{display:block}
.sideUserCard{margin-top:2px}
.sideLinks{max-height:none}
.sideMenuItem{min-height:46px}
.sideMenuText{font-size:12px}
.sideLogoutMobile{display:flex!important;justify-content:center!important;margin-top:8px!important;padding:9px!important;background:#351627!important;color:#ffdbe0!important;border:1px solid #68283c!important}
.workspaceMenuFab{
display:block;position:fixed;z-index:1100;left:14px;bottom:18px;
width:48px;height:48px;border-radius:15px;border:1px solid rgba(77,190,255,.23);
background:linear-gradient(135deg,#0b3760,#0d57a3);box-shadow:0 13px 28px rgba(0,28,68,.28);padding:10px
}
.workspaceMenuFab span{background:#fff;margin:4px 0}
.workspace{padding:14px!important;width:100%!important}
/* dashboard/page responsiveness */
.dashHead,.neonHead,.campaignTitleRow,.audienceHead,.trafficHistoryHead{flex-direction:column!important;align-items:flex-start!important;gap:10px}
.metricGrid,.quickGrid,.dashMetricsUltra,.dashSecurityGrid,.neonSummaryGrid,.analyticsStats,.senderHeroGrid,
.senderExplainerGrid,.contactGrid,.supportGrid,.discountStrip{grid-template-columns:1fr!important}
.dashMainGrid,.analyticsMainGrid,.neonTwoCol,.trafficFormGrid,.walletMainGrid,.walletHeroBar,.dashHeroUltra{grid-template-columns:1fr!important}
.paymentFlowSteps,.walletStatusRow,.deliveryContent,.deliveryFactors,.neonThreeCol,.chartFootNotes,.notesGrid{grid-template-columns:1fr!important}
.campaignUltraGrid,.composerUltra,.uploadAndScan,.cuFieldGrid{grid-template-columns:1fr!important}
.campaignSteps{grid-template-columns:repeat(2,1fr)!important}
.campaignSteps>div:after{display:none!important}
.campaignMiniStats{width:100%;overflow-x:auto}
.phoneUltra{width:min(300px,100%)!important}
.scanPanel{padding-right:14px!important}.scanVisual{position:relative!important;right:auto!important;top:auto!important;width:auto!important;margin-top:12px}
.trafficWalletStrip,.trafficFields.two,.trafficFields.three,.trafficBudgetMeter,.trafficRulesGrid,.trafficModelTabs{grid-template-columns:1fr!important}
.trafficWalletTransfer{grid-column:auto!important;grid-template-columns:1fr!important}
.trafficFields .span2,.trafficFields .span3{grid-column:auto!important}
.walletDetailGrid,.adminCampaignMetrics,.adminTrafficDetailGrid{grid-template-columns:1fr!important}
.adminCampaignDetailGrid{grid-template-columns:1fr!important}
.adminCampaignTop{flex-direction:column!important}
.tableGlowWrap,.trafficHistoryTable,.panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
table{min-width:650px}
.recentCampaignsUltra table,.walletSidePanel table{min-width:600px}
.audienceBox,.costBar,.contactsUseRow{flex-direction:column!important;align-items:stretch!important}
.contactsUseRow label{width:100%!important}
.campaignTopCards{grid-template-columns:1fr!important}
.dashHeroCopy h1,.neonHead h1{font-size:32px!important}
.trafficHero h1{font-size:40px!important}
.walletHeroLeft h1{font-size:36px!important}
.chartHeroPanel .neonGraphWrap{height:300px}
.graphLabels{gap:4px!important}.graphLabels span{font-size:8px!important;transform:rotate(-25deg)}
.bars{gap:8px!important}
footer{padding:24px 18px!important;flex-direction:column!important;align-items:flex-start!important;gap:12px;min-height:auto!important}
}
/* very small mobile */
@media(max-width:480px){
.workspace{padding:10px!important}
.campaignUltra,.dashUltra,.neonPage,.trafficPage{padding:8px!important}
.campaignSteps{grid-template-columns:1fr!important}
.top .brandText{font-size:18px}
.trafficHero,.dashHeroUltra,.walletHeroLeft,.walletHeroRight{padding:18px!important}
.trafficHero h1{font-size:34px!important}
.dashHeroCopy h1{font-size:29px!important}
.neonHead h1{font-size:30px!important}
.walletBalanceCard strong{font-size:36px!important}
.otpInput{font-size:22px!important;letter-spacing:5px!important}
}