/* =====================================================================
   Seva Portal — Stylesheet v4.0 "Vibrant Pro"
   One file for every page (public, retailer, admin). Class names are the
   same as v2, so no PHP change is needed — only the look changes.
   ===================================================================== */
:root{
  /* surfaces */
  --bg:#f4f5fb; --card:#ffffff; --ink:#151432; --muted:#676a86; --line:#e6e7f2;
  /* brand: indigo → violet → pink */
  --primary:#5145e5; --primary-dark:#3b2fc4; --primary-soft:#eeedff;
  --accent:#ff7a1a; --accent-soft:#fff1e6;
  --pink:#ec4899; --pink-soft:#fde7f3;
  --violet:#8b5cf6; --violet-soft:#f3edff;
  --cyan:#06b6d4; --cyan-soft:#e2f8fc;
  /* status */
  --danger:#e11d48; --danger-soft:#ffe8ee;
  --amber:#b45309; --amber-soft:#fff3d6;
  --blue:#2563eb; --blue-soft:#e6efff;
  --green:#059669; --green-soft:#ddf7ec;
  --gray-soft:#f0f1f7;
  /* gradients */
  --grad:linear-gradient(135deg,#5145e5 0%,#8b5cf6 55%,#ec4899 100%);
  --grad-warm:linear-gradient(135deg,#ff7a1a 0%,#ec4899 100%);
  --grad-cool:linear-gradient(135deg,#06b6d4 0%,#5145e5 100%);
  --grad-green:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
  --grad-dark:linear-gradient(180deg,#1b1846 0%,#2a2470 55%,#3a1f6e 100%);
  /* shape */
  --radius:16px;
  --shadow:0 1px 2px rgba(30,27,75,.05),0 8px 24px rgba(30,27,75,.07);
  --shadow-lg:0 18px 50px rgba(49,46,129,.18);
  --sidebar:248px; --topbar:64px; --bottomnav:66px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Mukta',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 100% -10%,rgba(139,92,246,.10),transparent 60%),
    radial-gradient(800px 500px at -10% 110%,rgba(6,182,212,.08),transparent 60%),
    radial-gradient(700px 400px at 50% 50%,rgba(236,72,153,.04),transparent 70%),
    var(--bg);
  background-attachment:fixed}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3{line-height:1.25;margin:0 0 .6em;letter-spacing:-.015em}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--violet-soft);color:#5b21b6;padding:.1rem .35rem;border-radius:6px}
::selection{background:#c7c3ff;color:#151432}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}
.nowrap{white-space:nowrap}
.hidden{display:none!important}
:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid transparent;border-radius:12px;padding:.64rem 1.15rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none!important;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,filter .15s;white-space:nowrap;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);background-size:140% 140%;color:#fff;box-shadow:0 6px 18px rgba(81,69,229,.28)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(81,69,229,.36);transform:translateY(-1px)}
.btn-accent{background:var(--grad-warm);color:#fff;box-shadow:0 6px 18px rgba(255,122,26,.3)}
.btn-accent:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;box-shadow:0 6px 16px rgba(225,29,72,.25)}
.btn-danger:hover{filter:brightness(1.05)}
.btn-success{background:var(--grad-green);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,.25)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--primary-soft);border-color:#c9c5ff;color:var(--primary)}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(4px)}
.btn-light:hover{background:rgba(255,255,255,.28)}
.btn-sm{padding:.4rem .78rem;font-size:.85rem;border-radius:10px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none}

/* ---------- Forms ---------- */
label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35rem;color:#2a2850}
.req::after{content:" *";color:var(--pink)}
input[type=text],input[type=search],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=file],select,textarea{
  width:100%;padding:.65rem .85rem;border:1.5px solid #dcdcee;border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--ink);min-height:46px;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:#c4c2e6}
input[type=file]{padding:.5rem;font-size:14px;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px dashed #c4c2e6}
input[type=file]::file-selector-button{border:0;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-weight:700;padding:.4rem .8rem;margin-right:.7rem;cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(81,69,229,.14)}
input:disabled{background:var(--gray-soft);color:var(--muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:500;font-size:.92rem}
.check input{margin-top:.25rem;width:18px;height:18px;flex-shrink:0}
.field{margin-bottom:1rem}
.hint{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.grid{display:grid;gap:0 1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:1/-1}
.section-title{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;font-weight:800;margin:.6rem 0 1rem;color:var(--ink);padding-bottom:.55rem;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#c7c3ff,#f9c6e4,transparent) 1}
.section-title .num{width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.8rem;box-shadow:0 4px 10px rgba(81,69,229,.3)}

/* ---------- Alerts / badges ---------- */
.alert{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:14px;margin-bottom:1rem;border:1px solid transparent;font-size:.93rem;position:relative;overflow:hidden}
.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.alert > div{flex:1;min-width:0}
.alert-ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.78rem;flex-shrink:0;color:#fff}
.alert-success .alert-ico{background:var(--grad-green)}.alert-danger .alert-ico{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.alert-warning .alert-ico{background:var(--grad-warm)}.alert-info .alert-ico{background:var(--grad-cool)}
.err-list{margin:.35rem 0 0;padding-left:1.1rem}.err-list li{margin:.1rem 0}
.alert-success{background:var(--green-soft);color:#047857;border-color:#b7ecd6}.alert-success::before{background:var(--grad-green)}
.alert-danger{background:var(--danger-soft);color:#be123c;border-color:#fecdd8}.alert-danger::before{background:linear-gradient(#f43f5e,#e11d48)}
.alert-warning{background:var(--amber-soft);color:#92400e;border-color:#fde3a7}.alert-warning::before{background:var(--grad-warm)}
.alert-info{background:var(--blue-soft);color:#1d4ed8;border-color:#c9dbff}.alert-info::before{background:var(--grad-cool)}
.badge{display:inline-flex;align-items:center;gap:.32rem;padding:.2rem .65rem;border-radius:99px;font-size:.75rem;font-weight:800;white-space:nowrap;letter-spacing:.01em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.badge-amber{background:var(--amber-soft);color:#b45309}
.badge-blue{background:var(--blue-soft);color:#1d4ed8}
.badge-green{background:var(--green-soft);color:#047857}
.badge-red{background:var(--danger-soft);color:#be123c}
.badge-gray{background:var(--gray-soft);color:var(--muted)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin-bottom:1.2rem;position:relative}
.card h2{font-size:1.08rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.card-head h2{margin:0;display:flex;align-items:center;gap:.5rem}
.card-head h2::before{content:"";width:6px;height:20px;border-radius:4px;background:var(--grad);flex-shrink:0}
.card-flush{padding:0;overflow:hidden}
.card-flush .card-head{padding:1.15rem 1.35rem 0}

/* ---------- Stats (each card gets its own colour) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.95rem;margin-bottom:1.2rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem 1rem 1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.2rem;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--primary-soft);opacity:.7}
.stats > .stat:nth-child(6n+2)::before{background:var(--grad-warm)}  .stats > .stat:nth-child(6n+2)::after{background:var(--accent-soft)}
.stats > .stat:nth-child(6n+3)::before{background:var(--grad-green)} .stats > .stat:nth-child(6n+3)::after{background:var(--green-soft)}
.stats > .stat:nth-child(6n+4)::before{background:var(--grad-cool)}  .stats > .stat:nth-child(6n+4)::after{background:var(--cyan-soft)}
.stats > .stat:nth-child(6n+5)::before{background:linear-gradient(#ec4899,#8b5cf6)} .stats > .stat:nth-child(6n+5)::after{background:var(--pink-soft)}
.stats > .stat:nth-child(6n)::before{background:linear-gradient(#f59e0b,#ef4444)} .stats > .stat:nth-child(6n)::after{background:var(--amber-soft)}
.stat > *{position:relative;z-index:1}
.stat .lbl{color:var(--muted);font-size:.82rem;font-weight:700}
.stat .val{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.stat .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;margin-bottom:.35rem}
.ico-amber{background:linear-gradient(135deg,#fff3d6,#ffe2b8);color:#b45309}
.ico-blue{background:linear-gradient(135deg,#e6efff,#d3e2ff);color:#1d4ed8}
.ico-green{background:linear-gradient(135deg,#ddf7ec,#c4f0dd);color:#047857}
.ico-red{background:linear-gradient(135deg,#ffe8ee,#ffd1dc);color:#be123c}
.ico-teal{background:linear-gradient(135deg,#eeedff,#e2dcff);color:var(--primary)}

/* ---------- Welcome / wallet hero ---------- */
.welcome{background:var(--grad);color:#fff;border-radius:22px;padding:1.5rem 1.6rem;margin-bottom:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.welcome::before{content:"";position:absolute;left:-60px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}
.welcome::after{content:"";position:absolute;right:-50px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.35),transparent 70%)}
.welcome > *{position:relative;z-index:1}
.welcome .hello{font-size:.9rem;color:#e7e4ff}
.welcome .name{font-size:1.4rem;font-weight:800;margin:.1rem 0 .2rem}
.welcome .bal-lbl{font-size:.78rem;color:#ece9ff;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.welcome .bal{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.15)}
.welcome .actions{position:relative;z-index:1}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:.95rem;margin-bottom:1.2rem}
.quick a{display:flex;align-items:center;gap:.95rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.15rem;box-shadow:var(--shadow);color:var(--ink);text-decoration:none!important;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.quick a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.quick a:hover{border-color:#c9c5ff;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.quick a:hover::after{transform:scaleX(1)}
.quick .qi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.quick b{display:block}
.quick strong{display:inline}
.quick .price{color:var(--primary);font-weight:800;font-size:.9rem}
.notice-bar{display:flex;gap:.6rem;align-items:flex-start;background:linear-gradient(90deg,#fff1e6,#fde7f3);color:#9a3412;border:1px solid #fcd3b6;border-radius:14px;padding:.75rem 1rem;margin-bottom:1.2rem;font-size:.92rem}

/* ---------- Tables (become cards on mobile) ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.75rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:linear-gradient(180deg,#f8f7ff,#f3f2ff);font-weight:800;color:#5b5a86;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
tbody tr{transition:background .12s}
tbody tr:hover td{background:#faf9ff}
tbody tr:last-child td{border-bottom:0}
.empty{text-align:center;color:var(--muted);padding:2.4rem 1rem!important}
.cell-main{font-weight:700}
.cell-sub{color:var(--muted);font-size:.8rem}

.kv{display:grid;grid-template-columns:160px 1fr;gap:.6rem 1rem;margin:0}
.kv dt{color:var(--muted);font-size:.88rem}
.kv dd{margin:0;font-weight:700;word-break:break-word}
.filters{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.filters .field{margin:0;flex:1 1 160px}
.filters .btns{display:flex;gap:.5rem}
.pager{display:flex;gap:.35rem;margin-top:1rem;flex-wrap:wrap;padding:0 1rem 1rem;align-items:center}
.pager a,.pager span{min-width:38px;text-align:center;padding:.38rem .72rem;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.88rem;font-weight:700}
.pager a:hover{border-color:#c9c5ff;background:var(--primary-soft);text-decoration:none}
.pager .disabled{color:#b8b9cc}
.pager .pager-info{border:0;background:none;color:var(--muted);margin-left:auto;font-weight:600}
.pager .current{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(81,69,229,.3)}
.link{font-weight:800}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:.45rem;overflow-x:auto;margin-bottom:1rem;padding:2px 2px 4px;scrollbar-width:thin}
.tabs a{padding:.48rem .95rem;border-radius:99px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:.88rem;white-space:nowrap;text-decoration:none!important;transition:.15s}
.tabs a:hover{border-color:#c9c5ff;color:var(--primary)}
.tabs a.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(81,69,229,.28)}

/* ---------- Panel layout ---------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.8rem;padding:0 1.2rem}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#5145e5,#8b5cf6,#ec4899,#ff7a1a,#06b6d4,#5145e5);background-size:200% 100%;animation:barflow 12s linear infinite}
@keyframes barflow{to{background-position:200% 0}}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;color:var(--ink);text-decoration:none!important;min-width:0}
.brand span.txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.05rem;flex-shrink:0;box-shadow:0 6px 16px rgba(81,69,229,.35)}
.tag{font-size:.62rem;background:var(--grad-warm);color:#fff;padding:.14rem .5rem;border-radius:6px;letter-spacing:.08em;font-weight:800}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.wallet-chip{display:flex;align-items:center;gap:.35rem;background:var(--grad-green);color:#fff;font-weight:800;padding:.4rem .9rem;border-radius:99px;text-decoration:none!important;font-size:.9rem;white-space:nowrap;box-shadow:0 6px 16px rgba(16,185,129,.28)}
.wallet-chip:hover{filter:brightness(1.05)}
.avatar{width:36px;height:36px;border-radius:12px;background:var(--grad-warm);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 4px 12px rgba(236,72,153,.28)}
.user-name{font-weight:700;font-size:.9rem}
.menu-btn{display:none;background:var(--primary-soft);border:0;font-size:1.25rem;cursor:pointer;padding:.25rem .55rem;color:var(--primary);border-radius:10px}
.layout{display:flex;min-height:calc(100vh - var(--topbar))}

/* dark colourful sidebar */
.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--grad-dark);padding:1rem .8rem;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4b4690 transparent}
.sidebar::before{content:"";position:sticky;display:block;top:0}
.sidebar .grp{font-size:.68rem;font-weight:800;color:#a5a3e6;text-transform:uppercase;letter-spacing:.12em;padding:.9rem .8rem .45rem}
.sidebar a{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:12px;color:#dcdbff;font-weight:600;font-size:.92rem;margin-bottom:3px;text-decoration:none!important;transition:background .15s,color .15s,transform .15s}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}
.sidebar a.active{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.18)}
.sidebar .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.95rem;flex-shrink:0;background:rgba(255,255,255,.08);color:#fff}
.sidebar a:nth-of-type(6n+1) .ico{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.sidebar a:nth-of-type(6n+2) .ico{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.sidebar a:nth-of-type(6n+3) .ico{background:linear-gradient(135deg,#f59e0b,#ff7a1a)}
.sidebar a:nth-of-type(6n+4) .ico{background:linear-gradient(135deg,#10b981,#06b6d4)}
.sidebar a:nth-of-type(6n+5) .ico{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
.sidebar a:nth-of-type(6n) .ico{background:linear-gradient(135deg,#a855f7,#ec4899)}
.sidebar a.active .ico{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.sidebar .count{margin-left:auto;background:var(--grad-warm);color:#fff;font-size:.7rem;border-radius:99px;padding:.05rem .5rem;font-weight:800;box-shadow:0 3px 10px rgba(236,72,153,.4)}
.content{flex:1;min-width:0;padding:1.6rem 1.8rem 2.6rem;max-width:1260px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem}
.page-title{font-size:1.5rem;margin:0;font-weight:800;background:linear-gradient(90deg,#1b1846,#5145e5 60%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-footer{text-align:center;font-size:.78rem;color:var(--muted);padding:1rem;border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.nav-backdrop{display:none}
.bottom-nav{display:none}

/* ---------- Public pages ---------- */
.pub-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1.5rem;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.pub-nav nav{display:flex;gap:.5rem}
.hero{background:linear-gradient(135deg,#1b1846 0%,#3b2fc4 40%,#8b5cf6 75%,#ec4899 100%);color:#fff;padding:4.4rem 1.5rem 4.8rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.45),transparent 65%);right:-140px;bottom:-220px}
.hero::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.35),transparent 65%);left:-140px;top:-160px}
.hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:.32rem .85rem;border-radius:99px;font-size:.8rem;font-weight:800;margin-bottom:1rem;backdrop-filter:blur(4px)}
.hero h1{font-size:2.7rem;margin-bottom:.7rem;font-weight:800;letter-spacing:-.03em}
.hero p{font-size:1.08rem;color:#e6e3ff;max-width:560px}
.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:1.4rem 1.5rem;backdrop-filter:blur(8px);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.hero-card ul{list-style:none;padding:0;margin:0}
.hero-card li{padding:.58rem 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:.6rem}
.hero-card li:last-child{border:0}
.hero-card li::before{content:"✓";width:22px;height:22px;border-radius:7px;background:var(--grad-warm);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.75rem;flex-shrink:0}
.section{max-width:1120px;margin:0 auto;padding:3.3rem 1.5rem}
.section h2{font-size:1.8rem;text-align:center;margin-bottom:.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section .sub{text-align:center;color:var(--muted);margin-bottom:2rem}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.svc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.6rem;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.svc-grid > .svc:nth-child(3n+2)::before{background:var(--grad-warm)}
.svc-grid > .svc:nth-child(3n)::before{background:var(--grad-green)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.svc .qi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.45rem;margin-bottom:.9rem}
.svc .price{font-size:1.7rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:.75rem;box-shadow:0 6px 14px rgba(81,69,229,.3)}
.steps > .step:nth-child(4n+2)::before{background:var(--grad-warm)}
.steps > .step:nth-child(4n+3)::before{background:var(--grad-green)}
.steps > .step:nth-child(4n)::before{background:var(--grad-cool)}
.step p{margin:.3rem 0 0}
.pub-footer{text-align:center;padding:1.6rem 1rem;border-top:1px solid var(--line);background:#fff;font-size:.85rem}
.pub-footer p{margin:.25rem 0}
.auth-wrap{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:2rem 1rem;
  background:radial-gradient(600px 300px at 20% 10%,rgba(139,92,246,.18),transparent 60%),radial-gradient(600px 300px at 90% 90%,rgba(236,72,153,.14),transparent 60%)}
.auth-card{width:100%;max-width:440px;padding:1.9rem;border-radius:22px;box-shadow:var(--shadow-lg);border:1px solid #e3e1fb}
.auth-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:22px 22px 0 0;background:var(--grad)}
.auth-card.wide{max-width:680px}
.auth-card h1{font-size:1.5rem;text-align:center;margin-bottom:.3rem}
.auth-card .sub{text-align:center;color:var(--muted);margin:0 0 1.4rem;font-size:.92rem}

/* ---------- Wallet / apply ---------- */
.qr-box{text-align:center;border:2px dashed #c9c5ff;border-radius:var(--radius);padding:1.2rem;background:linear-gradient(180deg,#fbfaff,#fff)}
.qr-box img{width:210px;height:210px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid var(--line)}
.upi-id{font-weight:800;font-size:1.05rem;word-break:break-all}
.amount-in{color:var(--green);font-weight:800}
.amount-out{color:var(--danger);font-weight:800}
.svc-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:.95rem;margin-bottom:1.4rem}
.svc-pick label{display:flex;gap:.8rem;align-items:flex-start;border:2px solid var(--line);border-radius:16px;padding:1rem;cursor:pointer;font-weight:500;background:#fff;margin:0;transition:border-color .15s,box-shadow .15s,background .15s}
.svc-pick label:hover{border-color:#c9c5ff}
.svc-pick input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--primary)}
.svc-pick label:has(input:checked){border-color:var(--primary);background:linear-gradient(135deg,#f3f2ff,#fdf2fa);box-shadow:0 6px 18px rgba(81,69,229,.15)}
.svc-pick b{font-size:1rem;display:block}
.svc-pick .price{font-weight:800;color:var(--primary)}
.check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-bottom:1.4rem}
.check-chip{display:flex;align-items:center;gap:.55rem;border:1.5px solid var(--line);border-radius:12px;padding:.65rem .8rem;margin:0;font-weight:700;font-size:.9rem;cursor:pointer;background:#fff;transition:.15s}
.check-chip:hover{border-color:#c9c5ff}
.check-chip input{width:18px;height:18px;accent-color:var(--primary);margin:0}
.check-chip:has(input:checked){border-color:var(--primary);background:linear-gradient(135deg,#f3f2ff,#fdf2fa);color:var(--primary)}
.submit-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.15rem;margin-top:.4rem}
.submit-bar .fee{font-size:1.05rem}
.submit-bar .fee b{font-size:1.35rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.status-banner{display:flex;gap:.8rem;align-items:center;padding:1rem 1.1rem;border-radius:14px;margin-bottom:1.1rem}

/* ---------- Hindi helper text ---------- */
.hi{font-family:'Mukta',system-ui,sans-serif;color:var(--muted);font-size:.86rem;font-weight:500;line-height:1.4}
p.hi,div.hi{margin:.15rem 0 0}
.page-title + .hi{margin-top:.2rem;font-size:.92rem}
label .hi{font-weight:500;font-size:.8rem;margin-left:.3rem}
.welcome .hi,.hero .hi,.pc-sum-head .hi{color:#ece9ff}
.card-head .hi{display:block;font-size:.82rem}

/* ---------- Misc ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:.5rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.copy-btn{border:1px solid #d9d6ff;background:#fff;border-radius:8px;padding:.14rem .55rem;font:inherit;font-size:.75rem;font-weight:800;color:var(--primary);cursor:pointer;margin-left:.4rem;vertical-align:middle;transition:.15s}
.copy-btn:hover{background:var(--primary-soft)}
.copy-btn.ok{background:var(--grad-green);color:#fff;border-color:transparent}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.kv dd .mono{font-size:.95rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:1.1rem 0}
.sec-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#6d5ce8;text-transform:uppercase;margin:0 0 .6rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{background:var(--primary-soft);color:var(--primary);font-size:.78rem;font-weight:800;padding:.2rem .65rem;border-radius:99px}
.chip.warn{background:var(--accent-soft);color:#c2410c}
.two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.stack > * + *{margin-top:1.2rem}

/* document thumbnails */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem}
.doc{display:flex;flex-direction:column;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:14px;padding:.7rem;background:linear-gradient(180deg,#fbfaff,#fff);text-decoration:none!important;color:var(--ink);text-align:center;font-size:.82rem;font-weight:800;transition:.15s}
.doc:hover{border-color:#c9c5ff;transform:translateY(-2px);box-shadow:var(--shadow)}
.doc .thumb{width:100%;height:92px;border-radius:10px;background:#fff center/cover no-repeat;border:1px solid var(--line);display:grid;place-items:center;font-size:1.8rem;color:var(--muted)}

/* status timeline */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline li{position:relative;padding:0 0 1.1rem 2.1rem}
.timeline li::before{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline li.done::before{background:linear-gradient(#10b981,#06b6d4)}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #d4d3ea;display:grid;place-items:center;font-size:.65rem;font-weight:800;color:#fff}
.timeline li.done .dot{background:var(--grad-green);border-color:transparent}
.timeline li.now .dot{background:var(--grad-cool);border-color:transparent;box-shadow:0 0 0 4px var(--blue-soft)}
.timeline li.fail .dot{background:linear-gradient(135deg,#f43f5e,#e11d48);border-color:transparent}
.timeline b{display:block;font-size:.92rem}
.timeline span{font-size:.8rem;color:var(--muted)}

/* receipt / result box */
.result-box{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,#ddf7ec,#e2f8fc);border:1px solid #b7ecd6;border-radius:16px;padding:1rem 1.15rem;margin-bottom:1.2rem}
.result-box .big{font-size:1.15rem;font-weight:800;color:#047857}
.reject-box{background:linear-gradient(135deg,#ffe8ee,#fff1e6);border:1px solid #fecdd8;border-radius:16px;padding:1rem 1.15rem;margin-bottom:1.2rem;color:#be123c}

/* password strength */
.strength{height:6px;border-radius:99px;background:var(--gray-soft);margin-top:.4rem;overflow:hidden}
.strength i{display:block;height:100%;width:0;background:var(--danger);transition:width .2s,background .2s}

/* tab counters */
.tabs a .n{display:inline-block;margin-left:.35rem;background:var(--primary-soft);color:var(--primary);border-radius:99px;padding:0 .48rem;font-size:.74rem;font-weight:800}
.tabs a.on .n{background:rgba(255,255,255,.28);color:#fff}

/* ================= Responsive ================= */
@media (max-width:1000px){
  .two-col{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .check-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:15px}
  :root{--topbar:58px}
  .topbar{padding:0 .8rem;gap:.5rem}
  .menu-btn{display:block}
  .user-name,.avatar{display:none}
  .topbar .btn-logout{display:none}
  .sidebar{position:fixed;left:0;top:var(--topbar);z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 20px 40px rgba(0,0,0,.3);height:calc(100vh - var(--topbar));border-radius:0 18px 18px 0}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-backdrop{display:block;position:fixed;inset:var(--topbar) 0 0 0;background:rgba(27,24,70,.45);backdrop-filter:blur(2px);z-index:35}
  .content{padding:1rem .9rem 1.6rem}
  .page-title{font-size:1.25rem}
  .card{padding:1rem;border-radius:14px}
  .card-flush{padding:0}
  .card-flush .card-head{padding:1rem 1rem 0}
  .g2,.g3,.svc-grid,.svc-pick{grid-template-columns:1fr}
  .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span2,.span3{grid-column:auto}
  .kv{grid-template-columns:1fr;gap:.1rem}
  .kv dt{margin-top:.6rem;font-size:.8rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .stat{padding:.85rem .85rem .85rem 1.05rem}
  .stat .val{font-size:1.3rem}
  .welcome{padding:1.2rem;border-radius:18px}
  .welcome .bal{font-size:1.75rem}
  .welcome .actions{width:100%}
  .welcome .actions .btn{flex:1}
  .quick{grid-template-columns:1fr;gap:.65rem}
  .filters .field{flex:1 1 100%}
  .filters .btns{width:100%}
  .filters .btns .btn{flex:1}
  .submit-bar .btn{width:100%}

  /* tables -> stacked colourful cards */
  table.rtable thead{display:none}
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:100%}
  table.rtable tr{border-bottom:1px solid var(--line);padding:.8rem 1rem .8rem 1.15rem;position:relative}
  table.rtable tbody tr::before{content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:4px;border-radius:0 4px 4px 0;background:var(--grad)}
  table.rtable tbody tr:nth-child(4n+2)::before{background:var(--grad-warm)}
  table.rtable tbody tr:nth-child(4n+3)::before{background:var(--grad-green)}
  table.rtable tbody tr:nth-child(4n)::before{background:var(--grad-cool)}
  table.rtable tbody tr:has(td.empty)::before{display:none}
  table.rtable tbody tr:last-child{border-bottom:0}
  table.rtable td{border:0;padding:.24rem 0;display:flex;justify-content:space-between;gap:1rem;text-align:right}
  table.rtable td::before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:700;text-align:left;flex-shrink:0}
  table.rtable td.empty{display:block;text-align:center}
  table.rtable td.empty::before{content:none}
  table.rtable td[data-label=""]::before{content:none}
  table.rtable td.actions-cell{justify-content:flex-end;padding-top:.55rem}
  table.rtable td.actions-cell form{justify-content:flex-end}
  .card-flush .table-wrap{border-top:1px solid var(--line)}

  /* bottom app-style nav (retailer) */
  body.has-bottom-nav{padding-bottom:var(--bottomnav)}
  .bottom-nav{display:flex;position:fixed;left:.5rem;right:.5rem;bottom:.5rem;height:var(--bottomnav);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:20px;z-index:50;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 12px 30px rgba(30,27,75,.18)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.66rem;font-weight:800;text-decoration:none!important}
  .bottom-nav a .bi{font-size:1.15rem;line-height:1}
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav a.active .bi{transform:translateY(-1px)}
  .bottom-nav a.fab .bi{width:46px;height:46px;border-radius:16px;background:var(--grad);color:#fff;display:grid;place-items:center;margin-top:-22px;box-shadow:0 8px 18px rgba(81,69,229,.4);font-size:1.4rem}
  .has-bottom-nav .panel-footer{padding-bottom:calc(1.2rem + .5rem)}
  body.has-bottom-nav{padding-bottom:calc(var(--bottomnav) + .8rem)}

  .hero{padding:2.7rem 1.1rem 3.1rem}
  .hero h1{font-size:1.9rem}
  .steps{grid-template-columns:1fr}
  .pub-nav{padding:.7rem 1rem}
  .pub-nav .btn{padding:.4rem .7rem;font-size:.85rem}
  .section{padding:2.4rem 1.1rem}
  .auth-card{padding:1.35rem}
}

/* ================= Print (receipt) ================= */
@media print{
  .topbar,.sidebar,.bottom-nav,.panel-footer,.no-print,.btn,.nav-backdrop{display:none!important}
  body{background:#fff}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .two-col{grid-template-columns:1fr}
  .print-only{display:block!important}
  .page-title,.brand span.txt,.section h2,.svc .price,.submit-bar .fee b{-webkit-text-fill-color:initial;color:#000;background:none}
}
.print-only{display:none}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
.btn-ghost .spin{border-color:rgba(0,0,0,.2);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:4.2rem}
.pw-eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);border:0;background:var(--primary-soft);color:var(--primary);font:inherit;font-size:.78rem;font-weight:800;border-radius:8px;padding:.3rem .6rem;cursor:pointer}
.svc-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.svc-grid-3{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.35rem}
.checklist li{padding:.48rem .85rem;border-radius:10px;font-weight:700;font-size:.9rem}
.checklist li.ok{background:var(--green-soft);color:#047857}
.checklist li.bad{background:var(--danger-soft);color:#be123c}
.stat-link{color:var(--ink);text-decoration:none!important;transition:border-color .15s,transform .15s,box-shadow .15s}
.stat-link:hover{border-color:#c9c5ff;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sec-head{display:flex;align-items:baseline;gap:.6rem;margin:.2rem 0 .8rem;scroll-margin-top:80px}
.sec-head h2{font-size:1.08rem;margin:0}
.svc-pick .muted,.svc-pick .hi{display:block}
.kv-tight{grid-template-columns:110px 1fr}
.quick-amts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
@media (max-width:760px){table.rtable td:empty{display:none}}
.section-title{flex-wrap:wrap;row-gap:.15rem}
@media (max-width:760px){
  .section-title .hi,.section-title .muted{flex-basis:100%;padding-left:36px;margin:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =====================================================================
   v4.0 "Vibrant Pro" — motion, glow & polish layer (CSS only)
   Rules here only add effects; layout and class names are unchanged.
   Note: no transform / filter / backdrop-filter is ever left on .card or
   .content children, so the fixed pop-ups inside pages keep working.
   ===================================================================== */
:root{
  --glow:0 0 0 1px rgba(129,120,255,.25),0 10px 30px rgba(81,69,229,.18);
  --grad-anim:linear-gradient(120deg,#5145e5,#8b5cf6,#ec4899,#ff7a1a,#8b5cf6,#5145e5);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html{-webkit-tap-highlight-color:transparent}
body{caret-color:var(--primary);text-rendering:optimizeLegibility}

/* ---------- custom scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:#c7c3ff transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(#a5a0ff,#e59ad0);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#7c73ff,#ec4899);background-clip:padding-box;border:2px solid transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);background-clip:padding-box}

/* ---------- page entrance (opacity only — safe for pop-ups) ---------- */
@keyframes vpFade{from{opacity:0}to{opacity:1}}
@keyframes vpUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vpPop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.content > *{animation:vpFade .45s var(--ease) both}
.content > *:nth-child(2){animation-delay:.04s}
.content > *:nth-child(3){animation-delay:.08s}
.content > *:nth-child(4){animation-delay:.12s}
.content > *:nth-child(5){animation-delay:.16s}
.content > *:nth-child(6){animation-delay:.2s}
.content > *:nth-child(n+7){animation-delay:.24s}
.stats > .stat,.quick > a,.svc-grid > .svc,.steps > .step{animation:vpUp .55s var(--ease) both}
.stats > .stat:nth-child(2),.quick > a:nth-child(2),.svc-grid > .svc:nth-child(2),.steps > .step:nth-child(2){animation-delay:.07s}
.stats > .stat:nth-child(3),.quick > a:nth-child(3),.svc-grid > .svc:nth-child(3),.steps > .step:nth-child(3){animation-delay:.14s}
.stats > .stat:nth-child(4),.quick > a:nth-child(4),.steps > .step:nth-child(4){animation-delay:.21s}
.stats > .stat:nth-child(n+5){animation-delay:.28s}

/* ---------- topbar: glass + shadow when the page scrolls ---------- */
.topbar{transition:box-shadow .25s}
@supports (animation-timeline:scroll()){
  @keyframes vpTopShadow{from{box-shadow:none}to{box-shadow:0 10px 30px rgba(30,27,75,.10)}}
  .topbar{animation:vpTopShadow linear both;animation-timeline:scroll(root);animation-range:0 120px}
}
.brand-mark{position:relative;transition:transform .3s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-mark::after{content:"";position:absolute;inset:-3px;border-radius:14px;background:var(--grad-anim);background-size:300% 300%;z-index:-1;opacity:.55;filter:blur(8px);animation:vpFlow 6s linear infinite}
@keyframes vpFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.wallet-chip{position:relative;overflow:hidden}
.wallet-chip::after,.btn-primary::after,.btn-accent::after,.btn-success::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.wallet-chip:hover::after,.btn-primary:hover::after,.btn-accent:hover::after,.btn-success:hover::after{left:130%}
.avatar{transition:transform .2s}
.avatar:hover{transform:rotate(6deg)}

/* ---------- buttons: animated gradient + shine ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:var(--grad-anim);background-size:250% 100%;background-position:0% 50%;transition:background-position .6s var(--ease),transform .15s,box-shadow .2s,filter .15s}
.btn-primary:hover{background-position:60% 50%}
.btn-ghost{box-shadow:0 1px 0 rgba(30,27,75,.04)}
.btn-ghost:hover{box-shadow:var(--glow)}
.btn-danger:hover{box-shadow:0 10px 24px rgba(225,29,72,.32);transform:translateY(-1px)}
.btn .spin{position:relative;z-index:1}
.copy-btn.ok{animation:vpPop .35s var(--ease)}

/* ---------- inputs ---------- */
input[type=text],input[type=search],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  background-image:linear-gradient(#fff,#fff);box-shadow:inset 0 1px 2px rgba(30,27,75,.04)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(81,69,229,.14),0 8px 20px rgba(81,69,229,.10)}
input:not(:placeholder-shown):valid:not([type=search]):not([type=file]){border-color:#cfcbf7}
input::placeholder,textarea::placeholder{color:#a3a5bd}
select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image: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='%235145e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 8px}
select[multiple]{background-image:none;padding-right:.85rem}
input[type=checkbox],input[type=radio]{transition:transform .12s}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.88)}
.check:hover input{filter:drop-shadow(0 0 4px rgba(81,69,229,.35))}
.field:focus-within > label{color:var(--primary)}

/* ---------- cards: colourful glow border on hover (no transform) ---------- */
.card{transition:box-shadow .25s var(--ease),border-color .25s}
.card:hover{box-shadow:0 1px 2px rgba(30,27,75,.05),0 14px 34px rgba(49,46,129,.10);border-color:#dedcf7}
.card-head h2::before{background:var(--grad-anim);background-size:100% 300%;animation:vpBar 5s linear infinite}
@keyframes vpBar{0%{background-position:50% 0%}100%{background-position:50% 300%}}

/* ---------- stats: shine sweep + lift ---------- */
.stat{transition:transform .25s var(--ease),box-shadow .25s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat .val{background:linear-gradient(90deg,#151432,#3b2fc4);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .val.amount-in{background:linear-gradient(90deg,#047857,#06b6d4);-webkit-background-clip:text;background-clip:text}
.stat .ico{transition:transform .3s var(--ease)}
.stat:hover .ico,.quick a:hover .qi,.svc:hover .qi{transform:rotate(-8deg) scale(1.08)}
.quick .qi,.svc .qi{transition:transform .3s var(--ease)}

/* ---------- welcome / hero: living gradient + floating orbs ---------- */
.welcome{background:var(--grad-anim);background-size:300% 300%;animation:vpFlow 18s linear infinite}
.welcome::before{animation:vpFloat 9s ease-in-out infinite}
.welcome::after{animation:vpFloat 11s ease-in-out infinite reverse}
@keyframes vpFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
.hero{background:linear-gradient(135deg,#1b1846,#3b2fc4,#8b5cf6,#ec4899,#3b2fc4,#1b1846);background-size:300% 300%;animation:vpFlow 24s linear infinite}
.hero::before{animation:vpFloat 12s ease-in-out infinite}
.hero::after{animation:vpFloat 14s ease-in-out infinite reverse}
.hero h1{background:linear-gradient(90deg,#fff,#ffe1c7 40%,#ffd1ec 70%,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vpText 8s linear infinite}
@keyframes vpText{to{background-position:200% center}}
.hero-card{transition:transform .4s var(--ease)}
.hero-card:hover{transform:translateY(-4px)}
.svc{transition:transform .25s var(--ease),box-shadow .25s}
.step{transition:transform .25s var(--ease),box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* ---------- sidebar: glowing active rail ---------- */
.sidebar{background:var(--grad-dark),radial-gradient(400px 300px at 0% 0%,rgba(139,92,246,.35),transparent 60%);background-blend-mode:screen}
.sidebar a{position:relative}
.sidebar a.active::before{content:"";position:absolute;left:-.8rem;top:20%;bottom:20%;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#ff7a1a,#ec4899);box-shadow:0 0 12px rgba(236,72,153,.8)}
.sidebar a .ico{transition:transform .25s var(--ease)}
.sidebar a:hover .ico{transform:scale(1.1) rotate(-6deg)}
.sidebar .count{animation:vpPulse 2.4s ease-in-out infinite}
@keyframes vpPulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.55)}50%{box-shadow:0 0 0 6px rgba(236,72,153,0)}}

/* ---------- tabs ---------- */
.tabs a{transition:transform .15s,box-shadow .2s,border-color .15s,color .15s}
.tabs a:hover{transform:translateY(-1px)}
.tabs a.on{background:var(--grad-anim);background-size:250% 100%;animation:vpFlow 10s linear infinite}

/* ---------- tables ---------- */
tbody tr td:first-child{position:relative}
tbody tr:hover td{background:linear-gradient(90deg,#f6f4ff,#fdf7fc)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #8b5cf6}
th:first-child{border-top-left-radius:0}

/* ---------- badges: live dot for work in progress ---------- */
.badge-amber::before,.badge-blue::before{animation:vpDot 1.6s ease-in-out infinite}
@keyframes vpDot{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 4px transparent}}
.badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* ---------- alerts / flash ---------- */
.alert{animation:vpUp .45s var(--ease) both}
.alert-success .alert-ico{animation:vpPop .5s .1s var(--ease) both}
.notice-bar{background-size:200% 100%;animation:vpFlow 14s linear infinite;background-image:linear-gradient(90deg,#fff1e6,#fde7f3,#efeaff,#fff1e6)}

/* ---------- pager ---------- */
.pager a{transition:transform .15s,background .15s,border-color .15s}
.pager a:hover{transform:translateY(-1px)}

/* ---------- timeline ---------- */
.timeline li.now .dot{animation:vpDot 1.6s ease-in-out infinite;color:#fff}

/* ---------- section titles & helper text ---------- */
.section-title .num{transition:transform .25s var(--ease)}
.section-title:hover .num{transform:rotate(-10deg) scale(1.08)}
.sec-label{background:linear-gradient(90deg,#5145e5,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ---------- auth pages ---------- */
.auth-card{animation:vpUp .55s var(--ease) both}
.auth-wrap{background-size:200% 200%;animation:vpAuth 16s ease-in-out infinite alternate}
@keyframes vpAuth{from{background-position:0% 0%}to{background-position:100% 100%}}

/* ---------- QR / docs ---------- */
.qr-box{transition:border-color .2s,box-shadow .2s}
.qr-box:hover{border-color:#8b5cf6;box-shadow:var(--glow)}
.qr-box img{box-shadow:0 10px 30px rgba(81,69,229,.18)}

/* ---------- mobile polish ---------- */
@media (max-width:760px){
  .bottom-nav a{position:relative;transition:color .15s}
  .bottom-nav a.active::after{content:"";position:absolute;bottom:7px;width:18px;height:3px;border-radius:99px;background:var(--grad)}
  .bottom-nav a.fab.active::after{display:none}
  .bottom-nav a.fab .bi{animation:vpFab 3s ease-in-out infinite}
  @keyframes vpFab{0%,100%{box-shadow:0 8px 18px rgba(81,69,229,.4)}50%{box-shadow:0 8px 26px rgba(236,72,153,.55)}}
  .sidebar a.active::before{left:-.8rem}
  .stat:hover{transform:none}
  table.rtable tbody tr{transition:background .15s}
  table.rtable tbody tr:active td{background:#f6f4ff}
}

/* ---------- print & reduced motion ---------- */
@media print{
  .stat .val,.sec-label,.hero h1{-webkit-text-fill-color:initial;background:none;color:#000}
  .content > *{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .welcome,.hero,.tabs a.on,.notice-bar,.auth-wrap{animation:none!important}
}

/* =====================================================================
   v4.1 — Colourful navigation bar (panel topbar + public nav)
   ===================================================================== */
.topbar,.pub-nav{
  background:linear-gradient(110deg,#1b1846 0%,#3b2fc4 32%,#7c3aed 62%,#c026d3 85%,#ec4899 100%);
  background-size:200% 100%;animation:vpFlow 20s linear infinite;
  border-bottom:0;box-shadow:0 8px 24px rgba(49,46,129,.28);color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.topbar::after{height:3px;bottom:0;opacity:.9}
.topbar .brand,.pub-nav .brand{color:#fff}
.topbar .brand span.txt,.pub-nav .brand span.txt{background:none;-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.topbar .brand-mark,.pub-nav .brand-mark{background:#fff;color:var(--primary);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.topbar .brand-mark::after,.pub-nav .brand-mark::after{opacity:.85}
.topbar .tag{background:#fff;color:#c026d3}
.topbar .user-name{color:#fff}
.topbar .avatar{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.topbar .wallet-chip{background:#fff;color:#047857;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.topbar .btn-ghost,.pub-nav .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.topbar .btn-ghost:hover,.pub-nav .btn-ghost:hover{background:rgba(255,255,255,.26);color:#fff;box-shadow:none}
.pub-nav .btn-primary{background:#fff;color:var(--primary);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.pub-nav .btn-primary:hover{color:#3b2fc4}
.topbar .menu-btn{background:rgba(255,255,255,.16);color:#fff}
.pub-nav nav a:not(.btn){color:#fff}
@media print{.topbar,.pub-nav{background:#fff!important;color:#000;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.topbar,.pub-nav{animation:none!important}}

/* pop-ups placed directly inside the page: no fade replay when they open */
.content > [role=dialog]{animation:none}