:root{
  --ink:#0b1437;
  --mu:#5b6789;
  --ln:#e3e8f3;
  --bg:#f4f7ff;
  --a:#2563eb;
  --a2:#1d4ed8;
  --soft:#eff6ff;
  --ok:#10b981;
  --bad:#ef4444;
  --gold:#2563eb;
  --gold2:#3b82f6;
  --gsoft:#eff6ff;
  --gdeep:#1e40af;
  --fd:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;overflow-x:clip}
body{margin:0;font-family:'Instrument Sans',system-ui,sans-serif;font-feature-settings:"tnum" 1;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;touch-action:manipulation;max-width:100%;overflow-x:clip}
h1,h2,h3,.sh,.am,.pl .p,.plan .p,.stat .v,.brand,.band h2,.top h2{font-family:var(--fd);font-weight:700}
button,input,select,textarea{font:inherit}
a{color:inherit}
.hide{display:none!important}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.btn{border:0;cursor:pointer;font-weight:600;font-size:14.5px;padding:12px 22px;border-radius:10px;color:#fff;background:linear-gradient(180deg,#2563eb,#1d4ed8);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(37,99,235,.3);transition:filter .2s,transform .15s;text-decoration:none;display:inline-block;text-align:center;position:relative;overflow:hidden}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.btn:hover::after{left:150%}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--ln),0 1px 2px rgba(10,18,38,.05);filter:none}
.btn.ghost:hover{background:#f7f8fb;box-shadow:0 0 0 1px var(--a)}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:9px}
.btn.wh{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.35)}
.btn.wh:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:default;pointer-events:none}
.btn.dg{color:var(--bad)}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}
label{display:block;font-size:12.5px;font-weight:700;color:#2a3558;margin:15px 0 6px}
input,select,textarea.fbt{font-size:15px;width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d5dae6;background:#fff;color:var(--ink);transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea.fbt:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
input::placeholder,textarea::placeholder{color:#9aa5c4}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6789' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.3px;color:var(--ink);text-decoration:none}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--mu);letter-spacing:0;margin-top:1px}
.lg{width:40px;height:40px;border-radius:11px;object-fit:cover;background:#2563eb;box-shadow:0 0 0 1px rgba(10,18,38,.12),0 4px 12px rgba(10,18,38,.14);flex:none}

/* ===== LANDING PAGE ===== */
.hd{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--ln)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.links{display:flex;gap:28px;font-size:14px;font-weight:600;color:var(--mu)}
.links a{text-decoration:none;transition:color .2s}
.links a:hover{color:var(--a)}
.hd .act{display:flex;gap:10px}
.hero{position:relative;background:radial-gradient(900px 520px at 90% -10%,rgba(47,91,255,.17),transparent 60%),radial-gradient(700px 460px at -8% 105%,rgba(124,92,255,.12),transparent 60%),radial-gradient(rgba(47,91,255,.12) 1px,transparent 1.3px) 0 0/22px 22px,linear-gradient(#fff,#f4f7ff);padding:70px 0 84px;overflow:hidden;color:var(--ink)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-1.8px;margin:0 0 20px;font-weight:800;background:linear-gradient(90deg,#0b1437 0,#2f5bff 50%,#0b1437 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.hero p.lead{font-size:17.5px;line-height:1.7;color:var(--mu);max-width:500px;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero small{display:block;margin-top:16px;color:var(--mu);font-size:13px;font-weight:500}
.mock{position:relative;max-width:360px;margin:0 auto;animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.pc{background:#fff;border-radius:24px;padding:22px;box-shadow:0 0 0 1px var(--ln),0 44px 90px -26px rgba(31,67,214,.38);color:var(--ink)}
.pc .top{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.pc .top .lg{width:32px;height:32px;border-radius:9px}
.pc .am{font-size:38px;font-weight:800;letter-spacing:-1.2px;margin:16px 0 2px}
.pc .st{color:var(--mu);font-size:12.5px}
.pc .q{margin:16px auto;width:190px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--ln)}
.pc .q svg{display:block;width:100%}
.tm{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mu);font-weight:600}
.tm b{color:var(--ink)}
.bar{height:6px;border-radius:9px;background:#edf0f8;margin:8px 0 14px;overflow:hidden}
.bar i{display:block;height:100%;width:68%;background:linear-gradient(90deg,#2563eb,#3b82f6);border-radius:9px}
.pc .fake{padding:12px;border-radius:12px;background:var(--soft);color:var(--a2);font-weight:700;font-size:13.5px;text-align:center}
.chip{position:absolute;left:-30px;bottom:56px;background:#fff;border-radius:16px;padding:12px 16px;display:flex;gap:11px;align-items:center;box-shadow:0 20px 44px -14px rgba(31,67,214,.32);animation:fl 5s ease-in-out infinite;color:var(--ink)}
.chip .ck{width:32px;height:32px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-weight:800}
.chip b{display:block;font-size:13px}
.chip span{font-size:11.5px;color:var(--mu)}
@keyframes fl{50%{transform:translateY(-8px)}}
.trust{background:#fff;color:var(--ink);border-bottom:1px solid var(--ln)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:30px;padding-bottom:30px}
.trust div{display:flex;gap:13px;align-items:center;font-size:13.5px;font-weight:600;line-height:1.4}
.trust .i{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--soft);color:var(--a2)}
.trust small{display:block;font-weight:500;color:var(--mu);font-size:12px}
.sec{padding:88px 0}
.sec.alt{background:#fff;border-block:1px solid var(--ln)}
.sh{font-size:clamp(27px,3.4vw,40px);letter-spacing:-1.4px;margin:0 0 12px;line-height:1.15}
.sd{color:var(--mu);max-width:560px;line-height:1.7;margin:0 0 44px;font-size:16px}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.f{padding:26px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 1px 2px rgba(10,18,38,.04);transition:box-shadow .25s,transform .2s}
.f:hover{box-shadow:0 0 0 1px var(--a),0 22px 44px -16px rgba(31,67,214,.25);transform:translateY(-2px)}
.f .ic2{width:46px;height:46px;border-radius:13px;background:var(--soft);color:var(--a2);display:grid;place-items:center;margin-bottom:18px}
.f h3{margin:0 0 8px;font-size:17px}
.f p{margin:0;color:var(--mu);font-size:14px;line-height:1.7}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.how div{position:relative;padding:28px;border-radius:18px;background:var(--bg);box-shadow:0 0 0 1px var(--ln)}
.how div::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--a);color:#fff;font-weight:800;margin-bottom:16px;font-family:var(--fd)}
.how h3{margin:0 0 8px;font-size:17px}
.how p{margin:0;color:var(--mu);font-size:14px;line-height:1.7}
.faq{max-width:760px}
.faq details{background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--ln);padding:0;margin-bottom:10px;border:0}
.faq summary{padding:18px 22px;font-size:15px;cursor:pointer;font-weight:700;display:flex;align-items:center}
.faq details div{margin:0;padding:0 22px 20px;color:var(--mu);font-size:14px;line-height:1.75}
.band{background:radial-gradient(500px 260px at 90% 0,rgba(255,255,255,.2),transparent 70%),linear-gradient(135deg,#3b63ff,#2447d6);color:#fff;border-radius:24px;padding:54px 40px;text-align:center;box-shadow:0 34px 70px -28px rgba(47,91,255,.6)}
.band h2{margin:0 0 12px;font-size:clamp(26px,3.4vw,38px);letter-spacing:-1px}
.band p{margin:0 auto 28px;color:#dbe5ff;max-width:480px;line-height:1.7}
.band .btn.wh{background:#fff;color:var(--a2);box-shadow:0 10px 24px -8px rgba(0,0,0,.3)}
.ft{background:#fff;color:var(--mu);padding:48px 0 30px;margin-top:88px;border-top:1px solid var(--ln)}
.ft .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ft .brand{color:var(--ink)}
.ft .brand small{color:var(--mu)}
.ft p{margin:12px 0 0;font-size:13px;max-width:320px;line-height:1.7}
.ft .col{display:grid;gap:10px;font-size:14px;align-content:start}
.ft .col b{color:var(--ink)}
.ft a{text-decoration:none}
.ft a:hover{color:var(--a)}
.cp{border-top:1px solid var(--ln);margin-top:32px;padding-top:20px;font-size:12.5px;width:100%}

/* ===== AUTH PAGES (Login & Signup) ===== */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1.05fr}
.ap{background:radial-gradient(520px 360px at 100% 0,rgba(255,255,255,.18),transparent 65%),linear-gradient(160deg,#4a73ff,#2447d6);color:#fff;padding:50px 60px;display:flex;flex-direction:column;justify-content:space-between}
.ap .brand{color:#fff}
.ap .brand small{color:#d6e0ff}
.ap h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-1.2px;line-height:1.12;margin:0 0 16px;color:#fff}
.ap p{color:#e1e9ff;line-height:1.7;max-width:420px;margin:0 0 26px}
.ap ul{list-style:none;padding:0;margin:0;display:grid;gap:14px;font-size:14.5px;font-weight:500;color:#fff}
.ap li{display:flex;gap:12px;align-items:center}
.ap li::before{content:"✓";width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;color:#fff}
.ap footer{font-size:12.5px;color:#cfdbff}
.pane{display:grid;place-items:center;padding:32px 24px;background:#fff}
.card{width:100%;max-width:420px;animation:up .6s cubic-bezier(.2,.8,.2,1) backwards}
.back{border:0;background:none;color:var(--mu);font-weight:600;font-size:13.5px;cursor:pointer;padding:0 0 18px;text-decoration:none;display:inline-block}
.back:hover{color:var(--a)}
.card h2{font-size:28px;margin:0 0 6px;letter-spacing:-.8px}
.card>p{color:var(--mu);margin:0 0 22px;font-size:14px}
.card .btn{width:100%;margin-top:22px;padding:14px}
.lkb{border:0;background:none;padding:12px 0 0;color:var(--a);font-weight:700;font-size:13px;cursor:pointer;display:inline-block;text-align:left}
.msg{margin-top:14px;padding:11px 13px;border-radius:10px;font-size:13px;display:none;line-height:1.5}
.msg.err{display:block;color:#a3232b;background:#fdeced;box-shadow:0 0 0 1px #f6c6c9 inset}
.msg.ok{display:block;color:#0b6b4f;background:#e6f8f1;box-shadow:0 0 0 1px #b7ead8 inset}
.note{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.6;color:#1e40af;background:#eff6ff;box-shadow:0 0 0 1px #bfdbfe inset}
a.lk{color:var(--a);text-decoration:none;font-weight:700}
a.lk:hover{text-decoration:underline}

/* ===== DASHBOARD & MERCHANT APPLICATION ===== */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;min-height:100dvh;background:var(--bg)}
.side{position:sticky;top:0;height:100vh;height:100dvh;padding:22px 16px 36px;background:#fff;border-right:1px solid var(--ln);color:var(--ink);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#c9d5f5 transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:#c9d5f5;border-radius:9px}
.side .brand{padding:4px 8px 24px;color:var(--ink)}
.side .brand small{color:var(--mu)}
.nav{display:grid;gap:4px;flex:none}
.nav a,.nav button{display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--mu);padding:11px 14px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;text-align:left;text-decoration:none;transition:background .2s,color .2s,transform .2s,box-shadow .3s}
.nav a:hover,.nav button:hover{background:var(--soft);color:var(--ink);transform:translateX(3px)}
.nav a.on,.nav button.on{background:var(--soft);color:var(--a);box-shadow:inset 3px 0 0 var(--a),0 0 20px rgba(37,99,235,.15);font-weight:700}
.me{margin-top:24px;margin-bottom:24px;padding:12px;border-radius:12px;background:var(--soft);border:1px solid var(--ln);display:flex;gap:11px;align-items:center;flex:none}
.av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#4a73ff,#2f5bff);flex:none}
.me b{display:block;font-size:13.5px;color:var(--ink)}
.me small{color:var(--mu);font-size:11.5px;word-break:break-all}
.me button{margin-left:auto;border:0;background:none;color:var(--mu);cursor:pointer;padding:6px;transition:color .2s}
.me button:hover{color:var(--bad)}
main{padding:36px clamp(18px,4vw,48px) 60px;max-width:1080px;width:100%;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.top h2{font-size:27px;margin:0 0 4px;letter-spacing:-.9px}
.top p{margin:0;color:var(--mu);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:700}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.on-p{color:var(--ok);background:#e6f8f1}
.off-p{color:var(--bad);background:#fdeced}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.box{padding:24px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 12px 30px -18px rgba(31,67,214,.22);margin-bottom:16px}
.box h3{margin:0 0 4px;font-size:16px}
.box .sub{color:var(--mu);font-size:13.5px;margin:0 0 6px;line-height:1.6}
.stat small{color:var(--mu);font-size:12.5px;font-weight:600}
.stat .v{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.8px}
.stat .sm{color:var(--mu);font-size:12px;margin-top:3px}
.step{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--ln)}
.step:first-of-type{border:0}
.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:800;background:var(--bg);color:var(--mu)}
.dot.done{background:var(--ok);color:#fff}
.step b{display:block;font-size:14px}
.step span{color:var(--mu);font-size:12.5px}
.plan{position:relative;padding:24px 22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 12px 30px -18px rgba(31,67,214,.22)}
.plan.best{background:linear-gradient(160deg,#4a73ff,#2447d6);color:#fff;box-shadow:0 30px 60px -22px rgba(47,91,255,.6)}
.tag{position:absolute;top:-11px;right:16px;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(180deg,#4a73ff,#2f5bff)}
.plan b{color:var(--mu);font-size:13.5px}
.plan.best b,.plan.best em{color:#cfe0ff}
.plan .p{font-size:34px;font-weight:800;margin:8px 0 4px;letter-spacing:-1.2px}
.plan em{display:block;font-style:normal;color:var(--mu);font-size:12.5px;margin-bottom:18px}
.plan .btn{width:100%}
.plan.best .btn{background:#fff;color:var(--a2);box-shadow:0 8px 18px -8px rgba(0,0,0,.3)}
.kv{display:flex;gap:8px;align-items:stretch}
.kv code{flex:1;min-width:0;overflow:auto;white-space:nowrap;padding:13px 14px;border-radius:10px;background:var(--bg);box-shadow:0 0 0 1px var(--ln) inset;color:var(--ink);font-size:12.5px}
pre{margin:0;overflow:auto;padding:18px;border-radius:14px;background:var(--ink);color:#c8d5ff;font-size:12.5px;line-height:1.75}
.lock{text-align:center;padding:38px 20px}
.lock .i{width:44px;height:44px;color:var(--a);margin-bottom:10px}
.lock p{color:var(--mu);margin:0 0 18px;font-size:14px}
.sup{display:flex;gap:16px;align-items:center}
.sup .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none;background:#229ed9}
.sup .ic.dev{background:var(--a)}
.sup .ic svg{width:26px;height:26px;fill:#fff;stroke:none}
.sup .t{flex:1;min-width:0}
.sup b{display:block}
.sup small{color:var(--mu)}
.sup a{text-decoration:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.two .box{margin:0}
.hint{display:block;color:#8592b5;font-size:11.5px;margin-top:6px;line-height:1.5}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.acts .btn{flex:1;min-width:140px;width:auto}
details{border-top:1px solid var(--ln);padding:13px 0}
details:first-of-type{border:0;padding-top:4px}
summary{cursor:pointer;font-weight:700;font-size:14px;display:flex;gap:12px;align-items:center;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--mu);font-size:18px}
details[open] summary::after{content:"–"}
.n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:12.5px;font-weight:800;color:var(--a);background:var(--soft)}
details div{color:var(--mu);font-size:13.5px;line-height:1.75;margin:10px 0 2px 40px}
details div b{color:var(--ink)}
.mtop{display:none;align-items:center;justify-content:space-between;margin-bottom:20px}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:10px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;transition:.3s;z-index:100;box-shadow:0 0 0 1px rgba(37,99,235,.5),0 14px 30px rgba(10,18,38,.35);max-width:calc(100vw - 32px);width:max-content;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}

/* Analytics & Tables */
.g5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g5 .v{font-size:21px}
.seg{display:inline-grid;grid-auto-flow:column;padding:3px;border-radius:11px;background:#e9ecf3}
.seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font-weight:700;font-size:12.5px;color:var(--mu);cursor:pointer;transition:all .2s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,20,55,.12)}
.bars{display:flex;align-items:flex-end;gap:var(--g,6px);height:160px;padding-top:8px}
.bc{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.bc i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#4a73ff,#2f5bff);min-height:2px}
.bc i.z{background:var(--ln);height:2px!important}
.bl{display:flex;gap:var(--g,6px);margin-top:8px;font-size:11px;color:var(--mu)}
.bl span{flex:1;text-align:center;min-width:0;white-space:nowrap}
.tool{display:grid;grid-template-columns:1fr 170px auto;gap:10px;margin-bottom:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all}
.txh,.txr{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:12px;align-items:center;padding:13px 4px}
.txh{font-size:12px;font-weight:700;color:var(--mu)}
.txr{border-top:1px solid var(--ln);font-size:13.5px}
.txr small,.usr small,.wh small{display:block;color:var(--mu);font-size:12px;margin-top:2px;word-break:break-word}
.st{display:inline-block;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.2px}
.st.PAID,.st.DELIVERED,.st.ACTIVE{color:#0b6b4f;background:#e6f8f1}
.st.PENDING,.st.RETRYING{color:#7a5200;background:#fff6e0}
.st.EXPIRED,.st.FAILED,.st.BLOCKED{color:#a3232b;background:#fdeced}
.st.NONE{color:var(--mu);background:var(--bg)}
.tb{font-style:normal;font-size:10.5px;font-weight:800;color:var(--a);background:var(--soft);padding:2px 7px;border-radius:6px;margin-left:6px}
.pg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--ln);font-size:13px;color:var(--mu)}
.empty{text-align:center;padding:34px 10px;color:var(--mu);font-size:14px;line-height:1.7;margin:0}
.empty .btn{margin-top:14px}
.wh{padding:16px 0;border-top:1px solid var(--ln)}
.wh:first-child{border:0;padding-top:4px}
.whh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.whh .t{flex:1;min-width:190px}
.att{list-style:none;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:12.5px;display:grid;gap:8px;color:#38446a}
.usr{padding:16px 0;border-top:1px solid var(--ln)}
.usr:first-child{border:0;padding-top:4px}
.ur1{display:flex;gap:12px;align-items:center}
.ur1 .ut{flex:1;min-width:0}
.ur1 .ut b{font-size:14.5px;margin-right:6px}
.ur1 .av{flex:none}
.mg{margin-top:14px;padding:16px;border-radius:14px;background:var(--bg)}
.mg .row2{align-items:end}
.mg .acts{margin-top:14px}
.mg .acts .btn{min-width:110px}
#sheet,.nav .more{display:none}

/* Feedback styles */
.fbx textarea,textarea.fbt{font:inherit;font-size:15px;width:100%;min-height:110px;padding:13px 14px;border-radius:10px;border:1px solid #d5dae6;background:#fff;color:var(--ink);resize:vertical;transition:border .2s,box-shadow .2s}
textarea.fbt:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.stars{display:flex;gap:6px;margin-top:6px}
.stars button{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#d3d9ea;padding:2px}
.stars button.on{color:#3b82f6}
.st.new{color:#1c3fbf;background:#e8eeff}
.st.seen{color:#1e40af;background:#eff6ff}
.st.planned{color:#5b2bbf;background:#f0e9ff}
.st.resolved{color:#0b6b4f;background:#e6f8f1}
.fbi{border-top:1px solid var(--ln);padding:16px 0}
.fbi:first-child{border-top:0}
.fbi p{margin:8px 0 0;font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.fbi small{color:var(--mu)}
.fbr{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:11px;background:#e9ecf3;margin-bottom:22px}
.tabs button{border:0;background:none;color:var(--mu);padding:11px;border-radius:8px;font-weight:700;cursor:pointer}
.tabs button.on{color:var(--ink);background:#fff;box-shadow:0 1px 4px rgba(10,18,38,.14)}
.annc{position:sticky;top:0;z-index:90;padding:11px 40px 11px 16px;text-align:center;font-size:13.5px;font-weight:600;color:#fff;line-height:1.45}
.annc.info{background:var(--ink)}
.annc.ok{background:var(--ok)}
.annc.warn{background:#d98200}
.annc button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#fff;font-size:22px;line-height:1;padding:4px 10px;cursor:pointer}
.sws{display:flex;gap:8px;margin-top:8px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ln);cursor:pointer;padding:0}

/* Modal styles */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,20,55,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-card{width:100%;max-width:480px;background:#fff;border-radius:20px;box-shadow:0 24px 60px -15px rgba(11,20,55,.25),0 0 0 1px var(--ln);overflow:hidden;transform:scale(.94) translateY(10px);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding:0}
.modal-overlay.show .modal-card{transform:scale(1) translateY(0)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--ln)}
.modal-title-wrap{display:flex;align-items:center;gap:12px}
.modal-icon-badge{width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--a);display:grid;place-items:center;font-size:16px;flex:none}
.modal-head h3{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.modal-close{border:0;background:none;color:var(--mu);cursor:pointer;padding:6px 8px;border-radius:8px;font-size:18px;line-height:1;transition:background .15s,color .15s}
.modal-close:hover{background:var(--bg);color:var(--ink)}
.modal-body{padding:20px 24px}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;background:#fafbfe;border-top:1px solid var(--ln)}
.modal-foot .btn{padding:10px 22px}

/* Webhook Endpoints List */
.ep-card{padding:16px;border-radius:14px;background:var(--bg);border:1px solid var(--ln);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;transition:border-color .2s,box-shadow .2s}
.ep-card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(11,20,55,.04)}
.ep-info{flex:1;min-width:200px}
.ep-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ep-head b{font-size:14.5px;color:var(--ink)}
.ep-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--mu);word-break:break-all}
.ep-acts{display:flex;align-items:center;gap:8px}

/* Animations */
@keyframes up{from{opacity:0;transform:translateY(12px)}}
.vin>*{animation:up .45s cubic-bezier(.2,.7,.2,1) backwards}
.vin>*:nth-child(2){animation-delay:.05s}
.vin>*:nth-child(3){animation-delay:.1s}
.vin>*:nth-child(4){animation-delay:.15s}
.vin>*:nth-child(5){animation-delay:.2s}
.vin>*:nth-child(n+6){animation-delay:.25s}

/* Responsive queries */
@media(max-width:1000px){
  .two{grid-template-columns:minmax(0,1fr)}
  .fg,.how,.pr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .links{display:none}
  .hero{padding:40px 0 60px}
  .hero .wrap,.auth{grid-template-columns:minmax(0,1fr)}
  .chip{left:auto;right:6px;bottom:-22px;padding:10px 14px}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .fg,.how,.pr,.tool{grid-template-columns:minmax(0,1fr)}
  .sec{padding:60px 0}
  .band{padding:40px 22px}
  .ap{padding:26px 22px}
  .ap ul,.ap footer{display:none}
  .ap p{margin:0}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:15;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));flex-direction:row;border:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--ln);box-shadow:0 -10px 30px -12px rgba(31,67,214,.2)}
  .side .brand,.me{display:none}
  .nav{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;gap:2px}
  .nav a,.nav button{flex-direction:column;gap:3px;font-size:10px;line-height:1.2;padding:7px 2px;align-items:center;text-align:center;box-shadow:none!important}
  .nav a span,.nav button span{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.15;max-height:2.3em;overflow:hidden}
  .nav a.on,.nav button.on{background:var(--soft);color:var(--a);box-shadow:none}
  .mtop{display:flex}
  main{padding:20px 14px 110px}
  .top h2{font-size:23px}
  .box{padding:18px}
  .row2{grid-template-columns:1fr}
  .hd .act .btn.ghost{display:none}
  .nav .mx{display:none}
  .nav .more{display:flex}
  #sheet.show{display:grid;position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:16;gap:2px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 18px 40px rgba(11,20,55,.2)}
  #sheet a,#sheet button{display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--mu);padding:13px 14px;border-radius:11px;font-weight:600;font-size:14px;cursor:pointer;text-align:left;text-decoration:none}
  #sheet a.on,#sheet button.on{color:var(--a);background:var(--soft)}
  .txh{display:none}
  .txr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
  .ban{flex-wrap:wrap}
  .ban .btn{margin-left:0}
  .pg .btn{padding:9px 12px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hd .wrap{height:62px}
  .grid:has(>.stat){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid:has(>.stat) .stat{padding:16px 14px;margin-bottom:0}
  .stat .v{font-size:20px}
  .trust .wrap{grid-template-columns:minmax(0,1fr)}
  .band{padding:34px 18px}
  .cta .btn{flex:1 1 100%}
  .pg{flex-wrap:wrap}
  .sup{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Premium Activity Chart (Screenshot 2 Spec) */
.activity-card{border-radius:20px;background:#fff;border:1px solid #eef2f6;box-shadow:0 4px 20px -2px rgba(15,23,42,.04);padding:22px 24px;margin-bottom:20px;position:relative}
.activity-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.activity-title-group{display:flex;align-items:center;gap:10px}
.activity-icon-badge{width:36px;height:36px;border-radius:10px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;flex-shrink:0}
.activity-title{font-size:18px;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.activity-sub{font-size:13px;color:#64748b;margin:2px 0 0}
.activity-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chart-legend{display:flex;align-items:center;gap:8px}
.leg-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:11.5px;font-weight:700}
.leg-pill.rev{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}
.leg-pill.req{background:#f5f3ff;color:#7c3aed;border:1px solid #ede9fe}
.leg-pill .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.leg-pill.rev .dot{background:#2563eb}
.leg-pill.req .dot{background:#7c3aed}
.seg-period{display:inline-flex;background:#f1f5f9;padding:3px;border-radius:10px;border:1px solid #e2e8f0}
.seg-period button{border:0;background:transparent;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:700;color:#64748b;cursor:pointer;transition:all .2s ease}
.seg-period button.on{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chart-svg-container{width:100%;position:relative;overflow:visible}
.chart-tooltip{position:absolute;pointer-events:none;background:#0f172a;color:#fff;padding:9px 13px;border-radius:10px;font-size:12px;box-shadow:0 10px 25px -4px rgba(0,0,0,.3);transform:translate(-50%,-110%);opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:20;white-space:nowrap}
.chart-tooltip.show{opacity:1}
.chart-tooltip .tt-date{font-weight:700;color:#94a3b8;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:3px}
.chart-tooltip .tt-row{display:flex;align-items:center;gap:6px;margin-top:2px}

/* Setup Tutorial Video & Checklist Card */
.guide-card{border-radius:20px;background:#fff;border:1px solid #eef2f6;box-shadow:0 4px 20px -2px rgba(15,23,42,.04);padding:22px 24px;margin-bottom:20px}
.guide-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;margin-top:16px}
@media(max-width:860px){.guide-grid{grid-template-columns:1fr}}
.video-frame-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0f172a;box-shadow:0 12px 30px -8px rgba(37,99,235,.2);border:1px solid rgba(0,0,0,.06)}
.video-frame-box iframe,.video-frame-box video{width:100%;height:100%;border:0;display:block}
.guide-steps-list{display:flex;flex-direction:column;gap:10px}
.guide-step-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease}
.guide-step-item:hover{background:#eff6ff;border-color:#bfdbfe}
.guide-step-badge{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:800;font-size:11px;display:grid;place-items:center;flex-shrink:0}
.guide-step-text b{display:block;font-size:13.5px;color:#0f172a;margin-bottom:2px}
.guide-step-text span{font-size:12px;color:#64748b;line-height:1.45}


/* Phone: classic bar chart. Desktop (>860px): new spline chart. */
.act-old{display:none}
.ao-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ao-sum{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ao-sum b{font-size:22px;letter-spacing:-.4px;color:var(--ink)}
.ao-sum span{font-size:12.5px;color:var(--mu)}
.act-old .bars{height:150px}
.act-old .bc{cursor:pointer}
.act-old .bc i.sel{background:linear-gradient(180deg,#1d4ed8,#1e40af)}
.act-old .bc i.z.sel{background:#94a3b8}
.ao-tip{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12.5px;color:var(--mu)}
.ao-tip b{color:var(--ink)}
@media(max-width:860px){
  .activity-card{display:none}
  .act-old{display:block;margin-bottom:16px}
  .guide-card{padding:16px}
}
.act-old .bl span:last-child{display:flex;justify-content:flex-end}


/* =====================================================================
   v4 POLISH LAYER  (clean & premium, same blue/white theme)
   Safe to remove: delete everything from this comment to the end.
   ===================================================================== */
:root{
  --r:18px;
  --sh:0 1px 2px rgba(16,24,64,.04),0 12px 30px -16px rgba(31,67,214,.20);
  --sh-lg:0 1px 2px rgba(16,24,64,.05),0 28px 60px -28px rgba(31,67,214,.35);
  --ring:0 0 0 1px var(--ln);
  --bg:#f5f8ff;
}
body{background:var(--bg);letter-spacing:.005em}
h1,h2,h3{letter-spacing:-.02em}

/* Buttons: calmer, no shimmer sweep */
.btn{border-radius:11px;font-weight:650;letter-spacing:.01em;
  background:linear-gradient(180deg,#3069f2,#1f56dd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(29,78,216,.4),0 8px 18px -8px rgba(37,99,235,.55)}
.btn::after{display:none}
.btn:hover{filter:none;background:linear-gradient(180deg,#3b76f6,#2460e6);transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn.ghost{background:#fff;box-shadow:var(--ring),0 1px 2px rgba(16,24,64,.05)}
.btn.ghost:hover{background:#fff;box-shadow:0 0 0 1px #b9cdf9,0 4px 12px -6px rgba(37,99,235,.25);transform:translateY(-1px)}
.btn.sm{border-radius:10px}

/* Inputs */
input,select{border-color:#d9dfef;border-radius:11px;box-shadow:0 1px 2px rgba(16,24,64,.03)}
input:hover,select:hover{border-color:#c3cde6}
label{letter-spacing:.01em}

/* Cards share one radius + one shadow */
.box,.plan,.activity-card,.guide-card,.f,.how div{border-radius:var(--r)}
.box,.plan{box-shadow:var(--ring),var(--sh)}
.activity-card,.guide-card{border-color:var(--ln);box-shadow:var(--ring),var(--sh)}
.box h3{font-size:16.5px}

/* ---------- App shell ---------- */
.side{background:linear-gradient(180deg,#fff,#fbfcff)}
.side .brand{border-bottom:1px solid var(--ln);margin-bottom:14px;padding-bottom:18px}
.nav{gap:2px}
.nav a,.nav button{border-radius:11px;padding:10px 14px}
.nav a:hover,.nav button:hover{transform:none;background:#f3f6ff}
.nav a.on,.nav button.on{background:var(--soft);box-shadow:inset 3px 0 0 var(--a);color:var(--a)}
.me{background:#f6f8ff;border-radius:14px}
.me>div{min-width:0}
.me small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;max-width:130px}
main{padding-top:40px}
.top{margin-bottom:28px}
.top h2{font-size:30px;letter-spacing:-.03em}
.top p{font-size:14.5px}

/* Stat cards */
.stat{position:relative}
.stat small{font-size:12.5px;letter-spacing:.01em}
.stat .v{font-size:27px;letter-spacing:-.03em;line-height:1.15}
.g5 .v{font-size:23px}

/* Tables / lists */
.txr{padding:14px 8px;border-radius:10px;transition:background .15s}
.txr:hover{background:#f7f9ff}
.txh{padding:10px 8px}
.st{letter-spacing:.01em}
.tabs,.seg{background:#eaeffb}
.pill{font-size:12.5px}

/* Toast, modal */
#toast{border-radius:12px}
.modal-card{border-radius:22px}

/* ---------- Landing ---------- */
.hd{background:rgba(255,255,255,.9)}
.hd .wrap{height:68px}
.links{gap:30px}
.hero{padding-bottom:84px}
.hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--ink);animation:none;letter-spacing:-.035em;line-height:1.05}
.hero p.lead{color:#4d5a7d}
.mock .pc{border-radius:26px;box-shadow:var(--ring),var(--sh-lg)}
.chip{left:-44px;bottom:-26px;border-radius:16px;box-shadow:var(--ring),0 18px 40px -16px rgba(31,67,214,.4)}
.trust .wrap{padding-top:26px;padding-bottom:26px}
.sec{padding:76px 0}
#how{padding-bottom:34px}
.sh{letter-spacing:-.03em}
.sd{margin-bottom:38px}
.f{box-shadow:var(--ring),0 1px 2px rgba(16,24,64,.04);padding:26px 26px 28px}
.f:hover{transform:none;box-shadow:0 0 0 1px #b9cdf9,var(--sh)}
.how div{background:#fff;box-shadow:var(--ring),0 1px 2px rgba(16,24,64,.04)}
.how div::before{border-radius:11px;background:linear-gradient(180deg,#3069f2,#1f56dd)}
/* FAQ: question list on the right, heading on the left (desktop) */
#faq .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:0 64px;align-items:start}
#faq .sh,#faq .sd{grid-column:1}
#faq .faq{grid-column:2;grid-row:1 / span 3;max-width:none}
.faq details{box-shadow:var(--ring),0 1px 2px rgba(16,24,64,.04);border-radius:14px}
.faq details[open]{box-shadow:0 0 0 1px #b9cdf9,var(--sh)}
.faq summary{padding:19px 22px}
.band{border-radius:26px}
.ft{margin-top:56px}

/* ---------- Auth (login / signup) ---------- */
.pane{background:#fff}
.card{max-width:400px}
.card h2{font-size:30px;letter-spacing:-.03em}
.tabs{border-radius:12px}
.tabs button.on{box-shadow:0 1px 3px rgba(16,24,64,.12)}
.card .btn{border-radius:12px}

/* ---------- Pay page polish (shared bits) ---------- */
.pay-wrap .btn{border-radius:12px}

/* ---------- Phone ---------- */
@media(max-width:860px){
  .hero{padding-bottom:56px}
  .chip{left:auto;right:8px;bottom:-24px}
  .sec{padding:56px 0}
  #how{padding-bottom:20px}
  #faq .wrap{display:block}
  #faq .faq{max-width:none}
  /* auth: shorter hero, form sheet slides over it */
  .ap{padding:26px 22px 54px}
  .ap h1{font-size:27px;margin:0 0 8px}
  .ap p{font-size:14.5px}
  .ap>div:nth-child(2){margin-top:22px}
  .pane{place-items:start center;padding:26px 20px 44px;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;box-shadow:0 -10px 30px -18px rgba(16,24,64,.3)}
  .card{max-width:none}
  main{padding-top:22px}
  .top h2{font-size:25px}
  .stat .v{font-size:23px}
  .me small{max-width:none}
}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ================= v4 UI polish (overrides, keep at end of file) ================= */
::selection{background:rgba(37,99,235,.18)}
body{background:radial-gradient(900px 520px at 100% -6%,rgba(37,99,235,.075),transparent 62%),radial-gradient(760px 460px at -12% 46%,rgba(124,92,255,.055),transparent 62%),var(--bg)}

/* Sidebar & nav */
.side{box-shadow:1px 0 0 var(--ln),12px 0 40px -28px rgba(31,67,214,.28)}
.nav a.on,.nav button.on{background:linear-gradient(90deg,rgba(37,99,235,.13),rgba(37,99,235,.04));box-shadow:inset 3px 0 0 var(--a)}
.nav a svg.i,.nav button svg.i{transition:transform .2s}
.nav a:hover svg.i{transform:scale(1.08)}
.me{background:linear-gradient(135deg,#f5f8ff,#eef4ff)}

/* Page header */
.top h2{font-size:30px;letter-spacing:-1.1px}
.top p{font-size:14.5px}

/* Cards */
.box{border-radius:18px;box-shadow:0 0 0 1px var(--ln),0 1px 2px rgba(15,23,42,.04),0 18px 40px -26px rgba(31,67,214,.30)}
.box.stat{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s}
.box.stat::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2563eb,#7c5cff);opacity:0;transition:opacity .25s}
.box.stat:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #c7d7fb,0 22px 44px -22px rgba(31,67,214,.38)}
.box.stat:hover::after{opacity:1}
.stat small{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b7799}
.stat .v{font-size:26px;margin-top:8px}
#st_gw{font-size:22px}
.activity-card,.guide-card{border-radius:18px;transition:box-shadow .25s}
.activity-card:hover,.guide-card:hover{box-shadow:0 4px 24px -4px rgba(15,23,42,.08)}

/* Forms */
input,select{border-radius:12px;background-color:#fbfcff;border-color:#d9dfee}
input:hover,select:hover{border-color:#b9c5e6}
label{letter-spacing:.01em}

/* Transactions toolbar + rows */
.tool{grid-template-columns:1fr 170px auto auto;align-items:center}
.txr{border-radius:10px;transition:background .15s}
.txr:hover{background:#f6f9ff}

/* Quick actions grid (dashboard) */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:14px}
.qa-grid .btn{display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left;padding:13px 14px;border-radius:12px;font-size:13.5px}

/* Login / signup side panel */
.ap{background:radial-gradient(rgba(255,255,255,.17) 1px,transparent 1.5px) 0 0/24px 24px,radial-gradient(520px 360px at 100% 0,rgba(255,255,255,.2),transparent 65%),radial-gradient(640px 420px at 0 100%,rgba(124,92,255,.38),transparent 65%),linear-gradient(160deg,#4a73ff,#2447d6)}

/* Thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c9d5f5 transparent}

/* Phone */
@media(max-width:860px){
  .top h2{font-size:25px}
  .tool{grid-template-columns:minmax(0,1fr)}
  .nav a,.nav button{font-size:9.5px;letter-spacing:-.15px}
  .nav a span,.nav button span{overflow-wrap:normal;word-break:normal;hyphens:none}
  .box.stat:hover{transform:none}
}
@media(max-width:560px){
  .grid:has(>.stat)>.stat:last-child:nth-child(odd){grid-column:1/-1}
  .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa-grid .btn{padding:12px 10px;font-size:12.5px}
  .stat .v{font-size:23px}
}

/* v4 polish - fixes round 2 */
.g5 .stat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.05em;font-size:10.5px}
@media(max-width:860px){
  /* bottom bar: short label so it never gets cut or broken ("Transactions" -> "Orders") */
  .nav a[href="/transactions.php"] span{font-size:0;line-height:0}
  .nav a[href="/transactions.php"] span::after{content:"Orders";font-size:9.5px;line-height:1.15;letter-spacing:-.15px}
}
@media(max-width:560px){
  .qa-grid .btn:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:860px){
  .nav a[href="/transactions.php"] span{max-height:none;overflow:visible}
  .tool .btn{width:100%}
}

/* ================= v5 PROFESSIONAL NAVY THEME (keep at end of file) ================= */
:root{
  --navy:#0a1330;
  --navy2:#0f1c45;
  --navy-ln:rgba(255,255,255,.08);
  --navy-tx:#9db0dc;
  --fd:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
h1,h2,h3,.sh,.am,.pl .p,.plan .p,.stat .v,.brand,.band h2,.top h2{font-weight:700;letter-spacing:-.02em}

/* ---- Dark navy sidebar (desktop) ---- */
.side{background:radial-gradient(420px 260px at 0 0,rgba(59,130,246,.16),transparent 70%),linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);border-right:1px solid rgba(255,255,255,.05);box-shadow:none;color:#fff;scrollbar-color:#2a3a6b transparent}
.side::-webkit-scrollbar-thumb{background:#2a3a6b}
.side .brand{color:#fff;border-bottom:1px solid var(--navy-ln);margin-bottom:14px}
.side .brand small{color:var(--navy-tx)}
.side .lg{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.35)}
.nav a,.nav button{color:var(--navy-tx)}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.07);color:#fff;transform:none}
.nav a.on,.nav button.on{background:linear-gradient(90deg,rgba(59,130,246,.30),rgba(59,130,246,.08));color:#fff;box-shadow:inset 3px 0 0 #60a5fa}
.nav a.on svg.i,.nav button.on svg.i{color:#93c5fd}
.me{background:rgba(255,255,255,.05);border:1px solid var(--navy-ln)}
.me b{color:#fff}
.me small{color:var(--navy-tx)}
.me button{color:var(--navy-tx)}
.me button:hover{color:#fca5a5}
.av{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}

/* ---- Cleaner, calmer buttons & motion ---- */
.btn::after{display:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.hero h1{background:none;-webkit-text-fill-color:var(--navy);color:var(--navy);animation:none}
.mock,.chip{animation:none}

/* ---- Auth (login / signup) side panel ---- */
.ap{background:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/24px 24px,radial-gradient(560px 380px at 100% 0,rgba(59,130,246,.35),transparent 65%),radial-gradient(520px 360px at 0 100%,rgba(99,102,241,.25),transparent 65%),linear-gradient(160deg,#13245a,#0a1330)}
.ap .brand small{color:var(--navy-tx)}

/* ---- Landing: CTA band + footer in navy ---- */
.band{background:radial-gradient(520px 280px at 90% 0,rgba(59,130,246,.35),transparent 70%),linear-gradient(135deg,#13245a,#0a1330);box-shadow:0 34px 70px -30px rgba(10,19,48,.65)}
.band p{color:#b4c3ea}
.ft{background:var(--navy);color:var(--navy-tx);border-top:0}
.ft .brand,.ft .col b{color:#fff}
.ft .brand small{color:var(--navy-tx)}
.ft a:hover{color:#fff}
.cp{border-top-color:var(--navy-ln)}

/* ---- Phone: dark bottom bar + More sheet ---- */
@media(max-width:860px){
  .side{background:rgba(10,19,48,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -12px 32px -10px rgba(10,19,48,.55)}
  .side .brand{border:0;margin:0}
  .nav a,.nav button{color:var(--navy-tx)}
  .nav a.on,.nav button.on{background:rgba(96,165,250,.18);color:#fff;box-shadow:none}
  .nav a.on svg.i,.nav button.on svg.i{color:#93c5fd}
  #sheet.show{background:var(--navy2);box-shadow:0 0 0 1px var(--navy-ln),0 22px 48px rgba(0,0,0,.5)}
  #sheet a,#sheet button{color:#b4c3ea}
  #sheet a.on,#sheet button.on{color:#fff;background:rgba(96,165,250,.18)}
}

/* icons replacing emojis */
svg.ic{width:15px;height:15px;vertical-align:-2px;margin-right:7px;flex:none}
.qa-grid svg.ic{width:17px;height:17px;margin:0;color:var(--a)}
.ic-badge{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--a);flex:none}
.ic-badge svg.ic{width:19px;height:19px;margin:0}


/* =====================================================================
   PREMIUM LAYER v2  -  blue + white, animated, mouse effects
   Delete from here to the end of the file to go back to the old look.
   Works together with /assets/js/fx.js
   ===================================================================== */
:root{--sky:#38bdf8;--ind:#5b6cff;--glow:rgba(47,91,255,.10)}
::selection{background:rgba(47,91,255,.22)}
html{scrollbar-width:thin;scrollbar-color:#b6c6f6 transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#b6c6f6;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#8fa8f0;background-clip:content-box;border:2px solid transparent}

@keyframes fxUp{from{opacity:0;transform:translateY(16px)}}
@keyframes fxShine{to{background-position:-220% 0}}
@keyframes fxA{to{transform:translate(60px,40px) scale(1.18)}}
@keyframes fxB{to{transform:translate(-50px,-36px) scale(1.12)}}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}100%{box-shadow:0 0 0 9px rgba(16,185,129,0)}}
@keyframes fxRip{to{transform:scale(3.2);opacity:0}}

/* ---- Buttons: gradient, shine sweep, magnetic, ripple ---- */
.btn{background:linear-gradient(180deg,#4d6bff,#2a45e0);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -8px rgba(47,91,255,.6);transform:translate(var(--tx,0px),var(--ty,0px));transition:filter .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.btn::after{display:block;content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s;pointer-events:none}
.btn:hover{filter:brightness(1.08);transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px));box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 34px -10px rgba(47,91,255,.7)}
.btn:hover::after{left:150%}
.btn:active{transform:translate(var(--tx,0px),calc(var(--ty,0px) + 1px))}
.btn.ghost{background:#fff}
.btn.ghost:hover{box-shadow:0 0 0 1px var(--a),0 12px 26px -12px rgba(47,91,255,.5)}
.rip{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:fxRip .65s ease-out forwards;pointer-events:none}
.btn.ghost .rip{background:rgba(47,91,255,.2)}

/* ---- Landing header ---- */
.hd{background:rgba(255,255,255,.78);box-shadow:0 8px 30px -22px rgba(31,67,214,.4)}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.links a:hover::after{transform:scaleX(1)}

/* ---- Hero: animated aurora + gradient headline ---- */
.hero{background:radial-gradient(900px 520px at 88% -10%,rgba(47,91,255,.20),transparent 60%),radial-gradient(700px 480px at -8% 105%,rgba(56,189,248,.20),transparent 60%),radial-gradient(rgba(47,91,255,.13) 1px,transparent 1.4px) 0 0/24px 24px,linear-gradient(180deg,#fff,#eef3ff)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0;opacity:.5}
.hero::before{width:440px;height:440px;right:4%;top:-140px;background:#8aa4ff;animation:fxA 14s ease-in-out infinite alternate;translate:calc(var(--px,0)*34px) calc(var(--py,0)*24px)}
.hero::after{width:380px;height:380px;left:-90px;bottom:-130px;background:#7dd3fc;animation:fxB 17s ease-in-out infinite alternate;translate:calc(var(--px,0)*-28px) calc(var(--py,0)*-20px)}
.hero h1{background:linear-gradient(90deg,#0b1437 0,#2f5bff 42%,#38bdf8 58%,#0b1437 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:fxShine 8s linear infinite}
.hero .wrap>div:first-child>*{animation:fxUp .8s cubic-bezier(.2,.8,.2,1) backwards}
.hero .wrap>div:first-child>*:nth-child(2){animation-delay:.08s}
.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.16s}
.hero .wrap>div:first-child>*:nth-child(4){animation-delay:.24s}
.hero .wrap>div:first-child>*:nth-child(5){animation-delay:.32s}
.mock{animation:bob 7s ease-in-out infinite}
.chip{animation:fl 5s ease-in-out infinite}
.pc{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,box-shadow .3s;will-change:transform;box-shadow:0 0 0 1px var(--ln),0 50px 100px -30px rgba(31,67,214,.5),0 0 90px -30px rgba(56,189,248,.6)}
.pc .bar i{background:linear-gradient(90deg,var(--a),var(--sky),var(--a));background-size:200% 100%;animation:fxShine 3s linear infinite}
.fx-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---- Cards: cursor spotlight + lift ---- */
.f,.how div,.box,.stat,.faq details,.pl,.plan:not(.best){background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(47,91,255,.10),transparent 45%);transition:box-shadow .3s,transform .25s cubic-bezier(.2,.8,.2,1)}
.f{box-shadow:0 0 0 1px var(--ln),0 10px 30px -20px rgba(31,67,214,.25);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.f:hover{box-shadow:0 0 0 1px rgba(47,91,255,.55),0 30px 56px -24px rgba(31,67,214,.38);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.f .ic2{background:linear-gradient(135deg,#eef2ff,#dfe8ff);transition:background .3s,color .3s,transform .3s}
.f:hover .ic2{background:linear-gradient(135deg,#4d6bff,#2a45e0);color:#fff;transform:scale(1.08) rotate(-4deg)}
.how div{background-color:#fff;box-shadow:0 0 0 1px var(--ln),0 10px 30px -22px rgba(31,67,214,.25)}
.how div:hover{box-shadow:0 0 0 1px rgba(47,91,255,.5),0 24px 48px -24px rgba(31,67,214,.35);transform:translateY(-3px)}
.how div::before{background:linear-gradient(135deg,#4d6bff,#2a45e0);box-shadow:0 8px 18px -6px rgba(47,91,255,.7)}
.sh::after{content:"";display:block;width:46px;height:3px;border-radius:9px;margin-top:14px;background:linear-gradient(90deg,var(--a),var(--sky))}
div[style*="text-align:center"]>.sh::after{margin-left:auto;margin-right:auto}
.faq details{transition:box-shadow .25s}
.faq details:hover{box-shadow:0 0 0 1px rgba(47,91,255,.4),0 12px 26px -18px rgba(31,67,214,.35)}
.faq details[open]{box-shadow:0 0 0 1px rgba(47,91,255,.55),0 16px 32px -18px rgba(31,67,214,.35)}
.faq details[open] div{animation:fxUp .35s ease-out}
.trust .i{background:linear-gradient(135deg,#eef2ff,#dfe8ff);color:var(--a2);transition:transform .3s}
.trust>.wrap>div:hover .i{transform:translateY(-3px) scale(1.06)}

/* ---- Scroll reveal (class added by fx.js, only below the fold) ---- */
.fx .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.fx .rv.in{opacity:1;transform:none}
.fx .f.rv.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.fx-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--a),var(--sky));pointer-events:none}

/* ---- CTA band + footer ---- */
.band{background:radial-gradient(520px 280px at 90% 0,rgba(125,211,252,.4),transparent 70%),radial-gradient(420px 260px at 0 100%,rgba(255,255,255,.18),transparent 70%),linear-gradient(135deg,#3d63ff,#1f3bc2);box-shadow:0 36px 70px -28px rgba(47,91,255,.7);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.12),transparent 30%);animation:fxSpin 14s linear infinite;pointer-events:none}
.band>*{position:relative}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.band p{color:#e1eaff}
.band .btn.wh{background:#fff;color:var(--a2)}

/* ---- Login / Signup ---- */
.ap{position:relative;overflow:hidden;background:radial-gradient(560px 380px at 100% 0,rgba(125,211,252,.35),transparent 65%),radial-gradient(520px 360px at 0 100%,rgba(91,108,255,.55),transparent 65%),linear-gradient(160deg,#3d63ff,#16277e)}
.ap::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-120px;top:20%;background:rgba(255,255,255,.12);filter:blur(60px);animation:fxA 15s ease-in-out infinite alternate;pointer-events:none}
.ap>*{position:relative;z-index:1}
.ap>.fx-net{position:absolute;z-index:0}
.ap li::before{background:rgba(255,255,255,.24);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.ap h1,.ap p,.ap ul{animation:fxUp .8s cubic-bezier(.2,.8,.2,1) backwards}
.ap p{animation-delay:.08s}.ap ul{animation-delay:.16s}
.pane{background:linear-gradient(180deg,#fff,#f5f8ff)}
input:focus,select:focus,textarea.fbt:focus{border-color:var(--a);box-shadow:0 0 0 4px rgba(47,91,255,.16)}

/* ---- Dashboard ---- */
main .top{animation:fxUp .5s cubic-bezier(.2,.8,.2,1) backwards}
main .grid>*,main .box,main .plan{animation:fxUp .55s cubic-bezier(.2,.8,.2,1) backwards}
main .grid>*:nth-child(2){animation-delay:.06s}main .grid>*:nth-child(3){animation-delay:.12s}main .grid>*:nth-child(4){animation-delay:.18s}main .grid>*:nth-child(n+5){animation-delay:.24s}
.box,.plan{box-shadow:0 0 0 1px var(--ln),0 18px 40px -28px rgba(31,67,214,.35);border-radius:18px}
.box:hover{box-shadow:0 0 0 1px rgba(47,91,255,.35),0 24px 50px -26px rgba(31,67,214,.42)}
.plan.best{background:radial-gradient(300px 200px at 100% 0,rgba(125,211,252,.35),transparent 70%),linear-gradient(160deg,#4d6bff,#1f3bc2);box-shadow:0 34px 64px -24px rgba(47,91,255,.7)}
.tag{background:linear-gradient(180deg,#4d6bff,#2a45e0)}
.pill.on-p::before{animation:fxPulse 1.6s ease-out infinite}
.nav a svg.i,.nav button svg.i{transition:transform .25s}
.nav a:hover svg.i,.nav button:hover svg.i{transform:scale(1.14)}
.av{background:linear-gradient(135deg,#4d6bff,#2a45e0)}
pre{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 16px 34px -22px rgba(10,19,48,.6)}

/* ---- Cursor glow + ring (desktop only, added by fx.js) ---- */
.fx-glow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:9998;background:radial-gradient(circle,rgba(47,91,255,.13),rgba(56,189,248,.05) 45%,transparent 70%);opacity:0;transition:opacity .4s;will-change:transform}
.fx-ring{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid rgba(47,91,255,.55);pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s,border-color .25s;will-change:transform}
.fx-ring.big{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(47,91,255,.08);border-color:rgba(47,91,255,.35)}
.fx-on .fx-glow,.fx-on .fx-ring{opacity:1}

@media(max-width:860px){
  .hero::before,.hero::after{filter:blur(56px)}
  .hero{padding:56px 0 72px}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero::before,.hero::after,.band::before,.ap::before,.mock,.chip,.pc .bar i{animation:none!important}
  .fx .rv{opacity:1;transform:none;transition:none}
}


/* ---- Dashboard: colourful stat cards (cute style) ---- */
.kx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.kx{position:relative;overflow:hidden;padding:22px 22px 24px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 14px 30px -20px rgba(31,67,214,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;animation:kxin .6s cubic-bezier(.2,.9,.3,1.1) backwards}
.kx:nth-child(2){animation-delay:.07s}.kx:nth-child(3){animation-delay:.14s}.kx:nth-child(4){animation-delay:.21s}
@keyframes kxin{from{opacity:0;transform:translateY(18px) scale(.97)}}
.kx::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-60px;top:-70px;background:var(--kt);opacity:.1;transition:transform .5s}
.kx:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--kt),0 22px 40px -20px var(--ks)}.kx:hover::before{transform:scale(1.4)}
.kx-t{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.kx-t small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7799}
.kx-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:linear-gradient(145deg,var(--kt2),var(--kt));box-shadow:0 10px 18px -8px var(--ks);transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.kx:hover .kx-ic{transform:rotate(-8deg) scale(1.1)}
.kx-ic svg{width:22px;height:22px}
.kx-v{position:relative;margin-top:22px;font:800 38px var(--fd);letter-spacing:-1.4px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.kx-b{--kt:#2563eb;--kt2:#60a5fa;--ks:rgba(37,99,235,.5)}
.kx-g{--kt:#10b981;--kt2:#34d399;--ks:rgba(16,185,129,.5)}
.kx-r{--kt:#ef4444;--kt2:#fb7185;--ks:rgba(239,68,68,.5)}
.kx-money .kx-v{color:#0aa678}
.wave{display:inline-block;transform-origin:70% 70%;animation:wv 2.4s 1s ease-in-out infinite}
@keyframes wv{0%,60%,100%{transform:none}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}
@media(max-width:900px){.kx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kx{padding:16px 14px 18px;border-radius:18px}.kx-ic{width:38px;height:38px;border-radius:12px}.kx-v{font-size:28px;margin-top:16px}}
@media(prefers-reduced-motion:reduce){.kx,.wave{animation:none!important}}


/* ================= Premium: Transactions + Gateway ================= */
.px-ttl{display:flex;align-items:center;gap:14px}
.px-hic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;box-shadow:0 12px 22px -10px var(--hs);animation:kxin .6s cubic-bezier(.2,.9,.3,1.1) backwards}
.px-hic svg{width:24px;height:24px}
.px-hic.sm{display:inline-grid;width:34px;height:34px;border-radius:11px;margin-right:10px;vertical-align:middle;animation:none}.px-hic.sm svg{width:17px;height:17px}
.px-b{background:linear-gradient(145deg,#60a5fa,#2563eb);--hs:rgba(37,99,235,.55)}
.px-g{background:linear-gradient(145deg,#34d399,#059669);--hs:rgba(16,185,129,.55)}
.px-p{background:linear-gradient(145deg,#a78bfa,#7c3aed);--hs:rgba(124,58,237,.5)}
.px-box{border-radius:22px;animation:kxin .6s .08s cubic-bezier(.2,.9,.3,1.1) backwards;box-shadow:0 0 0 1px var(--ln),0 18px 40px -26px rgba(31,67,214,.35)}
.px-box h3{display:flex;align-items:center}

/* transactions */
.px-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.px-m{position:relative;overflow:hidden;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln);transition:transform .25s,box-shadow .25s;animation:kxin .6s backwards}
.px-m:nth-child(2){animation-delay:.07s}.px-m:nth-child(3){animation-delay:.14s}
.px-m::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.px-m::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-40px;top:-50px;background:var(--c);opacity:.1}
.px-m:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--c),0 18px 30px -18px var(--c)}
.px-m small{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b7799}
.px-m b{display:block;margin-top:6px;font:800 28px var(--fd);letter-spacing:-.8px;color:var(--c)}
.px-mb{--c:#2563eb}.px-mg{--c:#10b981}.px-ma{--c:#f59e0b}
.px-tx .tool{padding:6px;border-radius:16px;background:#f4f7ff;box-shadow:0 0 0 1px var(--ln) inset}
.px-tx .tool input,.px-tx .tool select{border-radius:12px;border-color:transparent;background:#fff;box-shadow:0 1px 2px rgba(10,18,38,.06)}
.px-tx .txh{padding:10px 16px;text-transform:uppercase;letter-spacing:.07em;font-size:11px}
.px-tx .txr.px-r{position:relative;margin-top:8px;padding:14px 16px 14px 20px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--ln);transition:transform .2s,box-shadow .2s;animation:kxin .45s backwards}
.px-r::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#cbd5e1}
.px-r.PAID::before{background:linear-gradient(#34d399,#059669)}.px-r.PENDING::before{background:linear-gradient(#fcd34d,#f59e0b)}.px-r.EXPIRED::before,.px-r.FAILED::before{background:linear-gradient(#fb7185,#ef4444)}
.px-tx .txr.px-r:hover{background:#fff;transform:translateX(3px);box-shadow:0 0 0 1px #bcd0ff,0 14px 26px -18px rgba(37,99,235,.5)}
.px-r b{font:800 16px var(--fd);letter-spacing:-.3px}
.px-r.PAID b{color:#0aa678}
.px-st{display:inline-flex;align-items:center;gap:6px;padding:5px 12px}
.px-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.px-st.PENDING::before{animation:px-pulse 1.4s infinite}
@keyframes px-pulse{50%{opacity:.25;transform:scale(1.6)}}
.px-tx .pg{border:0;padding-top:18px}
.px-tx .pg .btn{border-radius:12px}

/* gateway */
.px-conn{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:99px;font-size:12.5px;font-weight:700;color:#7a5200;background:#fff6e0;box-shadow:0 0 0 1px #fde7b0}
.px-conn i{width:8px;height:8px;border-radius:50%;background:currentColor;position:relative}
.px-conn i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:ping 1.6s ease-out infinite}
@keyframes ping{to{transform:scale(3.2);opacity:0}}
.px-conn.on{color:#0b6b4f;background:#e6f8f1;box-shadow:0 0 0 1px #b7ead8}.px-conn.bad{color:#a3232b;background:#fdeced;box-shadow:0 0 0 1px #f6c6c9}
.px-gw label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7799}
.px-gw .px-box input{border-radius:12px;background:#f8faff;border-color:#e3e8f3}
.px-gw .px-box input:focus{background:#fff}
.px-gw .acts .btn:not(.ghost){background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#7c5cff);box-shadow:0 12px 22px -8px rgba(37,99,235,.6)}
.px-gw .acts .btn{border-radius:13px}
.px-gw details{border:0;margin-bottom:8px;padding:12px 14px;border-radius:14px;background:#f8faff;box-shadow:0 0 0 1px var(--ln);transition:box-shadow .2s,background .2s}
.px-gw details:first-of-type{padding:12px 14px}
.px-gw details[open]{background:#fff;box-shadow:0 0 0 1px #bcd0ff,0 12px 24px -18px rgba(37,99,235,.5)}
.px-gw summary .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#fff;font:800 13px var(--fd);background:linear-gradient(145deg,#60a5fa,#2563eb);box-shadow:0 6px 12px -5px rgba(37,99,235,.6)}
.px-gw details:nth-of-type(2) .n{background:linear-gradient(145deg,#a78bfa,#7c3aed)}.px-gw details:nth-of-type(3) .n{background:linear-gradient(145deg,#f472b6,#db2777)}.px-gw details:nth-of-type(4) .n{background:linear-gradient(145deg,#fbbf24,#f59e0b)}.px-gw details:nth-of-type(5) .n{background:linear-gradient(145deg,#34d399,#059669)}
@media(max-width:760px){.px-mini{gap:8px}.px-m{padding:12px}.px-m b{font-size:22px}.px-hic{width:44px;height:44px;border-radius:14px}}
@media(prefers-reduced-motion:reduce){.px-hic,.px-box,.px-m,.px-r,.px-conn i::after,.px-st::before{animation:none!important}}


/* ================= Premium: Keys + Links ================= */
.px-cred{display:grid;gap:16px;margin-bottom:16px}
.px-c{position:relative;overflow:hidden;padding:22px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 18px 40px -26px rgba(31,67,214,.35);animation:kxin .6s backwards}
.px-c::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;top:-110px;background:var(--cc);opacity:.09}
.px-cb{--cc:#2563eb}.px-cp{--cc:#7c3aed;animation-delay:.08s}
.px-ch{display:flex;align-items:center;gap:12px;position:relative}
.px-ch .px-hic.sm{margin:0}
.px-ch b{display:block;font:700 16px var(--fd)}.px-ch small{display:block;color:var(--mu);font-size:12.5px;margin-top:2px}
.px-kv{display:flex;align-items:center;gap:8px;margin-top:16px;padding:8px 8px 8px 16px;border-radius:15px;background:#f4f7ff;box-shadow:0 0 0 1px var(--ln) inset;position:relative}
.px-kv code{flex:1;min-width:0;font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);overflow-wrap:anywhere;background:none;padding:0}
.px-mask{letter-spacing:.06em;transition:color .2s}.px-mask.shown{color:#6d28d9;letter-spacing:0}
.px-ib{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:#fff;color:var(--a2);cursor:pointer;box-shadow:0 0 0 1px var(--ln),0 2px 4px rgba(10,18,38,.05);transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.px-ib svg{width:18px;height:18px}
.px-ib:hover{transform:translateY(-2px);color:#fff;background:linear-gradient(145deg,#60a5fa,#2563eb);box-shadow:0 10px 18px -8px rgba(37,99,235,.6)}.px-ib:active{transform:none}
.px-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;position:relative}
.px-roll{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:12px;font:700 13.5px inherit;font-family:inherit;cursor:pointer;color:#b91c1c;background:#fff1f2;box-shadow:0 0 0 1px #fecdd3;transition:transform .2s,box-shadow .2s,background .2s}
.px-roll svg{width:17px;height:17px;transition:transform .5s}
.px-roll:hover{background:#ffe4e6;transform:translateY(-2px);box-shadow:0 0 0 1px #fda4af,0 10px 18px -10px rgba(239,68,68,.6)}.px-roll:hover svg{transform:rotate(180deg)}
.px-ks pre{border-radius:16px}
.px-pcopy{position:absolute;right:20px;top:20px;width:36px;height:36px;z-index:2}

/* links */
.px-lk .row2 label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7799}
.px-lk .px-box input,.px-lk .px-box select{border-radius:12px;background:#f8faff;border-color:#e3e8f3}
.px-lk .px-box input:focus,.px-lk .px-box select:focus{background:#fff}
.px-lk .acts .btn:not(.ghost){background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#7c5cff);box-shadow:0 12px 22px -8px rgba(37,99,235,.6);border-radius:13px}
.px-link{position:relative;margin-top:10px;padding:16px 18px 16px 22px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln);transition:transform .2s,box-shadow .2s;animation:kxin .45s backwards}
.px-link::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--lc)}
.px-link.act{--lc:linear-gradient(#34d399,#059669)}.px-link.pau{--lc:linear-gradient(#fcd34d,#f59e0b)}.px-link.exp{--lc:linear-gradient(#fb7185,#ef4444)}.px-link.used{--lc:linear-gradient(#a78bfa,#7c3aed)}
.px-link:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #bcd0ff,0 16px 28px -20px rgba(37,99,235,.55)}
.px-link>b{font:700 16px var(--fd);margin-right:6px}
.px-link .st{margin-left:4px}
.px-lkv{padding:7px 7px 7px 14px;border-radius:13px;background:#f4f7ff;box-shadow:0 0 0 1px var(--ln) inset}
.px-lkv code{background:none;color:var(--a2);font-weight:600}
.px-link .btn.sm{border-radius:11px}
@media(max-width:760px){.px-c{padding:18px}.px-pcopy{position:static;margin:0 0 8px auto}}
@media(prefers-reduced-motion:reduce){.px-c,.px-link{animation:none!important}}


/* ================= Premium: Webhooks + Branding + Settings (roomy) ================= */
.px-o{background:linear-gradient(145deg,#fdba74,#f97316);--hs:rgba(249,115,22,.55)}
.px-k{background:linear-gradient(145deg,#f9a8d4,#db2777);--hs:rgba(219,39,119,.5)}
.px-i{background:linear-gradient(145deg,#a5b4fc,#4f46e5);--hs:rgba(79,70,229,.5)}
.px-s{background:linear-gradient(145deg,#7dd3fc,#0284c7);--hs:rgba(2,132,199,.5)}
.px-sp .top{margin-bottom:36px}
.px-sp .px-box{padding:30px 30px 32px;margin-bottom:26px}
.px-sp .two{gap:26px}.px-sp .two .px-box{margin-bottom:0}
.px-sp .px-box h3{font-size:18px;margin-bottom:4px}
.px-sp .px-box .sub{margin:6px 0 22px;line-height:1.65}
.px-sp label{display:block;margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7799}
.px-sp .px-box>label:first-of-type{margin-top:4px}
.px-sp .px-box input:not([type=color]):not([type=file]),.px-sp .px-box select{padding:14px 16px;border-radius:13px;background:#f8faff;border-color:#e3e8f3}
.px-sp .px-box input:focus{background:#fff}
.px-sp input[readonly]{background:#f1f4fb!important;color:var(--mu)}
.px-sp .hint{display:block;margin-top:8px}
.px-sp .acts{margin-top:28px;gap:12px}
.px-sp .acts .btn:not(.ghost),.px-se .px-box>.btn:not(.ghost){background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#7c5cff);box-shadow:0 12px 22px -8px rgba(37,99,235,.6)}
.px-sp .btn{border-radius:13px}
.px-sp .row2{gap:18px}

/* webhooks */
.px-wh .ep-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:14px;padding:20px 22px 20px 26px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln);position:relative;transition:transform .2s,box-shadow .2s}
.px-wh .ep-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#34d399,#059669)}
.px-wh .ep-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #bcd0ff,0 16px 28px -20px rgba(37,99,235,.55)}
.px-wh .ep-url{margin-top:10px;padding:9px 12px;border-radius:10px;background:#f4f7ff;box-shadow:0 0 0 1px var(--ln) inset;font:600 12.5px ui-monospace,Menlo,monospace;color:var(--a2);overflow-wrap:anywhere}
.px-wh .ep-acts{display:flex;gap:8px;flex-wrap:wrap}
.px-wh .wh{margin-top:14px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln);transition:box-shadow .2s,transform .2s}
.px-wh .wh:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #bcd0ff,0 14px 26px -20px rgba(37,99,235,.5)}
.px-wh .modal-card{border-radius:24px}

/* branding */
.px-br .sws{gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.px-br .sw{width:36px;height:36px;border:3px solid #fff;box-shadow:0 0 0 1px var(--ln),0 8px 14px -6px rgba(10,18,38,.35);transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s}
.px-br .sw:hover{transform:scale(1.18) translateY(-2px)}
.px-br input[type=color]{width:100%;height:54px!important;padding:6px!important;border-radius:14px;cursor:pointer}
.px-br input[type=file]{padding:12px;border-radius:13px;border:1.5px dashed #bcd0ff;background:#f8faff}
.px-br #brpv{margin:4px 0 8px;padding:22px;border-radius:20px;background:radial-gradient(rgba(47,91,255,.1) 1px,transparent 1.3px) 0 0/18px 18px,#f4f7ff;box-shadow:0 0 0 1px var(--ln) inset}

/* settings */
.px-se .px-box>.btn.ghost.sm{margin-top:26px}
.px-se #tg_btn_off{color:var(--bad)}
@media(max-width:760px){.px-sp .px-box{padding:22px 18px 24px;margin-bottom:18px}.px-sp .two{gap:18px}.px-sp .top{margin-bottom:26px}}


/* ================= Premium: Admin Control Center ================= */
.px-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px;padding:30px 32px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#0b1437,#16226a 55%,#3b1d8f);box-shadow:0 34px 70px -34px rgba(11,20,55,.85);animation:kxin .6s backwards}
.px-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 240px at 92% -10%,rgba(47,91,255,.6),transparent 60%),radial-gradient(420px 240px at 0 120%,rgba(236,72,153,.35),transparent 60%),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/22px 22px}
.px-hero::after{content:"";position:absolute;left:-60%;top:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.1),transparent);transform:skewX(-20deg);animation:sheen 6s 1s ease-in-out infinite}
@keyframes sheen{0%{left:-60%}40%,100%{left:130%}}
.px-hero-l{position:relative;z-index:1;display:flex;align-items:center;gap:18px;min-width:0}
.px-hero h2{margin:0 0 5px;font-size:28px;letter-spacing:-.9px;color:#fff}
.px-hero p{margin:0;font-size:14px;color:#aab8ee;max-width:520px;line-height:1.55}
.px-shield{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:19px;color:#fff;background:linear-gradient(145deg,#60a5fa,#7c3aed);box-shadow:0 16px 28px -10px rgba(124,58,237,.8),0 0 0 1px rgba(255,255,255,.25) inset;animation:pxfl 4s ease-in-out infinite}
.px-shield svg{width:30px;height:30px}
@keyframes pxfl{50%{transform:translateY(-5px)}}
.px-hero-r{position:relative;z-index:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.px-on{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:700;color:#86efac;background:rgba(16,185,129,.14);box-shadow:0 0 0 1px rgba(134,239,172,.3)}
.px-on i{position:relative;width:8px;height:8px;border-radius:50%;background:#34d399}.px-on i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#34d399;animation:ping 1.6s ease-out infinite}
.px-master{padding:8px 16px;border-radius:99px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444 60%,#ec4899);box-shadow:0 10px 20px -8px rgba(239,68,68,.7)}

.px-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:24px;padding:6px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 12px 28px -22px rgba(31,67,214,.4);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.px-tabs::-webkit-scrollbar{display:none}
.px-tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border:0;border-radius:13px;background:transparent;font:700 13.5px inherit;font-family:inherit;color:var(--mu);cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.px-tabs button svg{width:17px;height:17px}
.px-tabs button:hover{background:#f1f5ff;color:var(--a2)}
.px-tabs button.on{color:#fff;background:linear-gradient(135deg,#2f5bff,#7c5cff);box-shadow:0 10px 18px -8px rgba(79,70,229,.75)}

/* colourful stat cards (admin) */
.px-ad .grid.g5{gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.px-ad .box.stat{position:relative;overflow:hidden;padding:20px 20px 22px;border-radius:20px;animation:kxin .55s backwards}
.px-ad .box.stat::after{opacity:1;height:4px;background:var(--sc,#2563eb)}
.px-ad .box.stat::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-44px;top:-52px;background:var(--sc,#2563eb);opacity:.12}
.px-ad .box.stat .v{color:var(--sc,#2563eb);position:relative}
.px-ad .g5>.stat:nth-child(1){--sc:#10b981}.px-ad .g5>.stat:nth-child(2){--sc:#2563eb;animation-delay:.05s}.px-ad .g5>.stat:nth-child(3){--sc:#7c3aed;animation-delay:.1s}.px-ad .g5>.stat:nth-child(4){--sc:#ef4444;animation-delay:.15s}.px-ad .g5>.stat:nth-child(5){--sc:#f59e0b;animation-delay:.2s}.px-ad .g5>.stat:nth-child(6){--sc:#0891b2;animation-delay:.25s}.px-ad .g5>.stat:nth-child(7){--sc:#ec4899;animation-delay:.3s}
.px-ad .box.stat:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--sc),0 22px 38px -22px var(--sc)}

/* roomy boxes + rows */
.px-ad .box{padding:28px;margin-bottom:22px;border-radius:22px;box-shadow:0 0 0 1px var(--ln),0 18px 40px -28px rgba(31,67,214,.35)}
.px-ad .box.stat{padding:20px 20px 22px;margin-bottom:0}
.px-ad .box h3{font-size:18px}
.px-ad .box>input#ad_q,.px-ad input,.px-ad select,.px-ad textarea{border-radius:12px}
.px-ad .box>input#ad_q{padding:15px 18px;background:#f4f7ff;border-color:transparent;box-shadow:0 0 0 1px var(--ln) inset}
.px-ad .usr{margin:10px 0 0;padding:18px 20px;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--ln);transition:transform .2s,box-shadow .2s}
.px-ad .usr:first-child{padding-top:18px;margin-top:0}
.px-ad .usr:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #bcd0ff,0 16px 28px -20px rgba(37,99,235,.55)}
.px-ad .mg{border-radius:16px}
.px-ad .btn:not(.ghost){background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#7c5cff);box-shadow:0 10px 20px -8px rgba(37,99,235,.55)}
.px-ad .btn{border-radius:12px}
.px-ad .btn.dg{background:#fff1f2!important;color:#b91c1c;box-shadow:0 0 0 1px #fecdd3!important}
.px-ad .note{border-radius:14px}
@media(max-width:760px){.px-hero{padding:22px 20px;border-radius:22px}.px-hero h2{font-size:22px}.px-shield{width:50px;height:50px;border-radius:16px}.px-ad .box{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.px-hero,.px-shield,.px-hero::after,.px-ad .box.stat{animation:none!important}}

/* no cursor ring */
.fx-ring{display:none!important}


/* ================= Premium: Sidebar / app shell (DARK BLUE) ================= */
.vin>.top h2{letter-spacing:-.04em}
.nav a{border-radius:14px;position:relative}
.nav a .i{transition:transform .3s cubic-bezier(.2,1.5,.4,1),color .2s}
@media(min-width:861px){
 .side{padding:24px 16px 20px;border:0;color:#fff;
  background:radial-gradient(360px 280px at -10% -6%,rgba(59,130,246,.42),transparent 65%),radial-gradient(340px 300px at 110% 108%,rgba(124,92,255,.38),transparent 65%),radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(185deg,#0d1a52 0%,#0a1338 55%,#070e2b 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.06),22px 0 50px -26px rgba(7,14,43,.7);scrollbar-color:#2a3a6b transparent}
 .side::-webkit-scrollbar-thumb{background:#2a3a6b}
 .side .brand{margin-bottom:16px;padding:2px 8px 20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}
 .side .brand img{border-radius:12px;box-shadow:0 10px 22px -8px rgba(59,130,246,.9),0 0 0 1px rgba(255,255,255,.15)}
 .side .brand small{color:#8fa3d6}
 .nav{gap:5px}
 .nav a{padding:12px 15px;color:#9db0dc;font-weight:600;transition:background .22s,color .22s,transform .22s,box-shadow .22s}
 .nav a .i{color:#7188c4;stroke:currentColor}
 .nav a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(4px)}
 .nav a:hover .i{color:#bcd0ff;transform:scale(1.15) rotate(-6deg)}
 .nav a.on{color:#fff;font-weight:700;background:linear-gradient(135deg,#3b6bff 0%,#4f5cff 55%,#7c5cff 100%);box-shadow:0 14px 26px -10px rgba(79,110,255,.85),inset 0 1px 0 rgba(255,255,255,.28)}
 .nav a.on::before{display:none}
 .nav a.on .i{color:#fff;transform:none}
 .nav a.on::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;opacity:.9}
 .me{margin:auto 0 0;padding:12px;border:0;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 .me b{color:#fff}.me small{color:#8fa3d6}
 .me button{color:#8fa3d6;border-radius:10px;transition:background .2s,color .2s}
 .me button:hover{background:rgba(239,68,68,.18);color:#fda4af}
 .av{border-radius:13px;background:linear-gradient(135deg,#60a5fa,#7c3aed);box-shadow:0 8px 16px -6px rgba(124,58,237,.8)}
}

/* ================= Premium: roomy boxes on Feedback / Referral / Reseller / Support ================= */
.px-sp .box:not(.stat){padding:30px;margin-bottom:26px;border-radius:22px;box-shadow:0 0 0 1px var(--ln),0 18px 40px -28px rgba(31,67,214,.35);animation:kxin .55s backwards}
.px-sp .box.stat{position:relative;overflow:hidden;padding:22px;border-radius:22px;animation:kxin .55s backwards;box-shadow:0 0 0 1px var(--ln),0 16px 30px -22px rgba(31,67,214,.35)}
.px-sp .box.stat::before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-48px;top:-56px;background:var(--sc,#2563eb);opacity:.12}
.px-sp .box.stat .v{color:var(--sc,#2563eb);position:relative}
.px-sp .grid>.stat:nth-child(1){--sc:#10b981}.px-sp .grid>.stat:nth-child(2){--sc:#2563eb}.px-sp .grid>.stat:nth-child(3){--sc:#7c3aed}.px-sp .grid>.stat:nth-child(4){--sc:#f59e0b}
.px-sp .box.stat:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--sc),0 22px 38px -22px var(--sc)}
.px-sp textarea.fbt{border-radius:14px;padding:16px;background:#f8faff;min-height:150px}
.px-sp .step{border-radius:16px}
.px-sp .sup{position:relative;border-radius:18px;transition:transform .2s,box-shadow .2s}
.px-sp .sup:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #bcd0ff,0 18px 30px -20px rgba(37,99,235,.55)}
.px-sp .sup .ic{border-radius:14px;box-shadow:0 10px 18px -8px rgba(37,99,235,.5)}
.px-sp .seg{padding:5px;border-radius:15px;background:#f1f4fb;box-shadow:0 0 0 1px var(--ln) inset}
.px-sp .seg button{border-radius:11px}
.px-sp .seg button.on{color:#fff;background:linear-gradient(135deg,#2f5bff,#7c5cff);box-shadow:0 8px 14px -6px rgba(79,70,229,.7)}
.px-fb,.px-rf,.px-rs,.px-sup{display:block}
.px-sp .box.lock{background:linear-gradient(135deg,#f4f0ff,#eef4ff)}

/* ================= Premium: Login / Signup ================= */
.auth{background:#fff}
.ap{position:relative;overflow:hidden;background:linear-gradient(150deg,#0b1437,#16226a 55%,#3b1d8f)!important}
.ap::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 320px at 100% 0,rgba(47,91,255,.6),transparent 62%),radial-gradient(460px 320px at 0 100%,rgba(236,72,153,.38),transparent 62%),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/24px 24px!important;pointer-events:none}
.ap::after{content:"";position:absolute;width:420px;height:420px;right:-130px;bottom:-110px;opacity:.16;pointer-events:none;background:conic-gradient(from 0deg,#7ba0ff,#c4a8ff,#ff9ad0,#7ba0ff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 90,27 90,73 50,96 10,73 10,27' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:spinHex 40s linear infinite}
@keyframes spinHex{to{transform:rotate(360deg)}}
.ap>*{position:relative;z-index:1}
.ap h1 .gx{background:linear-gradient(100deg,#7ba0ff,#c4a8ff 50%,#ff9ad0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ap li{padding:12px 16px;border-radius:15px;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s,background .25s}
.ap li:hover{transform:translateX(6px);background:rgba(255,255,255,.12)}
.ap li::before{background:linear-gradient(135deg,#34d399,#059669)!important}
.ap .brand img{border-radius:12px;box-shadow:0 10px 20px -8px rgba(47,91,255,.7)}
.pane{background:radial-gradient(rgba(47,91,255,.09) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(#fff,#f4f7ff)!important}
.pane .card{max-width:440px;padding:38px 36px 32px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 40px 80px -34px rgba(31,67,214,.45)}
.pane .card h2{font-size:30px;letter-spacing:-.04em}
.pane .tabs{padding:5px;border-radius:15px;background:#f1f4fb;box-shadow:0 0 0 1px var(--ln) inset}
.pane .tabs button{border-radius:11px}
.pane .tabs button.on{color:#fff;background:linear-gradient(135deg,#2f5bff,#7c5cff);box-shadow:0 8px 14px -6px rgba(79,70,229,.7)}
.pane input{padding:14px 16px;border-radius:13px;background:#f8faff;border-color:#e3e8f3}
.pane input:focus{background:#fff;border-color:#7ba0ff;box-shadow:0 0 0 4px rgba(47,91,255,.14)}
.pane .btn:not(.ghost){width:100%;margin-top:18px;padding:15px;border-radius:14px;font-size:15px;background:linear-gradient(135deg,#3b6bff,#2f5bff 50%,#7c5cff);box-shadow:0 14px 26px -10px rgba(47,91,255,.75);transition:transform .25s,box-shadow .25s}
.pane .btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:0 20px 32px -10px rgba(47,91,255,.8)}
.pane .btn.ghost{border-radius:14px;padding:13px}
.pane .back{transition:transform .2s,color .2s}.pane .back:hover{transform:translateX(-3px)}
@media(max-width:900px){.pane .card{padding:28px 22px 24px;border-radius:24px}.ap::after{width:260px;height:260px;right:-90px;bottom:-60px}}
@media(prefers-reduced-motion:reduce){.ap::after,.px-sp .box,.px-sp .box.stat{animation:none!important}}