/* ============================================================
   CASHTORA — Brand Theme
   Palette derived from the logo gradient: teal → blue → violet
   ============================================================ */
:root {
  --teal:    #17C7A6;
  --cyan:    #1FA8C9;
  --blue:    #2A74E0;
  --royal:   #2546C9;
  --indigo:  #3B2EC4;
  --violet:  #6A2FD6;
  --purple:  #5B21B6;
  --navy:    #16215B;
  --ink:     #1b2559;
  --muted:   #6b7390;
  --line:    #e7eaf3;
  --bg:      #f5f7fc;
  --card:    #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --grad:    linear-gradient(135deg, #17C7A6 0%, #2A74E0 48%, #6A2FD6 100%);
  --grad-soft: linear-gradient(135deg, rgba(23,199,166,.12), rgba(106,47,214,.12));
  --shadow:  0 10px 30px rgba(22,33,91,.08);
  --shadow-sm: 0 4px 14px rgba(22,33,91,.07);
  --radius:  16px;
  --radius-sm: 11px;
  --font: 'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { color: var(--navy); font-weight: 800; line-height:1.2; margin:0 0 .4em; }
.text-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.muted { color: var(--muted); }
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  border:none; border-radius:12px; padding:11px 20px; transition:.18s;
  text-decoration:none; line-height:1;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-grad { background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(42,116,224,.32); }
.btn-grad:hover { box-shadow:0 12px 28px rgba(42,116,224,.42); color:#fff; }
.btn-light { background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.btn-light:hover { border-color:var(--blue); color:var(--blue); }
.btn-outline { background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.6); }
.btn-outline:hover { background:rgba(255,255,255,.14); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-sm { padding:7px 13px; font-size:13px; border-radius:9px; }
.btn-block { width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---------- Cards ---------- */
.card {
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); border:1px solid var(--line); padding:22px;
}
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-head h3 { margin:0; font-size:17px; }

/* ---------- Forms ---------- */
.field { margin-bottom:16px; }
.field label { display:block; font-weight:700; font-size:13.5px; color:var(--navy); margin-bottom:6px; }
.input, select.input, textarea.input {
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  padding:11px 14px; border:1.5px solid var(--line); border-radius:11px; background:#fff;
  transition:.15s;
}
.input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(42,116,224,.14); }
.input::placeholder { color:#aab; }
textarea.input { resize:vertical; min-height:90px; }
.hint { font-size:12.5px; color:var(--muted); margin-top:5px; }
.input-group { display:flex; }
.input-group .addon { display:flex; align-items:center; padding:0 14px; background:var(--grad-soft); border:1.5px solid var(--line); border-right:none; border-radius:11px 0 0 11px; font-weight:800; color:var(--royal); }
.input-group .input { border-radius:0 11px 11px 0; }

/* ---------- Alerts ---------- */
.alert { padding:13px 16px; border-radius:11px; font-size:14px; margin-bottom:18px; border:1px solid; display:flex; gap:10px; align-items:flex-start; }
.alert-success { background:#ecfdf3; border-color:#abefc6; color:#067647; }
.alert-danger  { background:#fef3f2; border-color:#fecdca; color:#b42318; }
.alert-info    { background:#eff8ff; border-color:#b2ddff; color:#175cd3; }
.alert-warning { background:#fffaeb; border-color:#fedf89; color:#b54708; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge-success { background:#ecfdf3; color:#067647; }
.badge-pending { background:#fffaeb; color:#b54708; }
.badge-danger  { background:#fef3f2; color:#b42318; }
.badge-info    { background:#eff8ff; color:#175cd3; }
.badge-grad    { background:var(--grad); color:#fff; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--line); }
table.tbl { width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
table.tbl th { text-align:left; padding:13px 15px; background:#fafbff; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--line); }
table.tbl td { padding:13px 15px; border-bottom:1px solid var(--line); }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover { background:#fafbff; }
.tbl-empty { text-align:center; padding:40px; color:var(--muted); }

/* ---------- Grid helpers ---------- */
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);} }

/* ---------- Stat cards ---------- */
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:var(--grad-soft); }
.stat .ico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--grad); color:#fff; font-size:20px; margin-bottom:12px; }
.stat .val { font-size:26px; font-weight:800; color:var(--navy); }
.stat .lbl { font-size:13px; color:var(--muted); font-weight:600; }

/* ============================================================
   PANEL LAYOUT (member + admin)
   ============================================================ */
.shell { display:flex; min-height:100vh; }
.sidebar {
  width:248px; background:#0f1535; color:#cdd3ee; flex-shrink:0;
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:40;
}
.sidebar .brand { padding:20px 22px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar .brand img { height:38px; width:auto; }
.sidebar .brand b { color:#fff; font-size:18px; letter-spacing:.3px; }
.sidebar nav { padding:14px 12px; overflow-y:auto; flex:1; }
.sidebar nav .grp { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#6b73a8; padding:14px 12px 6px; font-weight:800; }
.sidebar nav a { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px; color:#cdd3ee; font-size:14px; font-weight:600; margin-bottom:2px; transition:.15s; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.sidebar nav a.active { background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(42,116,224,.4); }
.sidebar nav a .ic { width:20px; text-align:center; }
.sidebar nav a .nav-badge { margin-left:auto; background:#ef4444; color:#fff; font-size:11px; font-weight:800; line-height:1; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(239,68,68,.25); animation:navPulse 1.8s ease-in-out infinite; }
@keyframes navPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45);} 50%{box-shadow:0 0 0 4px rgba(239,68,68,0);} }
.sidebar .side-foot { padding:14px; border-top:1px solid rgba(255,255,255,.07); }

.main { margin-left:248px; flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:#fff; border-bottom:1px solid var(--line); padding:14px 28px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; }
.topbar .pgtitle { font-size:19px; font-weight:800; color:var(--navy); }
.topbar .right { display:flex; align-items:center; gap:14px; }
.wallet-chip { display:flex; align-items:center; gap:8px; background:var(--grad-soft); border:1px solid var(--line); padding:8px 14px; border-radius:11px; font-weight:800; color:var(--royal); }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
.content { padding:28px; flex:1; }
.page-hd { margin-bottom:22px; }
.page-hd h1 { font-size:23px; margin:0 0 4px; }
.page-hd p { margin:0; color:var(--muted); }

.menu-toggle { display:none; background:none; border:none; font-size:24px; color:var(--navy); cursor:pointer; }
@media(max-width:980px){
  .sidebar { transform:translateX(-100%); transition:.25s; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .menu-toggle { display:block; }
}

/* utility */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .mt-0{margin-top:0;} .mt-8{margin-top:8px;}
.mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mb-0{margin-bottom:0;} .mb-8{margin-bottom:8px;}
.mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .text-center{text-align:center;} .text-right{text-align:right;}
.w-full{width:100%;} .fw-800{font-weight:800;} .fw-700{font-weight:700;}
.amt{font-weight:800;color:var(--navy);} .amt-green{color:var(--success);font-weight:800;} .amt-red{color:var(--danger);font-weight:800;}
.divider{height:1px;background:var(--line);margin:18px 0;}
.copy-row{display:flex;gap:8px;align-items:center;}
.tree-tier{margin-bottom:18px;}


/* ============================================================
   PREMIUM PANEL UPGRADE  (overrides — cascade wins)
   ============================================================ */

/* custom scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c3cae0 transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#c3cae0;border-radius:8px;}
*::-webkit-scrollbar-thumb:hover{background:#a6afd0;}

body{background:#f5f8fd;}

/* ---- Sidebar: clean light ---- */
.sidebar{
  background:#ffffff;
  box-shadow:1px 0 0 #e9edf7, 6px 0 30px rgba(22,33,91,.04);
  border-right:1px solid #eef1f8;
  color:#41496f;
}
.sidebar .brand{position:relative;padding:18px 20px;border-bottom:1px solid #eef1f8;}
.sidebar .brand img{height:42px;}
.sidebar .brand b{color:var(--navy);}
.sidebar nav .grp{color:#9aa3c4;}
.sidebar nav a{position:relative;overflow:hidden;color:#41496f;}
.sidebar nav a .ic{font-size:16px;transition:.2s;}
.sidebar nav a:hover{background:#f3f6fc;color:var(--navy);transform:translateX(3px);}
.sidebar nav a.active{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(42,116,224,.4);}
.sidebar nav a.active::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;}
.sidebar .side-foot{padding:14px;border-top:1px solid #eef1f8;}
.sidebar .side-foot .btn-light{background:#f5f8fd;}

/* ---- Topbar: glass ---- */
.topbar{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(22,33,91,.04);}
.wallet-chip{background:var(--grad);color:#fff;border:none;box-shadow:0 6px 16px rgba(42,116,224,.32);}
.avatar{box-shadow:0 4px 12px rgba(42,116,224,.32);}

/* ---- Premium stat cards ---- */
.stat{border-radius:18px;padding:22px;border:1px solid var(--line);transition:.28s;}
.stat::before{display:none;}
.stat::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);opacity:0;transition:.28s;}
.stat:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(22,33,91,.13);}
.stat:hover::after{opacity:1;}
.stat .ico{width:48px;height:48px;border-radius:14px;font-size:22px;box-shadow:0 10px 22px rgba(42,116,224,.3);}
.stat .val{font-size:27px;letter-spacing:-.5px;}

/* gradient-accent stat variant (brand-coloured highlight card) */
.stat.grad{background:var(--grad);border:none;color:#fff;box-shadow:0 16px 36px rgba(42,116,224,.3);}
.stat.grad::after{display:none;}
.stat.grad:hover{box-shadow:0 22px 46px rgba(42,116,224,.42);}
.stat.grad .val{color:#fff;}
.stat.grad .lbl{color:rgba(255,255,255,.9);}
.stat.grad .ico{background:rgba(255,255,255,.2);box-shadow:none;}

/* ---- Cards ---- */
.card{border-radius:18px;transition:.25s;}
.card:hover{box-shadow:0 14px 34px rgba(22,33,91,.09);}
.page-hd h1{letter-spacing:-.5px;}

/* chart card */
.chart-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm);}
.chart-wrap{position:relative;height:280px;}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
.chart-legend .li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600;}
.chart-legend .li .dot{width:11px;height:11px;border-radius:4px;}

/* reveal for panels */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}

/* ============================================================
   MOBILE RESPONSIVE — whole application
   ============================================================ */

@media(max-width:600px){
  .container{padding:0 16px;}
}

/* ---- Sidebar close button + overlay (desktop hidden) ---- */
.sidebar-close{display:none;background:none;border:none;font-size:24px;line-height:1;color:#9aa3c4;cursor:pointer;margin-left:auto;}
.sidebar-close:hover{color:var(--navy);}
.sidebar-overlay{display:none;}

/* ---- Panels on mobile ---- */
@media(max-width:980px){
  .sidebar{transform:translateX(-100%);transition:transform .28s ease;width:264px;box-shadow:none;}
  .sidebar.open{transform:translateX(0);box-shadow:10px 0 40px rgba(8,12,28,.28);}
  .main{margin-left:0;}
  .menu-toggle{display:block;}
  .sidebar-close{display:flex;align-items:center;}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(8,12,28,.5);z-index:38;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
  .sidebar-overlay.show{opacity:1;visibility:visible;}
}

@media(max-width:680px){
  .topbar{padding:11px 16px;}
  .topbar .pgtitle{font-size:16px;}
  .topbar .right{gap:8px;}
  .topbar .right .avatar + div{display:none;} /* hide name text, keep avatar */
  .wallet-chip{padding:7px 11px;font-size:13px;}
  .content{padding:18px 16px;}
  .page-hd h1{font-size:20px;}
  .page-hd{margin-bottom:18px;}
  .card{padding:18px;}
  .stat{padding:18px;}
  .stat .val{font-size:23px;}
  .card-head{flex-wrap:wrap;gap:10px;}
  .card-head form{width:100%;}
  .card-head .input{min-width:0 !important;width:100%;}
  /* stack any two-column form grids */
  .grid-2{grid-template-columns:minmax(0,1fr);}
  .chart-wrap{height:240px;}
  /* page header that uses flex (member_view) wraps */
  .page-hd.flex{flex-direction:column;align-items:flex-start;gap:10px;}
  table.tbl{font-size:13px;}
  table.tbl th,table.tbl td{padding:10px 12px;}
  .copy-row{flex-direction:column;align-items:stretch;}
  .copy-row .btn{width:100%;}
  .auth-card{padding:26px 20px;}
  .auth-card h1{font-size:24px;}
}

@media(max-width:420px){
  .stat .val{font-size:21px;}
}

/* prevent horizontal overflow anywhere */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;}

/* ---- Toast notifications ---- */
#toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;}
.toast{background:#0f1535;color:#fff;font-weight:600;font-size:14px;padding:13px 20px;border-radius:13px;box-shadow:0 16px 40px rgba(8,12,28,.35);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(16px);transition:.35s cubic-bezier(.2,.8,.2,1);max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateY(0);}

/* ---- Welcome / credentials modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,12,28,.55);backdrop-filter:blur(5px);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px;animation:ovFade .25s ease;}
@keyframes ovFade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:24px;max-width:470px;width:100%;padding:34px;box-shadow:0 40px 90px rgba(8,12,28,.45);text-align:center;animation:popIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.modal-icon{width:66px;height:66px;border-radius:50%;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px;}
.modal h2{font-size:23px;margin-bottom:6px;}
.modal .muted{font-size:14.5px;}
.cred-list{text-align:left;margin:20px 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.cred{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);}
.cred:last-child{border-bottom:none;}
.cred.hl{background:var(--grad-soft);}
.cred .k{font-size:12.5px;color:var(--muted);font-weight:700;}
.cred .v{font-weight:700;color:var(--navy);font-size:14px;display:flex;align-items:center;gap:9px;word-break:break-all;text-align:right;}
.cred .cpy{cursor:pointer;font-size:11.5px;color:var(--royal);background:#fff;border:1px solid var(--line);padding:4px 9px;border-radius:8px;font-weight:700;flex-shrink:0;}
.cred .cpy:hover{border-color:var(--blue);}
.modal-note{background:#fffaf0;border:1px solid #fde9c8;color:#92600a;font-size:12px;padding:10px 13px;border-radius:10px;margin-bottom:16px;text-align:left;line-height:1.5;}
.modal-actions{display:flex;gap:10px;}
@media(max-width:480px){.modal{padding:26px 20px;}.modal-actions{flex-direction:column;}.cred .v{font-size:13px;}}

/* ---- Support chat bubble + widget ---- */
.chat-fab{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 14px 32px rgba(42,116,224,.45);cursor:pointer;z-index:60;border:none;transition:transform .2s;}
.chat-fab:hover{transform:scale(1.07);}
.chat-fab .chat-dot{position:absolute;top:8px;right:9px;width:13px;height:13px;border-radius:50%;background:#ef4444;border:2.5px solid #fff;}
.chat-widget{position:fixed;right:22px;bottom:92px;width:360px;max-width:calc(100vw - 28px);height:480px;max-height:calc(100vh - 130px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(8,12,28,.32);z-index:60;display:none;flex-direction:column;overflow:hidden;}
.chat-widget.open{display:flex;animation:popIn .25s cubic-bezier(.2,.8,.2,1);}
.chat-head{background:var(--grad);color:#fff;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;}
.chat-head .t{font-weight:800;font-size:15px;}
.chat-head .s{font-size:11.5px;opacity:.9;}
.chat-head .x{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;line-height:1;}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:#f7f9fd;display:flex;flex-direction:column;gap:9px;}
.cmsg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-wrap:break-word;}
.cmsg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px;}
.cmsg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px;}
.cmsg .time{display:block;font-size:10px;opacity:.75;margin-top:4px;}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:13.5px;padding:0 20px;line-height:1.5;}
.chat-foot{padding:10px;border-top:1px solid var(--line);display:flex;gap:8px;}
.chat-foot input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;outline:none;}
.chat-foot input:focus{border-color:var(--blue);}
.chat-foot button{background:var(--grad);color:#fff;border:none;border-radius:10px;padding:0 17px;font-weight:700;cursor:pointer;}
@media(max-width:480px){.chat-widget{right:12px;left:12px;width:auto;bottom:88px;}.chat-fab{right:16px;bottom:16px;}}

/* ---- Pagination ---- */
.pager{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;font-size:13.5px;text-decoration:none;transition:.18s;}
.pager .pg:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;transform:translateY(-1px);}
.pager .pg.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(42,116,224,.32);}
.pager .pg.active:hover{color:#fff;transform:none;}
.pager .pg.disabled{opacity:.45;cursor:not-allowed;pointer-events:none;background:#f5f8fd;}
@media(max-width:560px){.pager .pg.num{display:none;}.pager .pg.num.active{display:inline-flex;}}