/* =========================================================
   AREWAHUB DESIGN SYSTEM — Premium fintech / Web3
   Dark · mobile-first · single source of truth for all pages
   ========================================================= */

:root{
  --bg:#05080a;
  --bg-2:#080d10;
  --surface:#0d1416;
  --surface-2:#111b1d;
  --raise:#142020;

  --text:#eaf4ef;
  --muted:#8aa49b;
  --faint:#5e756c;

  --brand:#3be5a3;
  --brand-2:#17b886;
  --brand-soft:rgba(59,229,163,.1);
  --brand-soft-2:rgba(59,229,163,.16);

  --danger:#ff6f6f;
  --warning:#f5c959;
  --info:#5bb0ff;

  --success-bg:rgba(59,229,163,.1);
  --danger-bg:rgba(255,111,111,.1);

  --line:rgba(143,183,168,.1);
  --line-strong:rgba(143,183,168,.2);

  --radius-xs:10px;
  --radius-s:12px;
  --radius-m:18px;
  --radius-l:26px;

  --grad:linear-gradient(135deg,#3be5a3,#14b07e);
  --grad-soft:linear-gradient(160deg,rgba(59,229,163,.14),rgba(20,176,126,.05));

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 40px rgba(0,0,0,.32);
  --shadow-soft:0 10px 24px rgba(0,0,0,.22);
  --shadow-sm:0 6px 16px rgba(0,0,0,.2);

  --font-display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box}
html{padding:0}
html,body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  min-width:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
html{
  scroll-behavior:smooth;
  scroll-padding-bottom:104px
}
body{
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(900px 460px at 92% -8%,rgba(59,229,163,.07),transparent 62%),
    radial-gradient(700px 380px at -12% 18%,rgba(91,176,255,.04),transparent 60%),
    var(--bg)
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
::selection{background:rgba(59,229,163,.28)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4,p{margin:0}
b{font-weight:800}

/* ---------- App shell ---------- */
.app{width:100%;max-width:1180px;min-width:0;margin:0 auto;padding-bottom:calc(118px + var(--safe-bottom))}

/* =========================================================
   Top header — clean, minimal, professional
   ========================================================= */
.top{
  height:calc(60px + var(--safe-top));
  padding:var(--safe-top) 18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:40;
  background:rgba(5,8,10,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;
  letter-spacing:-.2px;color:var(--text);min-width:0;line-height:1}
.brand .brand-logo-img{width:auto;height:30px;object-fit:contain;display:block;flex:none}
.brand span span{color:var(--brand)}
.brand small{font-size:9.5px;letter-spacing:.12em;color:var(--faint);font-weight:700}
.logo-mini{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad);color:#06140d;font-weight:900;font-size:12px;flex:none;
  box-shadow:0 6px 16px rgba(20,176,126,.28)}

.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.top .top-actions{margin-left:auto}

/* Desktop primary navigation (mobile-first: hidden until ≥1020px) */
.topnav{display:none}
.topnav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;font-size:13px;font-weight:800;
  color:var(--muted);white-space:nowrap;
  transition:color .2s,background .2s,transform .15s var(--ease)
}
.topnav a:hover{color:var(--text);background:var(--surface-2)}
.topnav a:active{transform:scale(.97)}
.topnav a svg{width:17px;height:17px}
.topnav b{display:inline-flex}
.topnav a.active{color:var(--brand);background:var(--brand-soft)}
@media(min-width:1020px){
  .topnav{display:flex;align-items:center;gap:4px;margin:0 auto}
  .top .top-actions{margin-left:0}
}

.notify{
  position:relative;width:40px;height:40px;border:0;border-radius:12px;
  display:grid;place-items:center;color:var(--muted);
  background:transparent;
  transition:color .2s,background .2s,transform .15s var(--ease)
}
.notify:active{background:var(--brand-soft);color:var(--brand);transform:scale(.94)}
.notify svg{width:19px;height:19px}
.notify:hover{color:var(--brand)}
.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--brand);
  top:8px;right:8px;box-shadow:0 0 0 3px rgba(5,8,10,.9)}
.avatar{
  width:40px;height:40px;border-radius:14px;background:var(--grad);
  color:#06140d;display:grid;place-items:center;font-weight:800;font-size:15px;
  letter-spacing:.5px;box-shadow:0 4px 14px rgba(20,176,126,.32);
  user-select:none
}
.avatar.lg{width:56px;height:56px;font-size:20px;border-radius:18px}
.avatar.circle{border-radius:50%}

/* =========================================================
   Content
   ========================================================= */
.content{width:100%;max-width:100%;min-width:0;padding:24px 16px 40px}
.content > *{max-width:100%}

.welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}
.welcome h1{margin:6px 0 3px;font-size:25px;letter-spacing:-.55px;line-height:1.15;font-weight:800}
.welcome .subtle{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.welcome .pill{flex:none;margin-top:2px}

.muted{font-size:10px;color:var(--faint);letter-spacing:.13em;font-weight:800;text-transform:uppercase;display:inline-block}
.subtle{color:var(--muted);margin:0;font-size:14px;line-height:1.55}
.grow{flex:1;min-width:0}

.pill{
  display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(59,229,163,.32);
  background:var(--brand-soft);color:var(--brand);padding:7px 13px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap;text-transform:capitalize
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.pill.neutral{border-color:var(--line-strong);background:var(--surface-2);color:var(--muted)}
.pill.neutral::before{background:var(--muted)}

.tag{
  font-size:10.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font-weight:700;letter-spacing:.3px;
  text-transform:capitalize;display:inline-flex;align-items:center;gap:6px;white-space:nowrap
}
.tag.ok{color:var(--brand);border-color:rgba(59,229,163,.32);background:var(--brand-soft)}
.tag.warn{color:var(--warning);border-color:rgba(245,201,89,.32);background:rgba(245,201,89,.1)}

/* =========================================================
   Dashboard greeting strip
   ========================================================= */
.dash-hello{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.dash-hello .grow{flex:1;min-width:0}
.dash-hello h1{margin:5px 0 3px;font-size:25px;letter-spacing:-.55px;line-height:1.15;font-weight:800}
.dash-hello p{margin:0}

/* =========================================================
   Hero — balance card
   ========================================================= */
.hero{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:var(--grad-soft),linear-gradient(165deg,#0d1a16,#0a120f);
  border:1px solid var(--line-strong);
  padding:24px;margin-bottom:20px;
  box-shadow:var(--shadow-soft);
  isolation:isolate
}
.hero::before{
  content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(59,229,163,.18),transparent 68%)
}
.hero::after{
  content:"";position:absolute;left:40%;bottom:-120px;width:300px;height:200px;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(91,176,255,.07),transparent 70%)
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;position:relative;z-index:1}
.balance{
  font-size:38px;font-weight:900;letter-spacing:-1.4px;line-height:1.04;
  margin:6px 0 12px;font-variant-numeric:tabular-nums;position:relative;z-index:1
}
.balance-meta{display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--muted);font-size:12.5px;margin:0 0 20px;position:relative;z-index:1}
.balance-meta .meta-item{display:grid;gap:2px;min-width:0}
.balance-meta i{font-style:normal;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.balance-meta b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.balance-meta .up{color:var(--brand)}
.hero h2{font-size:24px;margin:8px 0 4px;letter-spacing:-.5px}
.actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.actions .btn{flex:1 1 auto;min-width:132px}

/* =========================================================
   Grids
   ========================================================= */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.split{display:grid;grid-template-columns:1fr;gap:14px}

/* =========================================================
   Cards
   ========================================================= */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px;min-width:0;overflow:hidden;
  transition:border-color .2s,transform .18s var(--ease),background .2s
}
.card.tint{background:linear-gradient(165deg,#0f1c17,#0a140f)}
.card.hover-solid:hover{border-color:var(--line-strong)}

.mini{border-radius:var(--radius-m)}

.stat{position:relative}
.stat strong{display:block;font-size:22px;margin-top:4px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:12px;font-weight:600}
.stat .stat-ico{margin-bottom:12px}
.stat .muted{display:block}

.icon{
  width:38px;height:38px;border-radius:12px;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand);flex:none
}
.icon svg{width:19px;height:19px}
.icon.teal{background:rgba(91,176,255,.12);color:var(--info)}
.icon.gold{background:rgba(245,201,89,.13);color:var(--warning)}
.icon.rose{background:rgba(255,111,111,.12);color:var(--danger)}
.icon.plain{background:transparent;color:var(--faint)}
.icon.sm{width:16px;height:16px;border-radius:6px}
.icon.sm svg{width:15px;height:15px}

/* =========================================================
   Dashboard KPI tiles
   ========================================================= */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 18px}
.tile{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:16px;min-width:0;
  transition:border-color .2s,background .2s,transform .15s var(--ease)
}
.tile:active{transform:scale(.99);background:var(--surface-2);border-color:var(--line-strong)}
.tile .muted{display:block;padding-right:42px}
.tile strong{display:block;font-size:24px;letter-spacing:-.6px;margin-top:6px;font-variant-numeric:tabular-nums}
.tile small{display:block;color:var(--muted);font-size:11.5px;margin-top:5px;line-height:1.45}
.tile small.up{color:var(--brand)}
.tile small.down{color:var(--danger)}
.tile .tile-ico{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:11px}
.tile .tile-ico svg{width:17px;height:17px}

/* =========================================================
   Value rows (compact KPIs used in cards)
   ========================================================= */
.value-rows{display:grid;gap:2px;margin-top:14px}
.value-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.value-row:last-child{border-bottom:0}
.value-row span{color:var(--muted);font-size:12.5px}
.value-row b{font-variant-numeric:tabular-nums;font-size:13.5px}
.value-row b.ok{color:var(--brand)}
.value-row b.warn{color:var(--warning)}

/* =========================================================
   Dashboard split layout (activity + side rail)
   ========================================================= */
.dash-cols{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px;min-width:0}
.panel .section-head{margin-bottom:6px}
.panel-body{padding-top:6px}
.rail{display:grid;gap:12px;align-content:start}
.rail-card .kpi{align-items:flex-start}

/* =========================================================
   Sections
   ========================================================= */
.section{margin:26px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-head h2{margin:0;font-size:16.5px;letter-spacing:-.25px;font-weight:800}
.section-head a{color:var(--brand);font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.section-head a:hover{opacity:.85}
.section-head .muted{display:block;margin-bottom:4px}
.section-head > div{min-width:0}

/* =========================================================
   Quick actions / opportunities
   ========================================================= */
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.action{
  background:var(--surface);border:1px solid var(--line);padding:15px;
  border-radius:var(--radius-m);display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  transition:transform .16s var(--ease),border-color .2s,background .2s
}
.action:active{transform:scale(.975);background:var(--surface-2);border-color:var(--line-strong)}
.action strong{font-size:14px;letter-spacing:-.2px}
.action small{color:var(--muted);font-size:12px;line-height:1.45}

.opportunity{
  display:flex;align-items:center;gap:13px;padding:15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-m);
  transition:border-color .2s,background .2s
}
.opportunity:active{background:var(--surface-2)}
.opp-icon{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand);font-weight:900;flex:none}
.opportunity p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.arrow{margin-left:auto;color:var(--faint);font-size:22px;font-weight:600;transition:transform .2s var(--ease)}
.opportunity:active .arrow{transform:translateX(3px)}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  border:0;border-radius:14px;padding:12px 17px;font-weight:800;font-size:13.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  transition:transform .12s var(--ease),filter .2s,opacity .2s,background .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;white-space:nowrap
}
.btn:active{transform:scale(.975)}
.btn svg{width:17px;height:17px}
.btn.primary{
  background:var(--grad);color:#04130c;
  box-shadow:0 8px 22px rgba(20,176,126,.3)
}
.btn.primary:active{filter:brightness(.95)}
.btn.secondary{background:var(--brand-soft-2);color:var(--brand);border:1px solid rgba(59,229,163,.3)}
.btn.light{background:#e9f6ef;color:#0a1a13}
.btn.ghost{background:rgba(13,21,23,.6);border:1px solid var(--line-strong);color:var(--text)}
.btn.ghost:active{background:var(--surface-2)}
.btn.danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(255,111,111,.3)}
.btn.sm{min-height:36px;padding:7px 13px;font-size:12px;border-radius:12px}
.btn.full{width:100%}

/* =========================================================
   Forms
   ========================================================= */
.form{display:grid;gap:15px}
.field{display:grid;gap:8px}
.field label,.ad-form label{font-size:12.5px;color:var(--muted);font-weight:700}
.field input,.field select,.field textarea,
.ad-form input,.ad-form select,.ad-form textarea{
  width:100%;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;min-height:48px
}
.field input::placeholder,.field textarea::placeholder,.ad-form input::placeholder,.ad-form textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus,
.ad-form input:focus,.ad-form select:focus,.ad-form textarea:focus{
  border-color:var(--brand);background:var(--bg);box-shadow:0 0 0 4px rgba(59,229,163,.09)
}
.field textarea,.ad-form textarea{min-height:110px;resize:vertical}
.message{padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.45}
.message:empty{display:none}
.message.ok{background:var(--brand-soft);color:var(--brand);border:1px solid rgba(59,229,163,.28)}
.message.err{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(255,111,111,.28)}

/* =========================================================
   Progress
   ========================================================= */
.progress{height:8px;background:#15211d;border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad);border-radius:inherit;
  transition:width .5s var(--ease)}
.progress-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;color:var(--faint);font-size:12px;flex-wrap:wrap}
.progress-foot .trust{display:inline-flex;align-items:center;gap:6px}
.progress-foot .trust strong{color:var(--brand);font-variant-numeric:tabular-nums}

/* =========================================================
   Task list
   ========================================================= */
.task-list{display:grid;gap:12px}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.task .reward{color:var(--brand);font-weight:800;font-variant-numeric:tabular-nums}

/* =========================================================
   KPI row
   ========================================================= */
.kpi{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kpi > div{min-width:0}
.kpi p{font-size:13px}

/* =========================================================
   Empty / loading / error states
   ========================================================= */
.empty{text-align:center;padding:34px 18px;border:1px dashed var(--line-strong);
  border-radius:var(--radius-m);color:var(--muted)}
.empty.compact{padding:24px 16px}
.empty.compact strong{font-size:14px}
.empty strong{display:block;color:var(--text);margin:10px 0 4px;font-size:15px}
.empty p{margin:0;font-size:13px;max-width:320px;margin-inline:auto;line-height:1.5}
.state-ico{width:46px;height:46px;border-radius:15px;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand);margin:0 auto 4px}
.state-ico.sm{width:40px;height:40px;border-radius:13px}
.state-ico svg{width:23px;height:23px}
.state-ico.sm svg{width:19px;height:19px}
.skeleton{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius-s)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:shimmer 1.4s infinite}
.skeleton.sq{width:38px;height:38px;border-radius:12px;flex:none}
.skeleton.line{height:12px;border-radius:999px;flex:1}
.skeleton.line.w40{flex:0 0 40%}
.skeleton-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.skeleton-row:last-child{border-bottom:0}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* =========================================================
   Bottom navigation
   ========================================================= */
.bottom{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-bottom));
  width:calc(100% - 20px);max-width:640px;display:grid;grid-template-columns:repeat(5,1fr);
  gap:4px;padding:7px;background:rgba(10,16,18,.86);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--line-strong);
  border-radius:22px;z-index:50;box-shadow:var(--shadow)
}
.nav{display:grid;place-items:center;gap:3px;padding:7px 4px;border-radius:15px;
  color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.2px;
  transition:color .2s,background .2s,transform .15s var(--ease);text-align:center}
.nav svg{width:20px;height:20px}
.nav:active{transform:scale(.92)}
.nav.active{color:var(--brand);background:var(--brand-soft)}
.nav.active svg{color:var(--brand)}

/* =========================================================
   Table
   ========================================================= */
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);font-size:13px}
.table th{color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.table tr:last-child td{border-bottom:0}

/* =========================================================
   Activity rows
   ========================================================= */
.activity-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.activity-row:last-child{border-bottom:0}
.activity-row .grow{flex:1;min-width:0}
.activity-row strong{font-size:13.5px;display:block;letter-spacing:-.1px}
.activity-row small{color:var(--muted);font-size:11.5px;margin-top:2px}
.activity-row .amt{font-weight:800;font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap}
.activity-row .amt.neg{color:var(--danger)}
.activity-row .amt.pos{color:var(--brand)}

/* =========================================================
   Notice
   ========================================================= */
.notice{display:flex;gap:13px;padding:15px;border:1px solid var(--line);
  border-radius:var(--radius-m);background:var(--surface);margin-bottom:10px}
.notice p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.notice.warn{border-color:rgba(245,201,89,.32);background:rgba(245,201,89,.06)}
.notice.warn .icon{background:rgba(245,201,89,.12);color:var(--warning)}
.notice.info .icon.teal{background:rgba(91,176,255,.12)}

/* =========================================================
   Charts (dashboard)
   ========================================================= */
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.chart-head h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-.1px}
.chart svg{width:100%;height:auto;display:block}
.chart-labels{display:flex;justify-content:space-between;color:var(--faint);font-size:10px;
  font-weight:700;margin-top:8px;letter-spacing:.05em}
.legend{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* Weekly earnings bar chart */
.bars{display:flex;align-items:flex-end;gap:12px;height:168px;padding:10px 4px 0}
.bars .empty{width:100%}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:8px;min-width:0}
.bar i{display:block;width:100%;max-width:38px;height:0;border-radius:9px 9px 5px 5px;
  background:linear-gradient(180deg,var(--brand) 0%,rgba(20,176,126,.18) 100%);
  box-shadow:0 8px 18px rgba(20,176,126,.18);
  transition:height .7s var(--ease)}
.bar small{color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.bar.today i{background:linear-gradient(180deg,#7ef0c0 0%,rgba(20,176,126,.35) 100%);
  box-shadow:0 8px 22px rgba(20,176,126,.35)}
.bar.today small{color:var(--brand)}

/* =========================================================
   Ripple (from app.js)
   ========================================================= */
.ripple{position:absolute;border-radius:50%;background:rgba(59,229,163,.16);
  transform:scale(0);animation:ripple .5s var(--ease);pointer-events:none;mix-blend-mode:screen}
@keyframes ripple{to{transform:scale(1);opacity:0}}
button,.btn,a.action,a.opportunity,a.card,a.notify,.nav,label.card{position:relative;overflow:hidden}

/* =========================================================
   Auth pages
   ========================================================= */
.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:flex-start;padding:clamp(24px,6vw,48px) 16px;position:relative}
.auth-box{width:min(100%,390px);margin:auto;background:rgba(13,20,22,.9);border:1px solid var(--line-strong);
  border-radius:var(--radius-l);padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px)}
.auth-box .brand{margin-bottom:10px}
.auth-box h1{margin:16px 0 6px;font-size:27px;letter-spacing:-.6px;font-weight:800}
.auth-box > p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 22px}
.auth-box .btn{margin-top:4px}
.security{border-left:3px solid var(--brand)}

.login-heading{margin-bottom:24px}
.login-heading h1{margin:8px 0 6px;font-size:27px;letter-spacing:-.6px;font-weight:800}
.login-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.login-input{position:relative}
.login-field{display:grid;gap:8px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;border-radius:11px;background:transparent;
  color:var(--faint);display:grid;place-items:center;cursor:pointer;
  transition:color .2s,background .2s}
.password-toggle:hover{color:var(--brand);background:var(--brand-soft)}
.password-toggle svg{width:18px;height:18px}
.login-input input{padding-right:46px}
.login-meta{display:flex;justify-content:flex-end}
.login-meta a,.login-footer a{color:var(--brand);font-weight:800}
.login-submit{width:100%;height:52px;font-size:14px}
.login-message{min-height:0}
.login-footer{text-align:center;margin:20px 0 0;color:var(--muted);font-size:13px}
.login-security{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:20px;color:var(--faint);font-size:11.5px}

/* =========================================================
   Page head (bonus / task-details / legal / etc.)
   ========================================================= */
.page-head{margin-bottom:22px}
.page-head h1{margin:6px 0 4px;font-size:25px;letter-spacing:-.55px;font-weight:800}
.eyebrow{color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.15em;
  text-transform:uppercase}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;
  font-weight:700;margin-bottom:16px;transition:color .2s}
.back:hover{color:var(--brand)}
.legal{max-width:760px}
.legal h1{font-size:25px;letter-spacing:-.55px;margin:6px 0 4px;font-weight:800}
.legal h2{font-size:17px;margin:24px 0 8px;letter-spacing:-.2px}
.legal p{color:var(--muted);line-height:1.68;font-size:14px}
.legal > p:first-of-type{color:var(--faint);font-size:12.5px}

/* =========================================================
   Bonus
   ========================================================= */
.bonus{background:var(--grad-soft),var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:26px 20px;text-align:center;margin-bottom:18px}
.bonus strong{font-size:24px;display:block;margin:6px 0;letter-spacing:-.4px;font-weight:900}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stats .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:18px 14px;text-align:center}
.stats .stat span{font-size:10.5px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.stats .stat strong{font-size:19px;display:block;margin-top:6px;font-variant-numeric:tabular-nums}

/* =========================================================
   Advertiser studio
   ========================================================= */
.ad-page{max-width:1180px}
.ad-hero{position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:var(--grad-soft),linear-gradient(165deg,#0d1a16,#0a120f);
  border:1px solid var(--line-strong);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-soft)}
.ad-kicker{font-size:10px;color:var(--faint);letter-spacing:.13em;font-weight:800;text-transform:uppercase}
.ad-balance{font-size:36px;font-weight:900;letter-spacing:-1.2px;margin:6px 0 4px;
  font-variant-numeric:tabular-nums}
.ad-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ad-actions .btn{flex:1 1 auto;min-width:150px}
.ad-wallet-meta{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.ad-wallet-meta span{display:grid;gap:2px}
.ad-wallet-meta small{color:var(--faint);font-size:11px}
.ad-wallet-meta b{font-size:15px;font-variant-numeric:tabular-nums}
.ad-form{display:grid;gap:16px}
.ad-form label{display:grid;gap:8px}
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ad-media{padding:20px;border:1px dashed var(--line-strong);border-radius:14px;text-align:center;background:var(--bg-2)}
.ad-media input{color:var(--faint);font-size:12px}
.ad-preview img,.ad-preview video{width:100%;border-radius:14px;margin-top:12px;max-height:300px;object-fit:cover}
.ad-preview-body{color:var(--muted);font-size:12px;margin-top:8px}
.ad-note{color:var(--muted);font-size:12.5px;line-height:1.55}
.ad-badge{display:inline-flex;padding:4px 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:700;text-transform:capitalize}
.ad-badge.live{color:var(--brand);border-color:rgba(59,229,163,.32);background:var(--brand-soft)}
.ad-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ad-row .btn{flex:none}
.ad-empty{text-align:center;padding:32px 18px}
.ad-empty h2{margin:8px 0 4px}
.ad-activity{display:grid;gap:6px}
.ad-activity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.ad-activity-row:last-child{border-bottom:0}
.ad-activity-row small{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
.ad-activity-row b{color:var(--brand);font-variant-numeric:tabular-nums}
.ad-activity-empty{text-align:center;padding:26px 14px;color:var(--muted)}
.ad-stat{border-left:3px solid var(--brand)}

/* Advertiser discover strip (member dashboard) */
.ad-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(165deg,rgba(245,201,89,.08),transparent 55%),var(--surface);
  border:1px solid rgba(245,201,89,.22);border-radius:var(--radius-m);
  padding:16px 18px;margin:0 0 18px;
  transition:border-color .2s,transform .15s var(--ease)
}
.ad-strip:active{transform:scale(.99);border-color:rgba(245,201,89,.4)}
.ad-strip .icon{background:rgba(245,201,89,.13);color:var(--warning)}
.ad-strip h3{margin:2px 0 2px;font-size:15.5px;letter-spacing:-.2px}
.ad-strip p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.ad-strip .arrow{margin-left:auto;color:var(--faint);font-size:22px;font-weight:600}

/* Advertiser insufficient-balance state */
.ad-check{display:grid;gap:12px;margin-top:14px}
.ad-check-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--muted)}
.ad-check-row b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:800}
.ad-check-row b.warn{color:var(--warning)}
.ad-check-row b.ok{color:var(--brand)}
.ad-insufficient{display:none;gap:12px;align-items:flex-start;padding:14px;
  border:1px solid rgba(255,111,111,.32);border-radius:var(--radius-s);
  background:var(--danger-bg)}
.ad-insufficient.show{display:flex}
.ad-insufficient .icon{background:rgba(255,111,111,.13);color:var(--danger)}
.ad-insufficient strong{font-size:13.5px}
.ad-insufficient p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.ad-funded{display:none;gap:12px;align-items:flex-start;padding:14px;
  border:1px solid rgba(59,229,163,.32);border-radius:var(--radius-s);
  background:var(--brand-soft)}
.ad-funded.show{display:flex}
.ad-funded .icon{color:var(--brand)}
.ad-funded strong{font-size:13.5px}
.ad-funded p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.ad-launch-wrap{display:block}
.ad-launch-wrap[hidden]{display:none}

/* =========================================================
   Menu list (Profile / "More" hub)
   ========================================================= */
.menu-list{display:grid;gap:2px}
.menu-item{display:flex;align-items:center;gap:13px;padding:13px 6px;
  border-bottom:1px solid var(--line);transition:background .18s,color .18s}
.menu-item:last-child{border-bottom:0}
.menu-item:active{background:var(--surface-2)}
.menu-item .icon{width:34px;height:34px;border-radius:11px}
.menu-item .icon svg{width:17px;height:17px}
.menu-item b{font-size:14px;letter-spacing:-.1px}
.menu-item small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.menu-item .arrow{margin-left:auto;color:var(--faint);font-size:20px;font-weight:600}

/* =========================================================
   ArewaHub — Vertical Premium Splash
========================================================= */

.splash-page{
  margin:0;
  padding:0;
  width:100%;
  min-height:100dvh;
  overflow:hidden;
  background:#010504;
}

.splash{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,255,120,.10) 0%,rgba(0,255,120,.035) 25%,transparent 52%),
    linear-gradient(145deg,#020806 0%,#020d09 46%,#000302 100%);
}

.splash.gone{
  opacity:0;
  pointer-events:none;
  transition:opacity .46s ease;
}

/* Top-left green diagonal layers */
.corner-top{
  position:absolute;
  top:-125px;
  left:-125px;
  width:310px;
  height:310px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,#18e66f 0%,#087d43 42%,#034329 100%);
  clip-path:polygon(0 0,100% 0,0 100%);
  opacity:.95;
}

.corner-top::before{
  content:"";
  position:absolute;
  width:310px;
  height:42px;
  left:42px;
  top:94px;
  background:linear-gradient(90deg,rgba(0,255,120,.78),rgba(0,255,120,.08),transparent);
  transform:rotate(-45deg);
  transform-origin:left center;
}

.corner-top::after{
  content:"";
  position:absolute;
  width:230px;
  height:2px;
  left:55px;
  top:142px;
  background:rgba(85,255,150,.72);
  transform:rotate(-45deg);
  box-shadow:0 8px 0 rgba(85,255,150,.25);
}

/* Bottom-right green diagonal layers */
.corner-bottom{
  position:absolute;
  right:-125px;
  bottom:-125px;
  width:310px;
  height:310px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(315deg,#18e66f 0%,#087d43 42%,#034329 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.95;
}

.corner-bottom::before{
  content:"";
  position:absolute;
  width:310px;
  height:42px;
  right:42px;
  bottom:94px;
  background:linear-gradient(270deg,rgba(0,255,120,.78),rgba(0,255,120,.08),transparent);
  transform:rotate(-45deg);
  transform-origin:right center;
}

.corner-bottom::after{
  content:"";
  position:absolute;
  width:230px;
  height:2px;
  right:55px;
  bottom:142px;
  background:rgba(85,255,150,.72);
  transform:rotate(-45deg);
  box-shadow:0 8px 0 rgba(85,255,150,.25);
}

.center-glow{
  position:absolute;
  width:min(110vw,620px);
  height:min(110vw,620px);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(0,255,125,.13) 0%,
      rgba(0,255,125,.055) 30%,
      rgba(0,255,125,.018) 48%,
      transparent 72%);
  filter:blur(10px);
  z-index:0;
  pointer-events:none;
}

.brand{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  box-sizing:border-box;
  transform:translateY(-1vh);
}

.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(78vw,300px);
  max-height:190px;
  margin:0 auto;
}

.original-logo{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:190px;
  object-fit:contain;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  filter:
    drop-shadow(0 10px 25px rgba(0,255,125,.18))
    drop-shadow(0 0 18px rgba(0,255,125,.07));
}

/* No tagline text under the logo */
.tagline{
  display:none !important;
}

.loading{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:14vh;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.loader{
  width:48px;
  height:48px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.10);
  border-top-color:#20f078;
  border-right-color:#20f078;
  border-bottom-color:rgba(32,240,120,.22);
  animation:splash-spin .9s linear infinite;
  box-shadow:0 0 18px rgba(0,255,120,.12);
}

.loading-text{
  margin-top:18px;
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:400;
  letter-spacing:2.2px;
  text-transform:none;
  white-space:nowrap;
}

@keyframes splash-spin{
  to{transform:rotate(360deg)}
}

@media (max-width:480px){
  .corner-top,
  .corner-bottom{
    width:270px;
    height:270px;
  }

  .corner-top{
    top:-110px;
    left:-110px;
  }

  .corner-bottom{
    right:-110px;
    bottom:-110px;
  }

  .brand{
    transform:translateY(-1vh);
    padding:0 18px;
  }

  .logo-wrap{
    width:min(82vw,290px);
    max-height:180px;
  }

  .original-logo{
    max-height:180px;
  }

  .loading{
    bottom:13vh;
  }
}

@media (max-height:700px){
  .logo-wrap{
    width:min(72vw,250px);
    max-height:150px;
  }

  .original-logo{
    max-height:150px;
  }

  .loading{
    bottom:9vh;
  }

  .loader{
    width:42px;
    height:42px;
  }
}

@media (min-height:800px) and (max-width:480px){
  .brand{
    transform:translateY(-2vh);
  }

  .logo-wrap{
    width:min(82vw,300px);
    max-height:185px;
  }

  .original-logo{
    max-height:185px;
  }

  .loading{
    bottom:15vh;
  }
}

/* =========================================================
   Auth loading overlay (from auth.js)
   ========================================================= */
.ah-auth-loading{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(13,221,152,.12),transparent 30%),
    radial-gradient(circle at 50% 0%,rgba(8,139,112,.14),transparent 44%),
    linear-gradient(180deg,#06110e 0%,#030806 100%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ah-auth-loader{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  animation:ahSplashIn .65s cubic-bezier(.2,.8,.2,1) both;
}

.ah-splash-logo-only{
  width:128px;
  height:128px;
  display:grid;
  place-items:center;
  flex:none;
  opacity:0;
  transform:translateY(10px) scale(.78);
  filter:
    drop-shadow(0 0 10px rgba(22,227,154,.18))
    drop-shadow(0 5px 16px rgba(13,221,152,.12));
  animation:
    ahSplashLogoIn .9s cubic-bezier(.16,1,.3,1) forwards,
    ahSplashLogoFloat 2.4s ease-in-out .9s infinite;
}

.ah-splash-logo-only svg{
  width:128px;
  height:128px;
  display:block;
}

.ah-splash-logo-only::after{
  content:"";
  position:absolute;
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(22,227,154,.10);
  filter:blur(22px);
  z-index:-1;
  animation:ahSplashGlow 2.4s ease-in-out .9s infinite;
}

@keyframes ahSplashLogoIn{
  0%{
    opacity:0;
    transform:translateY(14px) scale(.72);
    filter:
      drop-shadow(0 0 4px rgba(22,227,154,.05))
      drop-shadow(0 3px 8px rgba(13,221,152,.05));
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.04);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 18px rgba(22,227,154,.34))
      drop-shadow(0 7px 24px rgba(13,221,152,.22));
  }
}

@keyframes ahSplashLogoFloat{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 20px rgba(22,227,154,.34))
      drop-shadow(0 7px 25px rgba(13,221,152,.22));
  }

  25%{
    opacity:.72;
    transform:translateY(-2px) scale(.98);
    filter:
      drop-shadow(0 0 13px rgba(22,227,154,.22))
      drop-shadow(0 5px 18px rgba(13,221,152,.14));
  }

  50%{
    opacity:.35;
    transform:translateY(-4px) scale(.94);
    filter:
      drop-shadow(0 0 5px rgba(22,227,154,.08))
      drop-shadow(0 2px 8px rgba(13,221,152,.05));
  }

  75%{
    opacity:.72;
    transform:translateY(-2px) scale(.98);
    filter:
      drop-shadow(0 0 13px rgba(22,227,154,.22))
      drop-shadow(0 5px 18px rgba(13,221,152,.14));
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 20px rgba(22,227,154,.34))
      drop-shadow(0 7px 25px rgba(13,221,152,.22));
  }
}

@keyframes ahSplashGlow{
  0%,100%{
    opacity:.45;
    transform:scale(.82);
  }
  50%{
    opacity:.9;
    transform:scale(1.15);
  }
}

.ah-loading-line{
  width:132px;
  height:3px;
  margin-top:7px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(143,183,168,.14);
  opacity:0;
  animation:ahSplashLineIn .55s ease .55s forwards;
}

@keyframes ahSplashLineIn{
  from{
    opacity:0;
    transform:scaleX(.65);
  }
  to{
    opacity:1;
    transform:scaleX(1);
  }
}

.ah-loading-line i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
  animation:ahLoaderProgress 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes ahSplashIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes ahSplashLogo{
  from{
    transform:scale(.97);
    filter:
      drop-shadow(0 0 7px rgba(22,227,154,.20))
      drop-shadow(0 3px 10px rgba(13,221,152,.14));
  }
  to{
    transform:scale(1.03);
    filter:
      drop-shadow(0 0 15px rgba(22,227,154,.34))
      drop-shadow(0 5px 18px rgba(13,221,152,.22));
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:800px){
  .content{padding:22px 15px calc(40px + var(--safe-bottom))}
  .grid3,.split{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr}
  .actions .btn{flex:1 1 auto;min-width:0}
  .balance{font-size:32px}
}
@media(max-width:520px){
  .content{padding:20px 14px calc(36px + var(--safe-bottom))}
  .grid,.grid3,.quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .card{padding:15px}
  .hero,.ad-hero{padding:20px;border-radius:22px}
  .balance{font-size:32px}
  .welcome h1,.dash-hello h1{font-size:22px}
  .dash-hello{gap:12px}
  .dash-hello .avatar.lg{width:48px;height:48px;font-size:17px;border-radius:15px}
  .top{padding:var(--safe-top) 12px 0}
  .brand .brand-logo-img{height:28px}
  .brand{gap:8px}
  .brand small{display:none}
  .task{grid-template-columns:auto 1fr}
  .table{font-size:11.5px}
  .table th:nth-child(3),.table td:nth-child(3){display:none}
  .ad-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .bottom{width:calc(100% - 16px);bottom:calc(8px + var(--safe-bottom))}
  .auth{padding:20px 14px}
  .auth-box{padding:22px 18px}
  .tile strong{font-size:21px}
  .bars{gap:8px;height:150px}
}

/* Desktop expansion */
@media(min-width:1020px){
  .app{padding-bottom:calc(40px + var(--safe-bottom))}
  .content{padding:30px 24px 48px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(4,1fr)}
  .quick{grid-template-columns:repeat(4,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .dash-cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .balance{font-size:44px}
  .welcome h1{font-size:30px}
  .bottom{display:none}
}
/* =========================================================
   AREWAHUB AUTH + SPLASH FINAL POLISH
   ========================================================= */

.auth{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:28px 16px calc(32px + var(--safe-bottom));
  position:relative;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.auth-box{
  width:min(100%,370px);
  margin:auto;
  background:transparent;
  border:0;
  border-radius:0;
  padding:10px 4px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.auth-box .brand{
  display:flex;
  justify-content:center;
  margin:0 0 22px;
}

.auth-box .brand-logo-img{
  width:auto;
  height:42px;
  max-width:150px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 22px rgba(20,176,126,.16));
}

.auth-box h1{
  margin:0 0 7px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.5px;
  font-weight:800;
  text-align:center;
}

.auth-box > p{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  margin:0 0 20px;
}

.login-heading{
  text-align:center;
  margin-bottom:22px;
}

.login-heading .eyebrow{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand);
}

.login-heading p{
  max-width:330px;
  margin:0 auto;
}

.form{
  width:100%;
}

.form .field{
  margin-bottom:15px;
}

.form label{
  font-size:12px;
  margin-bottom:7px;
}

.form input{
  min-height:47px;
  border-radius:12px;
}

.auth-box .btn{
  min-height:47px;
  margin-top:5px;
  border-radius:12px;
}

.login-footer{
  text-align:center;
  margin:18px 0 0;
  font-size:13px;
}

.login-security{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:17px;
  color:var(--faint);
  font-size:10px;
}

/* Clean first-entry splash */
@media(max-width:480px){
  .auth{
    padding:24px 18px calc(28px + var(--safe-bottom));
  }

  .auth-box{
    width:min(100%,350px);
  }

  .auth-box .brand-logo-img{
    height:40px;
    max-width:140px;
  }

  .auth-box h1{
    font-size:24px;
  }

}

/* =========================================================
   AREWAHUB PREMIUM ADMIN CONTROL CENTER
   ========================================================= */

.admin-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at 85% 5%,rgba(24,190,130,.09),transparent 28%),
    radial-gradient(circle at 10% 20%,rgba(39,120,255,.06),transparent 25%),
    var(--bg);
}

.admin-topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:70px;
  padding:12px 28px;
  background:rgba(4,8,10,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
}

.admin-brand img{
  width:auto;
  height:34px;
  max-width:128px;
  object-fit:contain;
}

.admin-brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.admin-brand-copy strong{
  font-size:14px;
  letter-spacing:.01em;
}

.admin-brand-copy small{
  color:var(--faint);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}

.admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.admin-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(52,211,153,.18);
  border-radius:999px;
  background:rgba(52,211,153,.06);
  color:#8df0c5;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.admin-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 12px rgba(52,211,153,.75);
}

.admin-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  min-height:calc(100vh - 70px);
}

.admin-sidebar{
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  padding:22px 14px;
  border-right:1px solid var(--line);
  background:rgba(5,9,11,.72);
}

.admin-nav-label{
  margin:5px 10px 9px;
  color:var(--faint);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.admin-nav{
  display:grid;
  gap:5px;
}

.admin-nav button{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:43px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.admin-nav button:hover,
.admin-nav button.active{
  border-color:var(--line);
  background:rgba(255,255,255,.045);
  color:var(--text);
}

.admin-nav button.active{
  box-shadow:inset 2px 0 0 var(--brand);
}

.admin-nav-icon{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  color:var(--muted);
}

.admin-nav button.active .admin-nav-icon{
  color:var(--brand);
}

.admin-main{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:30px clamp(18px,3vw,42px) 50px;
}

.admin-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:25px;
}

.admin-hero-copy .eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--brand);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.admin-hero h1{
  margin:0;
  font-size:clamp(25px,3vw,38px);
  letter-spacing:-.035em;
}

.admin-hero p{
  max-width:620px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.admin-date{
  flex:none;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:11px;
}

.admin-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}

.admin-kpi{
  position:relative;
  overflow:hidden;
  min-height:128px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:0 14px 40px rgba(0,0,0,.12);
}

.admin-kpi::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-35px;
  bottom:-45px;
  border-radius:50%;
  background:rgba(52,211,153,.07);
}

.admin-kpi-label{
  display:block;
  color:var(--faint);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.admin-kpi strong{
  display:block;
  margin-top:13px;
  font-size:27px;
  letter-spacing:-.035em;
}

.admin-kpi small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
}

.admin-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);
  gap:16px;
  align-items:start;
}

.admin-card{
  min-width:0;
  padding:19px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  box-shadow:0 14px 40px rgba(0,0,0,.10);
}

.admin-card + .admin-card{
  margin-top:16px;
}

.admin-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.admin-card-head h2{
  margin:0;
  font-size:15px;
  letter-spacing:-.015em;
}

.admin-card-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.admin-count{
  flex:none;
  min-width:27px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:10px;
  font-weight:800;
  text-align:center;
}

.admin-list{
  display:grid;
  gap:9px;
}

.admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(0,0,0,.12);
}

.admin-row-main{
  min-width:0;
}

.admin-row-main strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.admin-row-main span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

.admin-row-value{
  flex:none;
  text-align:right;
}

.admin-row-value strong{
  display:block;
  font-size:12px;
}

.admin-row-value small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.admin-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
}

.admin-actions button{
  min-height:36px;
  padding:0 11px;
  border-radius:9px;
  font-size:10px;
}

.admin-btn-danger{
  border-color:rgba(244,63,94,.22)!important;
  color:#ff9aae!important;
  background:rgba(244,63,94,.05)!important;
}

.admin-btn-success{
  border-color:rgba(52,211,153,.22)!important;
  color:#8df0c5!important;
  background:rgba(52,211,153,.05)!important;
}

.admin-empty{
  padding:28px 15px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
  font-size:11px;
}

.admin-wallet{
  display:grid;
  gap:13px;
}

.admin-wallet-balance{
  padding:18px;
  border:1px solid rgba(52,211,153,.15);
  border-radius:14px;
  background:
    radial-gradient(circle at 85% 15%,rgba(52,211,153,.13),transparent 35%),
    rgba(52,211,153,.035);
}

.admin-wallet-balance span{
  display:block;
  color:var(--muted);
  font-size:10px;
}

.admin-wallet-balance strong{
  display:block;
  margin-top:7px;
  font-size:27px;
  letter-spacing:-.035em;
}

.admin-wallet-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.admin-mini-stat{
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}

.admin-mini-stat span{
  display:block;
  color:var(--faint);
  font-size:9px;
}

.admin-mini-stat strong{
  display:block;
  margin-top:5px;
  font-size:12px;
}

.admin-form{
  display:grid;
  gap:9px;
  margin-top:14px;
}

.admin-form input{
  width:100%;
  min-height:43px;
  padding:0 12px;
  border-radius:10px;
}

.admin-form button{
  width:100%;
  min-height:43px;
  border-radius:10px;
}

.admin-security{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:16px;
  padding:13px;
  border:1px solid rgba(52,211,153,.12);
  border-radius:12px;
  background:rgba(52,211,153,.035);
}

.admin-security-mark{
  width:31px;
  height:31px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(52,211,153,.08);
  color:#72e9b6;
}

.admin-security strong{
  display:block;
  font-size:11px;
}

.admin-security span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

.admin-hidden{
  display:none!important;
}

@media(max-width:1000px){
  .admin-layout{
    grid-template-columns:1fr;
  }

  .admin-sidebar{
    position:static;
    height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:9px 12px;
  }

  .admin-nav{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .admin-nav::-webkit-scrollbar{
    display:none;
  }

  .admin-nav-label{
    display:none;
  }

  .admin-nav button{
    width:auto;
    flex:none;
    white-space:nowrap;
  }

  .admin-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .admin-topbar{
    padding:10px 15px;
  }

  .admin-brand-copy{
    display:none;
  }

  .admin-status{
    display:none;
  }

  .admin-main{
    padding:22px 14px 40px;
  }

  .admin-hero{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .admin-date{
    width:100%;
  }

  .admin-kpis{
    grid-template-columns:1fr 1fr;
  }

  .admin-kpi{
    min-height:110px;
    padding:14px;
  }

  .admin-kpi strong{
    font-size:22px;
  }

  .admin-card{
    padding:15px;
  }

  .admin-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .admin-row-value{
    width:100%;
    text-align:left;
  }
}

@media(max-width:430px){
  .admin-kpis{
    gap:8px;
  }

  .admin-kpi{
    min-height:100px;
    padding:12px;
  }

  .admin-kpi strong{
    margin-top:9px;
    font-size:19px;
  }

  .admin-kpi small{
    font-size:9px;
  }

  .admin-nav button{
    min-height:39px;
    padding:0 9px;
    font-size:10px;
  }
}

/* =========================================================
   ADMIN MEMBER MANAGEMENT TABLE
   ========================================================= */

.admin-member-table-wrap {
  width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.admin-member-search {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.04);
  color: inherit;
  font: inherit;
}

.admin-member-search:focus {
  border-color: rgba(80,220,140,.45);
  background: rgba(255,255,255,.055);
}

.admin-member-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.admin-member-table th {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-member-table td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  vertical-align: middle;
}

.admin-member-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-member-table tbody tr {
  transition: background .18s ease;
}

.admin-member-table tbody tr:hover {
  background: rgba(255,255,255,.025);
}

.admin-member-name {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.admin-member-email {
  color: rgba(255,255,255,.62);
}

.admin-member-date {
  color: rgba(255,255,255,.52);
  white-space: nowrap;
}

.admin-member-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

.admin-member-status.is-active {
  border: 1px solid rgba(70,220,135,.18);
  background: rgba(70,220,135,.09);
  color: #63e49a;
}

.admin-member-status.is-banned {
  border: 1px solid rgba(255,90,90,.18);
  background: rgba(255,90,90,.09);
  color: #ff7777;
}

.admin-member-table .admin-btn-danger,
.admin-member-table .admin-btn-success {
  min-width: 66px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 11px;
}

.admin-member-table .admin-empty {
  display: table-cell;
  padding: 28px 16px;
  text-align: center;
}

@media (max-width: 700px) {
  .admin-member-table-wrap {
    border-radius: 14px;
  }

  .admin-member-table {
    min-width: 680px;
  }

  .admin-member-table th,
  .admin-member-table td {
    padding: 12px;
  }
}


/* =========================================================
   ADMIN OPERATIONS CARDS
   ========================================================= */

.admin-operation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.admin-operation-card {
  position: relative;
  display: flex;
  gap: 13px;
  min-height: 142px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.admin-operation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.admin-operation-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(80,220,140,.16);
  background: rgba(80,220,140,.07);
}

.admin-operation-icon span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

/* Shield */
.admin-icon-shield {
  border: 2px solid currentColor;
  border-radius: 9px 9px 11px 11px;
  color: #63e49a;
  clip-path: polygon(
    50% 0,
    94% 16%,
    88% 65%,
    50% 100%,
    12% 65%,
    6% 16%
  );
}

/* Book */
.admin-icon-book {
  border: 2px solid currentColor;
  border-radius: 3px;
  color: #63e49a;
}

.admin-icon-book::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -2px;
  width: 2px;
  height: 18px;
  background: currentColor;
}

/* History */
.admin-icon-history {
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #63e49a;
}

.admin-icon-history::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 2px;
  height: 7px;
  background: currentColor;
}

.admin-icon-history::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(35deg);
  transform-origin: left center;
}

.admin-operation-content {
  min-width: 0;
  flex: 1;
}

.admin-operation-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.admin-operation-top strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.admin-operation-badge {
  flex-shrink: 0;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.admin-operation-badge.security {
  color: #f0c96b;
  background: rgba(240,201,107,.08);
  border: 1px solid rgba(240,201,107,.14);
}

.admin-operation-badge.content {
  color: #72b9ff;
  background: rgba(114,185,255,.08);
  border: 1px solid rgba(114,185,255,.14);
}

.admin-operation-badge.logged {
  color: #63e49a;
  background: rgba(99,228,154,.08);
  border: 1px solid rgba(99,228,154,.14);
}

.admin-operation-content p {
  margin: 8px 0 13px;
  color: rgba(255,255,255,.53);
  font-size: 11px;
  line-height: 1.55;
}

.admin-operation-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
}

.admin-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #63e49a;
  box-shadow: 0 0 8px rgba(99,228,154,.35);
}

@media (max-width: 900px) {
  .admin-operation-grid {
    grid-template-columns: 1fr;
  }

  .admin-operation-card {
    min-height: 0;
  }
}


/* =========================================================
   ADMIN AUDIT TRAIL VIEWER
   ========================================================= */

.admin-audit-card {
  position: relative;
}

.admin-audit-view-btn,
.admin-audit-refresh-btn {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.admin-audit-view-btn {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

.admin-audit-view-btn:hover,
.admin-audit-refresh-btn:hover {
  opacity: .9;
}

.admin-audit-view-btn:active,
.admin-audit-refresh-btn:active {
  transform: scale(.97);
}

.admin-audit-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.admin-audit-panel[hidden] {
  display: none;
}

.admin-audit-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-audit-panel-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-audit-panel-head strong {
  font-size: 15px;
}

.admin-audit-panel-head span {
  font-size: 12px;
  opacity: .6;
}

.admin-audit-refresh-btn {
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.admin-audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-audit-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.admin-audit-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-audit-item-main strong {
  font-size: 13px;
}

.admin-audit-item-main span {
  font-size: 12px;
  opacity: .65;
  word-break: break-word;
}

.admin-audit-item-main small {
  font-size: 11px;
  opacity: .5;
  word-break: break-word;
}

.admin-audit-item-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.admin-audit-item-meta strong {
  font-size: 12px;
}

.admin-audit-item-meta span {
  font-size: 10px;
  opacity: .5;
  white-space: nowrap;
}

.admin-audit-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 12px;
  opacity: .55;
}

@media (max-width: 600px) {
  .admin-audit-panel-head {
    align-items: flex-start;
  }

  .admin-audit-item {
    flex-direction: column;
  }

  .admin-audit-item-meta {
    align-items: flex-start;
    text-align: left;
  }

  .admin-audit-item-meta span {
    white-space: normal;
  }
}


/* =========================================================
   AREWAHUB — FINAL PREMIUM AUTH EXPERIENCE
   ========================================================= */

.auth{
  min-height:100dvh;
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px calc(36px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 8%,rgba(25,210,145,.13) 0,rgba(25,210,145,.045) 23%,transparent 48%),
    radial-gradient(circle at 8% 55%,rgba(0,255,190,.045),transparent 34%),
    radial-gradient(circle at 92% 85%,rgba(20,150,110,.04),transparent 34%),
    #020504;
}

.auth::before{
  content:"";
  position:fixed;
  width:280px;
  height:280px;
  left:50%;
  top:2%;
  transform:translateX(-50%);
  background:rgba(25,220,150,.075);
  filter:blur(80px);
  border-radius:50%;
  pointer-events:none;
}

.auth::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 72%,rgba(59,229,163,.025) 100%);
}

.auth-box{
  position:relative;
  z-index:2;
  width:min(100%,390px);
  margin:auto;
  padding:8px 0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.auth-box .brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 34px;
  text-decoration:none;
}

.auth-box .brand-logo-img{
  display:block;
  width:auto;
  height:48px;
  max-width:190px;
  object-fit:contain;
  filter:drop-shadow(0 12px 32px rgba(25,220,150,.18));
  transition:transform .25s var(--ease),filter .25s ease;
}

.auth-box .brand:active .brand-logo-img{
  transform:scale(.97);
}

.login-heading{
  text-align:left;
  margin:0 0 26px;
}

.login-heading .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 11px;
  margin-bottom:13px;
  border:1px solid rgba(59,229,163,.18);
  border-radius:999px;
  background:rgba(59,229,163,.055);
  color:var(--brand);
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.login-heading h1{
  margin:0 0 9px;
  font-size:31px;
  line-height:1.08;
  letter-spacing:-1px;
  font-weight:850;
  color:var(--text);
}

.login-heading p{
  max-width:350px;
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.65;
}

.form{
  width:100%;
}

.form .field{
  margin-bottom:17px;
}

.form label{
  display:block;
  margin:0 0 8px;
  color:rgba(238,246,243,.78);
  font-size:11.5px;
  line-height:1;
  font-weight:750;
  letter-spacing:.01em;
}

.form input{
  width:100%;
  min-height:54px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:15px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(9,15,13,.72);
  color:var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 30px rgba(0,0,0,.14);
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .15s var(--ease);
}

.form input::placeholder{
  color:rgba(180,194,189,.38);
}

.form input:focus{
  outline:none;
  border-color:rgba(59,229,163,.5);
  background:
    linear-gradient(180deg,rgba(59,229,163,.045),rgba(255,255,255,.018)),
    rgba(9,17,14,.9);
  box-shadow:
    0 0 0 3px rgba(59,229,163,.075),
    0 12px 32px rgba(0,0,0,.2);
}

.login-input{
  position:relative;
}

.login-input input{
  padding-right:56px;
}

.password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  width:39px;
  height:39px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--faint);
  cursor:pointer;
  transition:
    color .2s ease,
    background .2s ease,
    transform .15s var(--ease);
}

.password-toggle:hover{
  color:var(--brand);
  background:rgba(59,229,163,.075);
}

.password-toggle:active{
  transform:translateY(-50%) scale(.93);
}

.password-toggle svg{
  width:17px;
  height:17px;
}

.login-meta{
  display:flex;
  justify-content:flex-end;
  margin:-1px 2px 20px;
}

.login-meta a{
  color:var(--brand);
  font-size:11.5px;
  font-weight:800;
  text-decoration:none;
}

.login-meta a:active{
  opacity:.7;
}

.cf-turnstile{
  min-height:65px;
  margin:0 0 8px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.auth-box .btn.primary,
.auth-box .btn.full{
  width:100%;
  min-height:55px;
  margin-top:5px;
  border-radius:16px;
  font-size:13.5px;
  font-weight:850;
  letter-spacing:.01em;
  box-shadow:
    0 12px 30px rgba(20,190,130,.13),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:
    transform .16s var(--ease),
    box-shadow .2s ease,
    filter .2s ease;
}

.auth-box .btn.primary:hover{
  filter:brightness(1.04);
  box-shadow:
    0 15px 34px rgba(20,190,130,.19),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.auth-box .btn.primary:active{
  transform:scale(.985);
}

#loginMessage{
  min-height:0;
  margin-top:10px;
}

.login-footer{
  margin:25px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}

.login-footer a{
  color:var(--brand);
  font-weight:850;
  text-decoration:none;
}

.login-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:24px;
  color:rgba(180,194,189,.42);
  font-size:10px;
}

.login-security .icon{
  opacity:.7;
}

@media(max-width:480px){

  .auth{
    align-items:flex-start;
    padding:38px 20px calc(30px + var(--safe-bottom));
  }

  .auth-box{
    width:min(100%,390px);
    margin:0 auto;
    padding-top:6px;
  }

  .auth-box .brand{
    margin-bottom:38px;
  }

  .auth-box .brand-logo-img{
    height:46px;
    max-width:180px;
  }

  .login-heading{
    margin-bottom:25px;
  }

  .login-heading h1{
    font-size:29px;
  }

  .login-heading p{
    font-size:13px;
  }

  .form input{
    min-height:53px;
  }

  .auth-box .btn.primary,
  .auth-box .btn.full{
    min-height:54px;
  }
}

@media(min-width:481px){
  .auth-box{
    padding:24px 28px 28px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:28px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012)),
      rgba(3,8,6,.54);
    box-shadow:
      0 28px 80px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }
}


/* =========================================================
   AREWAHUB — FIRST ENTRY / PREMIUM WELCOME
   ========================================================= */

.welcome-screen{
  position:relative;
  width:100%;
  min-height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 19%,rgba(42,220,157,.12) 0,rgba(42,220,157,.045) 20%,transparent 45%),
    radial-gradient(circle at 4% 82%,rgba(0,190,150,.055),transparent 31%),
    radial-gradient(circle at 96% 72%,rgba(25,145,115,.045),transparent 32%),
    linear-gradient(145deg,#010403 0%,#020806 48%,#010302 100%);
  color:var(--text);
}

.welcome-screen::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:390px;
  height:390px;
  left:50%;
  top:-175px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(25,220,150,.075);
  filter:blur(90px);
  pointer-events:none;
}

.welcome-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 72%,rgba(59,229,163,.025) 100%);
}

.welcome-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(1px);
  opacity:.7;
}

.welcome-orb-one{
  width:115px;
  height:115px;
  top:13%;
  right:-48px;
  background:
    radial-gradient(circle at 32% 28%,rgba(91,255,197,.32),transparent 35%),
    radial-gradient(circle,rgba(18,157,111,.13),transparent 68%);
  filter:blur(14px);
}

.welcome-orb-two{
  width:150px;
  height:150px;
  bottom:4%;
  left:-72px;
  background:rgba(15,165,120,.08);
  filter:blur(35px);
}

.welcome-corner{
  position:absolute;
  pointer-events:none;
  opacity:.75;
}

.welcome-corner-top{
  width:170px;
  height:170px;
  top:-105px;
  left:-105px;
  border-radius:50%;
  border:1px solid rgba(59,229,163,.16);
  box-shadow:
    22px 22px 0 -21px rgba(59,229,163,.08),
    44px 44px 0 -42px rgba(59,229,163,.05);
}

.welcome-corner-bottom{
  width:210px;
  height:210px;
  right:-142px;
  bottom:-142px;
  border-radius:50%;
  border:1px solid rgba(59,229,163,.12);
}

.welcome-content{
  width:min(100%,410px);
  min-height:100dvh;
  padding:
    calc(52px + env(safe-area-inset-top))
    22px
    calc(34px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.welcome-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin:0 auto 48px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.welcome-logo{
  display:block;
  width:auto;
  height:47px;
  max-width:185px;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 28px rgba(23,211,148,.17))
    drop-shadow(0 0 18px rgba(23,211,148,.06));
  animation:welcomeLogoIn .7s ease both;
}

@keyframes welcomeLogoIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.welcome-copy{
  animation:welcomeCopyIn .65s .08s ease both;
}

@keyframes welcomeCopyIn{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.welcome-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:16px;
  color:rgba(85,239,179,.76);
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2em;
}

.welcome-eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:rgba(59,229,163,.55);
}

.welcome-copy h1{
  margin:0;
  max-width:370px;
  font-size:clamp(34px,9vw,43px);
  line-height:1.02;
  letter-spacing:-1.65px;
  font-weight:850;
  color:#f0f7f4;
}

.welcome-copy p{
  max-width:330px;
  margin:16px 0 0;
  color:rgba(185,201,195,.62);
  font-size:13px;
  line-height:1.65;
}

.welcome-actions{
  display:grid;
  gap:11px;
  margin-top:38px;
  animation:welcomeActionsIn .7s .16s ease both;
}

@keyframes welcomeActionsIn{
  from{
    opacity:0;
    transform:translateY(17px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.welcome-btn{
  position:relative;
  min-height:58px;
  width:100%;
  padding:0 17px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-radius:17px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.05px;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .16s var(--ease),
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.welcome-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    rgba(255,255,255,.045),
    transparent 42%,
    rgba(255,255,255,.018)
  );
}

.welcome-btn-primary{
  color:#07120e;
  background:
    linear-gradient(135deg,#8df4c9 0%,#4ce6ad 48%,#2bd998 100%);
  border:1px solid rgba(164,255,218,.48);
  box-shadow:
    0 14px 35px rgba(25,205,143,.13),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.welcome-btn-primary:hover{
  box-shadow:
    0 17px 40px rgba(25,205,143,.2),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.welcome-btn-secondary{
  color:#edf6f2;
  background:
    linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)),
    rgba(7,13,11,.72);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 12px 30px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.welcome-btn-secondary:hover{
  border-color:rgba(59,229,163,.24);
  background:
    linear-gradient(145deg,rgba(59,229,163,.06),rgba(255,255,255,.018)),
    rgba(7,15,12,.8);
}

.welcome-btn:active{
  transform:scale(.982);
}

.welcome-arrow{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:17px;
  line-height:1;
  transition:transform .18s var(--ease);
}

.welcome-btn-primary .welcome-arrow{
  background:rgba(2,42,28,.11);
}

.welcome-btn-secondary .welcome-arrow{
  background:rgba(255,255,255,.055);
  color:var(--brand);
}

.welcome-btn:hover .welcome-arrow{
  transform:translate(2px,-2px);
}

.welcome-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:30px;
  color:rgba(180,196,190,.32);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation:welcomeFooterIn .8s .28s ease both;
}

@keyframes welcomeFooterIn{
  from{opacity:0}
  to{opacity:1}
}

.welcome-footer-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(59,229,163,.55);
  box-shadow:0 0 9px rgba(59,229,163,.35);
}

@media(max-width:480px){

  .welcome-content{
    padding-left:21px;
    padding-right:21px;
    padding-top:calc(44px + env(safe-area-inset-top));
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }

  .welcome-brand{
    margin-bottom:44px;
  }

  .welcome-logo{
    height:45px;
    max-width:175px;
  }

  .welcome-copy h1{
    font-size:35px;
  }

  .welcome-actions{
    margin-top:34px;
  }

  .welcome-btn{
    min-height:57px;
    border-radius:16px;
  }
}

@media(min-width:481px){

  .welcome-content{
    min-height:auto;
    padding:48px 30px;
  }

  .welcome-screen{
    padding:30px 0;
  }

  .welcome-content{
    border:1px solid rgba(255,255,255,.045);
    border-radius:30px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
      rgba(2,7,5,.46);
    box-shadow:
      0 30px 90px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
}

@media(prefers-reduced-motion:reduce){
  .welcome-logo,
  .welcome-copy,
  .welcome-actions,
  .welcome-footer{
    animation:none;
  }

  .welcome-btn,
  .welcome-arrow{
    transition:none;
  }
}


/* =========================================================
   AREWAHUB PREMIUM AUTH INPUT SYSTEM
   ========================================================= */

.auth-shell input:not([type="checkbox"]):not([type="radio"]),
.auth-form input:not([type="checkbox"]):not([type="radio"]),
.login-field input,
.register-field input,
.forgot-field input {
  width:100%;
  height:56px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
  color:var(--text);
  font-size:15px;
  font-weight:600;
  letter-spacing:.05px;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(0,0,0,.12);
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.auth-shell input:not([type="checkbox"]):not([type="radio"])::placeholder,
.auth-form input::placeholder,
.login-field input::placeholder,
.register-field input::placeholder,
.forgot-field input::placeholder {
  color:rgba(255,255,255,.34);
  font-weight:500;
}

.auth-shell input:not([type="checkbox"]):not([type="radio"]):hover,
.auth-form input:hover,
.login-field input:hover,
.register-field input:hover,
.forgot-field input:hover {
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.03)
    );
}

.auth-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-form input:focus,
.login-field input:focus,
.register-field input:focus,
.forgot-field input:focus {
  border-color:rgba(59,229,163,.72);
  background:
    linear-gradient(
      180deg,
      rgba(59,229,163,.065),
      rgba(255,255,255,.028)
    );
  box-shadow:
    0 0 0 4px rgba(59,229,163,.075),
    0 14px 34px rgba(0,0,0,.20);
  transform:translateY(-1px);
}

.auth-shell label,
.auth-form label,
.login-field label,
.register-field label,
.forgot-field label {
  display:block;
  margin:0 0 8px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:750;
  letter-spacing:.01em;
}

.auth-shell .password-toggle,
.auth-form .password-toggle,
.login-input .password-toggle {
  width:40px;
  height:40px;
  right:9px;
  border-radius:12px;
  color:rgba(255,255,255,.42);
  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.auth-shell .password-toggle:hover,
.auth-form .password-toggle:hover,
.login-input .password-toggle:hover {
  color:var(--brand);
  background:rgba(59,229,163,.08);
}

.auth-shell .password-toggle:active,
.auth-form .password-toggle:active,
.login-input .password-toggle:active {
  transform:translateY(-50%) scale(.94);
}

/* OTP */

.auth-shell .otp-box,
.auth-form .otp-box {
  width:58px;
  height:64px;
  padding:0;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.022)
    );
  color:var(--text);
  text-align:center;
  font-size:24px;
  font-weight:800;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(0,0,0,.13);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}

.auth-shell .otp-box:focus,
.auth-form .otp-box:focus,
.auth-shell .otp-box.filled,
.auth-form .otp-box.filled {
  border-color:rgba(59,229,163,.72);
  background:
    linear-gradient(
      180deg,
      rgba(59,229,163,.08),
      rgba(255,255,255,.025)
    );
  box-shadow:
    0 0 0 4px rgba(59,229,163,.065),
    0 12px 30px rgba(0,0,0,.18);
  transform:translateY(-2px);
}

@media(max-width:520px){
  .auth-shell input:not([type="checkbox"]):not([type="radio"]),
  .auth-form input:not([type="checkbox"]):not([type="radio"]),
  .login-field input,
  .register-field input,
  .forgot-field input {
    height:54px;
    border-radius:15px;
  }

  .auth-shell .otp-box,
  .auth-form .otp-box {
    width:calc((100vw - 76px)/4);
    max-width:58px;
    height:60px;
    border-radius:16px;
  }
}

/* AUTH FIELD NORMALIZATION */

.auth-shell .field input,
.auth-shell .reset-field input,
.auth-shell .reset-field:not(.reset-button),
.auth-shell .field > input,
.auth-shell .register-field input,
.auth-shell .login-input input {
  box-sizing:border-box;
}

.auth-shell .field > input,
.auth-shell .reset-field:not(.reset-button),
.auth-shell .reset-field input,
.auth-shell .register-field input {
  height:56px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
  color:var(--text);
  font-size:15px;
  font-weight:600;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(0,0,0,.12);
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.auth-shell .field > input:focus,
.auth-shell .reset-field:not(.reset-button):focus,
.auth-shell .reset-field input:focus,
.auth-shell .register-field input:focus {
  border-color:rgba(59,229,163,.72);
  background:
    linear-gradient(
      180deg,
      rgba(59,229,163,.065),
      rgba(255,255,255,.028)
    );
  box-shadow:
    0 0 0 4px rgba(59,229,163,.075),
    0 14px 34px rgba(0,0,0,.20);
  transform:translateY(-1px);
}

.auth-shell .field > input::placeholder,
.auth-shell .reset-field::placeholder,
.auth-shell .reset-field input::placeholder,
.auth-shell .register-field input::placeholder {
  color:rgba(255,255,255,.34);
  font-weight:500;
}

.auth-shell .field label,
.auth-shell .reset-field label,
.auth-shell .register-field label {
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:750;
  margin-bottom:8px;
}

@media(max-width:520px){
  .auth-shell .field > input,
  .auth-shell .reset-field:not(.reset-button),
  .auth-shell .reset-field input,
  .auth-shell .register-field input {
    height:54px;
    border-radius:15px;
  }
}

/* =========================================================
   AREWAHUB 2026 — NEW VISUAL FOUNDATION
   UI ONLY — BACKEND / API / JS UNTOUCHED
   ========================================================= */

:root{
  --bg:#07101a;
  --bg-2:#0a1520;
  --surface:#0e1b28;
  --surface-2:#132333;
  --raise:#182b3e;

  --text:#f4f8fc;
  --muted:#91a4b7;
  --faint:#607589;

  --brand:#6ee7b7;
  --brand-2:#38d39f;
  --brand-soft:rgba(110,231,183,.10);
  --brand-soft-2:rgba(110,231,183,.16);

  --accent:#7dd3fc;
  --danger:#fb7185;
  --warning:#fbbf24;
  --info:#60a5fa;

  --success-bg:rgba(110,231,183,.10);
  --danger-bg:rgba(251,113,133,.10);

  --line:rgba(203,226,244,.09);
  --line-strong:rgba(203,226,244,.16);

  --radius-xs:12px;
  --radius-s:15px;
  --radius-m:20px;
  --radius-l:28px;
  --radius-xl:34px;

  --grad:linear-gradient(135deg,#6ee7b7 0%,#38d39f 100%);
  --grad-soft:linear-gradient(145deg,rgba(110,231,183,.13),rgba(56,211,159,.035));

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px rgba(0,0,0,.34);
  --shadow-soft:0 14px 36px rgba(0,0,0,.24);
  --shadow-sm:0 8px 22px rgba(0,0,0,.18);
}

body{
  background:
    radial-gradient(800px 420px at 100% -10%,rgba(110,231,183,.08),transparent 65%),
    radial-gradient(700px 400px at -15% 30%,rgba(125,211,252,.055),transparent 65%),
    var(--bg);
}

.top{
  background:rgba(7,16,26,.76);
  border-bottom-color:rgba(203,226,244,.08);
}

.card,
.panel,
.tile,
.action,
.opportunity,
.chart,
.notice{
  background:rgba(14,27,40,.82);
  border-color:rgba(203,226,244,.09);
  box-shadow:0 8px 28px rgba(0,0,0,.10);
}

.card:hover,
.panel:hover,
.tile:hover,
.action:hover{
  border-color:rgba(110,231,183,.16);
}

.hero,
.ad-hero{
  background:
    radial-gradient(circle at 90% 5%,rgba(110,231,183,.15),transparent 38%),
    linear-gradient(145deg,#102b2a,#0d1b29 65%);
  border-color:rgba(110,231,183,.16);
  box-shadow:var(--shadow-soft);
}

.btn{
  border-radius:15px;
  min-height:48px;
}

.btn.primary{
  background:var(--grad);
  box-shadow:0 10px 28px rgba(56,211,159,.20);
}

.btn.secondary{
  background:rgba(110,231,183,.10);
  border-color:rgba(110,231,183,.20);
}

.btn.ghost{
  background:rgba(14,27,40,.70);
  border-color:rgba(203,226,244,.13);
}

.field input,
.field select,
.field textarea,
.ad-form input,
.ad-form select,
.ad-form textarea{
  background:#0a1622;
  border-color:rgba(203,226,244,.10);
  border-radius:16px;
  min-height:52px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.ad-form input:focus,
.ad-form select:focus,
.ad-form textarea:focus{
  border-color:rgba(110,231,183,.55);
  box-shadow:0 0 0 4px rgba(110,231,183,.08);
}

.bottom{
  background:rgba(9,19,29,.88);
  border-color:rgba(203,226,244,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.38);
}

.nav.active{
  background:rgba(110,231,183,.11);
  color:var(--brand);
}


/* Notification bell unread badge */
.notify{
  position:relative;
}

.ah-notification-badge{
  position:absolute;
  top:-4px;
  right:-5px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font:700 9px/1 Arial,sans-serif;
  border:2px solid #0b0f14;
  box-sizing:border-box;
  pointer-events:none;
}

.ah-notification-badge[hidden]{
  display:none;
}


/* =========================================================
   Premium Header Actions
   ========================================================= */
.top-actions{
  gap:10px;
}

.notify{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.notify:hover{
  color:var(--brand);
  background:var(--brand-soft);
  border-color:rgba(59,229,163,.28);
  box-shadow:0 6px 20px rgba(20,176,126,.16);
}

.notify:active{
  background:var(--brand-soft);
  color:var(--brand);
  transform:scale(.92);
}

.notify svg{
  width:20px;
  height:20px;
}

.avatar.circle{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(59,229,163,.28);
  box-shadow:
    0 5px 18px rgba(20,176,126,.20),
    inset 0 0 0 2px rgba(255,255,255,.08);
  transition:
    transform .18s var(--ease),
    box-shadow .2s var(--ease),
    border-color .2s var(--ease);
}

.avatar.circle:hover{
  border-color:rgba(59,229,163,.55);
  box-shadow:
    0 7px 22px rgba(20,176,126,.28),
    inset 0 0 0 2px rgba(255,255,255,.12);
}

.avatar.circle:active{
  transform:scale(.92);
}

.notify .ah-notification-badge{
  top:1px;
  right:0;
}

@media(min-width:1020px){
  .top-actions{
    gap:10px;
  }

  .notify,
  .avatar.circle{
    width:44px;
    height:44px;
  }
}

/* =========================================================
   ADVERTISER CAMPAIGN BUDGET GUIDE
   ========================================================= */

.ad-budget-guide{
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.035),
    rgba(255,255,255,.015)
  );
}

.ad-budget-guide-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.ad-budget-guide-head .icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  flex:none;
}

.ad-budget-guide-head h3{
  margin:3px 0 0;
}

.ad-budget-guide > p.subtle{
  margin:0;
  line-height:1.6;
}

.ad-budget-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.ad-budget-flow > div{
  min-width:0;
  padding:13px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.ad-budget-flow strong{
  display:block;
  margin-bottom:4px;
}

.ad-budget-flow span{
  display:block;
  font-size:12px;
  line-height:1.45;
  opacity:.7;
}

.ad-budget-arrow{
  opacity:.45;
  font-size:18px;
}

.ad-budget-note{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
}

.ad-budget-note strong{
  display:block;
  margin-bottom:5px;
}

.ad-budget-note p{
  margin:0;
  line-height:1.55;
  font-size:13px;
  opacity:.78;
}

.ad-budget-disclaimer{
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  opacity:.6;
}

@media(max-width:640px){

  .ad-budget-guide{
    padding:15px;
  }

  .ad-budget-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .ad-budget-arrow{
    display:none;
  }

}


/* =========================================================
   AREWAHUB ADMIN CONTROL CENTER
   ========================================================= */

.admin-app{
  min-height:100vh;
}

.admin-top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.admin-brand-label{
  display:inline-block;
  margin-left:5px;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:700;
  opacity:.55;
}

.admin-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.admin-secure-state{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:600;
  opacity:.72;
}

.admin-secure-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#48c78e;
  box-shadow:0 0 10px rgba(72,199,142,.5);
}

.admin-content{
  padding-bottom:60px;
}

.admin-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
}

.admin-hero h1{
  margin:6px 0 7px;
  letter-spacing:-.035em;
}

.admin-hero .subtle{
  max-width:650px;
  line-height:1.6;
}

.admin-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:32px;
}

.admin-overview-card{
  min-height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.admin-overview-card:after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(255,255,255,.025);
}

.admin-overview-card strong{
  margin:7px 0 3px;
  font-size:27px;
  letter-spacing:-.035em;
}

.admin-overview-card small{
  opacity:.58;
}

.admin-section{
  margin-top:34px;
}

.admin-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.admin-section-heading h2{
  margin:5px 0 0;
  letter-spacing:-.025em;
}

.admin-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.admin-module{
  min-width:0;
  min-height:82px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:17px;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-decoration:none;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.admin-module:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
}

.admin-module:active{
  transform:scale(.985);
}

.admin-module .icon{
  width:40px;
  height:40px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.055);
}

.admin-module > div{
  min-width:0;
  flex:1;
}

.admin-module strong{
  display:block;
  margin-bottom:4px;
}

.admin-module small{
  display:block;
  line-height:1.4;
  opacity:.58;
}

.admin-module-arrow{
  font-size:22px;
  opacity:.32;
  flex:none;
}

.admin-permission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}

.admin-permission-grid label{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  font-size:13px;
}

.admin-permission-grid input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:currentColor;
}

@media (max-width:640px){
  .admin-permission-grid{
    grid-template-columns:1fr;
  }
}

.admin-finance-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
}

.admin-pool-card,
.admin-control-card{
  min-height:190px;
}

.admin-pool-card > strong{
  display:block;
  margin:8px 0 18px;
  font-size:30px;
  letter-spacing:-.04em;
}

.admin-pool-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.admin-pool-stats > div{
  padding:11px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
}

.admin-pool-stats small{
  display:block;
  margin-bottom:5px;
  opacity:.55;
}

.admin-pool-stats strong{
  font-size:13px;
}

.admin-control-card h3{
  margin:8px 0 7px;
}

.admin-control-card > .subtle{
  line-height:1.55;
}

.admin-control-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:15px;
  padding:12px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  font-size:12px;
  line-height:1.5;
  opacity:.72;
}

.admin-control-note .icon{
  width:18px;
  height:18px;
  flex:none;
}

.admin-rewards-card{
  margin-top:14px;
  overflow:hidden;
}

.admin-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px;
}

.admin-card-heading h3{
  margin:5px 0 0;
}

.admin-rewards-list{
  display:flex;
  flex-direction:column;
}

.admin-reward-row{
  display:grid;
  grid-template-columns:minmax(170px,1.5fr) 100px 120px 105px 145px;
  align-items:center;
  gap:14px;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.admin-reward-main{
  min-width:0;
}

.admin-reward-main strong,
.admin-reward-main span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.admin-reward-main span{
  margin-top:4px;
  font-size:12px;
  opacity:.5;
}

.admin-reward-stat small{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  letter-spacing:.08em;
  opacity:.48;
}

.admin-reward-stat strong{
  font-size:13px;
}

.admin-status{
  width:max-content;
  max-width:100%;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  text-transform:capitalize;
  background:rgba(255,255,255,.06);
  color:inherit;
}

.admin-status.unlocked{
  background:rgba(255,193,7,.09);
}

.admin-status.funded{
  background:rgba(80,160,255,.1);
}

.admin-status.approved,
.admin-status.paid{
  background:rgba(72,199,142,.1);
}

.admin-status.pending{
  background:rgba(255,255,255,.06);
}

.admin-reward-action{
  display:flex;
  justify-content:flex-end;
}

.admin-reward-action .btn{
  white-space:nowrap;
}

.admin-empty{
  padding:30px 10px;
  text-align:center;
  font-size:13px;
  opacity:.5;
}

.admin-security-banner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:34px;
  background:rgba(255,255,255,.025);
}

.admin-security-banner > .icon{
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.055);
}

.admin-security-banner strong{
  display:block;
  margin-bottom:5px;
}

.admin-security-banner p{
  margin:0;
  line-height:1.55;
}

@media(max-width:900px){

  .admin-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-module-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-finance-grid{
    grid-template-columns:1fr;
  }

  .admin-reward-row{
    grid-template-columns:1fr 1fr;
  }

  .admin-reward-main{
    grid-column:1 / -1;
  }

  .admin-reward-action{
    justify-content:flex-start;
  }

}

@media(max-width:640px){

  .admin-top-actions{
    gap:7px;
  }

  .admin-secure-state{
    display:none;
  }

  .admin-hero{
    flex-direction:column;
    gap:12px;
  }

  .admin-overview-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .admin-overview-card{
    min-height:112px;
    padding:14px;
  }

  .admin-overview-card strong{
    font-size:22px;
  }

  .admin-module-grid{
    grid-template-columns:1fr;
  }

  .admin-pool-stats{
    grid-template-columns:1fr;
  }

  .admin-reward-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  .admin-reward-main{
    grid-column:auto;
  }

  .admin-reward-action{
    justify-content:flex-start;
  }

}

/* =========================================================
   AREWAHUB PLATFORM CONTROL CENTER
   Premium admin / platform styling
   ========================================================= */

#platform-control{
  position:relative;
}

#platform-control::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 0%,rgba(212,175,55,.10),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(212,175,55,.06),transparent 28%);
}

#platform-control > *{
  position:relative;
  z-index:1;
}

#platform-control .admin-section-heading{
  padding:18px 20px;
  border:1px solid rgba(212,175,55,.20);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(255,255,255,.025));
  box-shadow:0 14px 40px rgba(0,0,0,.16);
}

#platform-control .admin-section-heading h2{
  letter-spacing:-.025em;
}

#platform-control .pill{
  border-color:rgba(212,175,55,.42);
  color:#d4af37;
  background:rgba(212,175,55,.09);
  font-weight:800;
}

#platform-control .admin-finance-grid{
  margin-top:14px;
}

#platform-control .admin-pool-card,
#platform-control .admin-control-card,
#platform-control .admin-rewards-card{
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}

#platform-control .admin-pool-card{
  position:relative;
  overflow:hidden;
}

#platform-control .admin-pool-card::after{
  content:"★";
  position:absolute;
  right:22px;
  top:15px;
  font-size:54px;
  line-height:1;
  color:rgba(212,175,55,.10);
}

#platform-control .admin-pool-card > strong{
  color:#f1d36a;
  font-size:34px;
}

#platform-control .admin-pool-stats > div{
  border:1px solid rgba(255,255,255,.055);
  background:rgba(0,0,0,.12);
}

#platform-control .admin-control-card{
  position:relative;
}

#platform-control .admin-control-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg,#d4af37,rgba(212,175,55,.05));
}

#platform-control .admin-control-card h3,
#platform-control .admin-rewards-card h3{
  letter-spacing:-.02em;
}

#platform-control .admin-rewards-card{
  padding:20px;
}

#platform-control .admin-card-heading{
  margin-bottom:8px;
}

#platform-control .admin-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

#platform-control .admin-form-grid input,
#platform-control .admin-form-grid select{
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.22);
  color:inherit;
  padding:0 14px;
  outline:none;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#platform-control .admin-form-grid input::placeholder{
  color:inherit;
  opacity:.42;
}

#platform-control .admin-form-grid input:focus,
#platform-control .admin-form-grid select:focus{
  border-color:rgba(212,175,55,.65);
  background:rgba(212,175,55,.055);
  box-shadow:0 0 0 3px rgba(212,175,55,.09);
}

#platform-control .admin-form-grid select{
  appearance:auto;
  cursor:pointer;
}

#platform-control .admin-form-grid .btn{
  min-height:48px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

#platform-control .admin-form-grid .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

#platform-control .admin-form-grid .btn:active{
  transform:scale(.985);
}

#platform-control .admin-form-grid .btn.primary{
  border:1px solid rgba(212,175,55,.38);
  background:linear-gradient(135deg,#d4af37,#a98218);
  color:#111;
}

#platform-control .admin-form-grid .btn.primary:hover{
  filter:brightness(1.06);
}

#platform-control .subtle{
  opacity:.72;
}

@media(max-width:760px){
  #platform-control .admin-finance-grid{
    grid-template-columns:1fr;
  }

  #platform-control .admin-form-grid{
    grid-template-columns:1fr;
  }

  #platform-control .admin-section-heading{
    padding:16px;
  }

  #platform-control .admin-rewards-card{
    padding:16px;
  }

  #platform-control .admin-pool-card > strong{
    font-size:30px;
  }
}


/* Dashboard welcome logo */
.dash-welcome-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  object-position:center;
  flex:0 0 58px;
}

@media(max-width:520px){
  .dash-welcome-logo{
    width:52px;
    height:52px;
    flex-basis:52px;
  }
}

/* Dashboard top brand + welcome layout */
.top-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.top-brand img{
  width:auto;
  height:30px;
  max-width:150px;
  object-fit:contain;
  display:block;
}

.top-actions{
  gap:4px;
}

.notify{
  width:42px;
  height:42px;
}

.notify svg{
  width:22px;
  height:22px;
}

.dash-hello{
  display:block;
  margin:0 0 22px;
}

.dash-hello h1{
  margin:0;
  font-size:25px;
  letter-spacing:-.55px;
  line-height:1.15;
  font-weight:800;
}

@media(max-width:520px){
  .top-brand img{
    height:29px;
    max-width:145px;
  }

  .notify{
    width:42px;
    height:42px;
  }

  .notify svg{
    width:22px;
    height:22px;
  }
}

/* Premium ArewaHub wordmark */
.top-brand{
  display:flex;
  align-items:center;
  font-size:20px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.7px;
  white-space:nowrap;
  text-decoration:none;
}

.top-brand .arewa-text{
  color:#fff;
}

.top-brand .hub-text{
  color:var(--brand);
  margin-left:1px;
}

@media(max-width:520px){
  .top-brand{
    font-size:19px;
    letter-spacing:-.65px;
  }
}

/* Welcome Back — slightly larger */
.dash-hello h1{
  font-size:28px;
}

/* ArewaHub premium wordmark */
.top-brand{
  font-size:23px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1;
}

.top-brand .arewa-text{
  color:#fff;
}

.top-brand .hub-text{
  color:var(--brand);
  margin-left:1px;
}

@media(max-width:520px){
  .top-brand{
    font-size:22px;
    letter-spacing:-.9px;
  }
}

/* =========================================================
   AREWAHUB — PREMIUM DASHBOARD VISUAL REDESIGN
   UI ONLY — NO FUNCTIONALITY CHANGES
   ========================================================= */

:root{
  --ah-deep:#06110e;
  --ah-deep-2:#081713;
  --ah-green:#08745f;
  --ah-green-2:#0a8b70;
  --ah-green-soft:rgba(10,139,112,.12);
  --ah-gold:#d5a13a;
}

/* ---------- Main page ---------- */

body{
  background:
    radial-gradient(circle at 50% -10%,rgba(8,116,95,.10),transparent 38%),
    var(--bg);
}

/* ---------- Top header / ArewaHub logo ---------- */

.top{
  background:rgba(5,12,10,.88);
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}

.top-brand{
  font-size:24px;
  font-weight:950;
  letter-spacing:-1.15px;
}

.top-brand .arewa-text{
  color:#f4f7f5;
}

.top-brand .hub-text{
  color:#0da887;
  margin-left:1px;
}

.notify{
  width:40px;
  height:40px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
}

.notify svg{
  width:20px;
  height:20px;
}

/* ---------- Welcome area ---------- */

.dash-hello{
  margin:4px 0 20px;
  padding:0 2px;
}

.dash-hello h1{
  margin:0;
  font-size:27px;
  font-weight:850;
  letter-spacing:-.7px;
  line-height:1.12;
}

.dash-hello::after{
  content:"Earn More. Grow More.";
  display:block;
  margin-top:7px;
  color:#7e918b;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.15px;
}

/* ---------- Main wallet hero ---------- */

.hero{
  border-radius:24px;
  padding:21px;
  margin-bottom:16px;

  background:
    radial-gradient(circle at 100% 0%,rgba(10,139,112,.24),transparent 43%),
    linear-gradient(145deg,#0c211b,#07130f 72%);

  border:1px solid rgba(13,168,135,.24);
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.hero::before{
  right:-95px;
  top:-105px;
  width:260px;
  height:260px;
  background:radial-gradient(
    circle,
    rgba(10,139,112,.20),
    transparent 68%
  );
}

.hero::after{
  display:none;
}

.hero-top{
  margin-bottom:7px;
}

.hero .muted{
  color:#84968f;
  font-size:9.5px;
  letter-spacing:.14em;
}

.balance{
  font-size:38px;
  font-weight:900;
  letter-spacing:-1.5px;
  margin:7px 0 15px;
}

.balance-meta{
  gap:8px 22px;
  margin-bottom:19px;
}

.balance-meta i{
  color:#72857e;
  font-size:9.5px;
}

.balance-meta b{
  font-size:12.5px;
}

/* ---------- Hero buttons ---------- */

.actions{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:10px;
}

.actions .btn{
  min-width:0;
  width:100%;
}

.btn{
  min-height:48px;
  padding:12px 15px;
  border-radius:14px;
  font-size:13px;
  font-weight:850;
}

.btn.primary{
  background:linear-gradient(135deg,#0b9677,#08745f);
  color:#f5fffb;
  border:1px solid rgba(46,211,169,.22);
  box-shadow:0 8px 20px rgba(5,105,84,.28);
}

.btn.primary svg{
  color:#d9fff2;
}

.btn.ghost{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  color:#e8eeeb;
}

.btn.ghost svg{
  color:#0da887;
}

/* ---------- Statistics ---------- */

.stat-grid{
  gap:10px;
  margin-bottom:17px;
}

.tile{
  padding:15px;
  border-radius:17px;
  background:linear-gradient(145deg,#0b1512,#09110f);
  border:1px solid rgba(255,255,255,.055);
}

.tile .tile-ico{
  top:13px;
  right:13px;
  width:32px;
  height:32px;
  border-radius:10px;
}

.tile strong{
  font-size:22px;
  margin-top:6px;
}

.tile small{
  color:#71837d;
  font-size:10.8px;
}

/* ---------- Advertiser strip ---------- */

.ad-strip{
  background:
    linear-gradient(135deg,rgba(8,116,95,.14),rgba(8,20,16,.95));
  border:1px solid rgba(13,168,135,.18);
  border-radius:17px;
}

/* ---------- Sections ---------- */

.section{
  margin:23px 0;
}

.section-head{
  margin-bottom:12px;
}

.section-head h2{
  font-size:17px;
  letter-spacing:-.35px;
}

.section-head .muted{
  color:#71847d;
}

/* ---------- Quick actions ---------- */

.quick{
  gap:10px;
}

.quick .action{
  padding:15px;
  border-radius:17px;
  background:linear-gradient(145deg,#0b1512,#08110e);
  border:1px solid rgba(255,255,255,.055);
}

.quick .action .icon{
  width:38px;
  height:38px;
  border-radius:12px;
}

.quick .action strong{
  font-size:13.5px;
}

.quick .action small{
  font-size:11.5px;
  color:#71837d;
}

/* ---------- Wallet glance / level cards ---------- */

.card,
.panel{
  background:linear-gradient(145deg,#0b1512,#08110e);
  border-color:rgba(255,255,255,.055);
  border-radius:17px;
}

.card.mini{
  padding:15px;
}

.value-row{
  padding:10px 0;
}

.value-row span{
  color:#778983;
}

/* ---------- Earnings chart ---------- */

.chart{
  background:linear-gradient(145deg,#0b1512,#08110e);
  border-color:rgba(255,255,255,.055);
  border-radius:17px;
  padding:16px;
}

/* ---------- Recent activity ----------
   KEEPING EXISTING FUNCTIONALITY / STRUCTURE
   ------------------------------------------ */

.dash-cols{
  margin:23px 0;
}

.panel{
  padding:15px;
}

.panel-body{
  padding-top:5px;
}

.activity-row{
  padding:13px 0;
}

.activity-row small{
  color:#70827c;
}

/* ---------- Bottom navigation ---------- */

.bottom{
  bottom:calc(9px + var(--safe-bottom));
  width:calc(100% - 18px);
  padding:6px;
  gap:3px;

  background:rgba(5,12,10,.91);
  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;

  box-shadow:
    0 14px 35px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);

  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}

.nav{
  padding:7px 4px;
  border-radius:14px;
  color:#687a74;
}

.nav svg{
  width:19px;
  height:19px;
}

.nav.active{
  color:#0da887;
  background:rgba(8,139,112,.12);
}

.nav.active svg{
  color:#0da887;
}

/* ---------- Mobile polish ---------- */

@media(max-width:520px){

  .content{
    padding-left:14px;
    padding-right:14px;
  }

  .top-brand{
    font-size:22px;
  }

  .dash-hello h1{
    font-size:26px;
  }

  .hero{
    padding:19px;
    border-radius:22px;
  }

  .balance{
    font-size:36px;
  }

  .actions{
    grid-template-columns:1.3fr 1fr;
  }

  .actions .btn{
    min-height:47px;
    font-size:12.5px;
  }

  .tile{
    padding:14px;
    border-radius:16px;
  }

  .tile strong{
    font-size:21px;
  }
}

/* =========================================================
   AREWAHUB LOGO — PREMIUM A MARK
   ========================================================= */

.top-brand{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:22px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1;
  white-space:nowrap;
}

.top-brand .ah-logo{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  color:#0ddd98;
  flex:none;
  filter:drop-shadow(0 3px 8px rgba(13,221,152,.16));
}

.top-brand .ah-logo svg{
  width:29px;
  height:29px;
  display:block;
}

.top-brand .arewa-text{
  color:#f4f7f5;
}

.top-brand .hub-text{
  color:#0ddd98;
  margin-left:-1px;
}

@media(max-width:520px){
  .top-brand{
    gap:6px;
    font-size:21px;
    letter-spacing:-.9px;
  }

  .top-brand .ah-logo,
  .top-brand .ah-logo svg{
    width:28px;
    height:28px;
  }
}


/* =========================================================
   AREWAHUB — AUTH PAGES DARK GREEN PREMIUM THEME
   LOGIN + REGISTER — UI ONLY
   ========================================================= */

body:has(.login-screen),
body:has(.register-screen){
  background:
    radial-gradient(circle at 50% -15%,rgba(8,139,112,.12),transparent 40%),
    linear-gradient(180deg,#06110e 0%,#040a08 100%);
  color:#f2f7f5;
}

/* Login / Register background glow */

.login-screen::before,
.register-screen::before{
  background:rgba(8,139,112,.11);
  filter:blur(75px);
}

.login-screen::after,
.register-screen::after{
  background:rgba(8,139,112,.055);
  filter:blur(75px);
}

/* Main authentication cards */

.login-card,
.register-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(8,139,112,.10),transparent 42%),
    linear-gradient(145deg,#0a1813,#06100c 78%);
  border:1px solid rgba(13,168,135,.20);
  box-shadow:
    0 28px 80px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Login / Register headings */

.login-intro h1,
.register-heading{
  color:#f1f7f4;
}

.login-intro p,
.register-subtitle,
.register-footer{
  color:#7c9089;
}

/* Green labels */

.login-kicker,
.register-eyebrow{
  color:#0ddd98;
}

.login-kicker::before,
.register-eyebrow::before{
  background:#0ddd98;
  box-shadow:0 0 12px rgba(13,221,152,.55);
}

/* Form labels */

.login-field label,
.register-field-wrap label{
  color:#b8c9c3;
}

/* Inputs */

.login-control input,
.register-control input{
  background:#07130f;
  border-color:rgba(255,255,255,.075);
  color:#f1f7f4;
}

.login-control input::placeholder,
.register-control input::placeholder{
  color:#526a61;
}

.login-control input:focus,
.register-control input:focus{
  background:#091a14;
  border-color:rgba(13,221,152,.55);
  box-shadow:
    0 0 0 4px rgba(13,221,152,.075),
    0 8px 25px rgba(0,0,0,.18);
}

/* Password / visibility buttons */

.login-password-toggle,
.password-toggle{
  color:#70857d;
}

.login-password-toggle:hover,
.password-toggle:hover{
  color:#0ddd98;
  background:rgba(13,221,152,.08);
}

/* Forgot password */

.login-forgot a{
  color:#8fe5c6;
}

.login-forgot a:hover{
  color:#0ddd98;
}

/* Main auth buttons */

.login-submit,
.register-button{
  background:linear-gradient(135deg,#0b9677,#08745f);
  color:#f4fffb;
  border:1px solid rgba(13,221,152,.20);
  box-shadow:0 9px 24px rgba(5,105,84,.27);
}

.login-submit:hover,
.register-button:hover{
  filter:brightness(1.05);
}

/* Register progress */

.progress-dot{
  background:rgba(255,255,255,.075);
}

.progress-dot.active{
  background:#0ddd98;
  box-shadow:0 0 12px rgba(13,221,152,.22);
}

/* Register email / footer links */

.register-email,
.register-footer a{
  color:#a4ecd3;
}

.register-footer a:hover{
  color:#0ddd98;
}

/* Messages */

.register-message.success{
  color:#0ddd98;
}

/* Divider */

.login-divider{
  color:#536b62;
}

.login-divider::before,
.login-divider::after{
  background:rgba(255,255,255,.07);
}

/* Captcha area */

.login-captcha,
.register-captcha{
  background:transparent;
}

/* Mobile */

@media(max-width:520px){
  .login-card,
  .register-card{
    border-radius:25px;
  }
}



/* LOGIN STARTUP SPLASH */
.ah-auth-loading-hide{
  opacity:0 !important;
  transition:opacity .42s ease;
}

/* =========================================================
   AREWAHUB — ADMIN PREMIUM DARK UI
   UI ONLY — ADMIN LOGIC UNCHANGED
   ========================================================= */

.admin-app{
  --admin-bg:#050908;
  --admin-surface:#0b1210;
  --admin-surface-2:#0f1815;
  --admin-border:rgba(145,185,169,.12);
  --admin-border-strong:rgba(22,227,154,.22);
  --admin-text:#f2f7f4;
  --admin-muted:#8fa99f;
  --admin-green:#16e39a;
  --admin-green-soft:rgba(22,227,154,.10);
  --admin-gold:#d9a441;

  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%,rgba(22,227,154,.08),transparent 32%),
    linear-gradient(180deg,#050908 0%,#030605 100%);
  color:var(--admin-text);
}

.admin-app .admin-top{
  position:sticky;
  top:0;
  z-index:50;
  min-height:72px;
  padding:14px 22px;
  background:rgba(5,9,8,.88);
  border-bottom:1px solid var(--admin-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.admin-app .brand{
  gap:11px;
}

.admin-app .brand-logo-img{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
}

.admin-app .admin-brand-label{
  display:block;
  margin-top:2px;
  color:var(--admin-green);
  font-size:8px;
  font-weight:800;
  letter-spacing:1.8px;
}

.admin-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.admin-secure-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid var(--admin-border);
  border-radius:999px;
  color:#a9bbb4;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  background:rgba(255,255,255,.025);
}

.admin-secure-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--admin-green);
  box-shadow:0 0 12px rgba(22,227,154,.65);
}

.admin-content{
  max-width:1280px;
  margin:0 auto;
  padding:28px 22px 70px;
}

.admin-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:28px;
  margin-bottom:22px;
  border:1px solid var(--admin-border);
  border-radius:24px;
  background:
    radial-gradient(circle at 85% 20%,rgba(22,227,154,.11),transparent 28%),
    linear-gradient(145deg,#0d1714,#080e0c);
  box-shadow:0 20px 55px rgba(0,0,0,.24);
}

.admin-hero::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  bottom:-110px;
  border-radius:50%;
  background:rgba(22,227,154,.07);
  filter:blur(25px);
  pointer-events:none;
}

.admin-hero h1{
  margin:7px 0 8px;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
  letter-spacing:-1.2px;
}

.admin-hero .subtle{
  max-width:650px;
  margin:0;
  color:var(--admin-muted);
  line-height:1.65;
}

.admin-app .pill{
  position:relative;
  z-index:1;
  border-color:var(--admin-border-strong);
  background:var(--admin-green-soft);
  color:var(--admin-green);
  white-space:nowrap;
}

.admin-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:34px;
}

.admin-overview-card{
  position:relative;
  overflow:hidden;
  min-height:140px;
  padding:20px;
  border:1px solid var(--admin-border);
  border-radius:20px;
  background:linear-gradient(145deg,#0d1714,#09100e);
  box-shadow:0 14px 35px rgba(0,0,0,.18);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.admin-overview-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:45%;
  height:1px;
  background:linear-gradient(90deg,var(--admin-green),transparent);
}

.admin-overview-card:hover{
  transform:translateY(-2px);
  border-color:var(--admin-border-strong);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.admin-overview-card strong{
  display:block;
  margin:10px 0 7px;
  font-size:27px;
  line-height:1;
  color:#f5faf7;
  letter-spacing:-.5px;
}

.admin-overview-card small{
  color:#718b81;
}

.admin-section{
  margin-top:34px;
}

.admin-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.admin-section-heading h2{
  margin:5px 0 0;
  font-size:21px;
  letter-spacing:-.35px;
}

.admin-module-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.admin-module{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:78px;
  padding:15px 17px;
  border:1px solid var(--admin-border);
  border-radius:18px;
  background:linear-gradient(145deg,#0c1512,#08100e);
  color:inherit;
  text-decoration:none;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.admin-module:hover{
  transform:translateY(-2px);
  border-color:var(--admin-border-strong);
  background:linear-gradient(145deg,#0e1b17,#09120f);
}

.admin-module .icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(22,227,154,.16);
  border-radius:13px;
  background:rgba(22,227,154,.07);
  color:var(--admin-green);
}

.admin-module strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
}

.admin-module small{
  color:#758e84;
  line-height:1.4;
}

.admin-module-arrow{
  margin-left:auto;
  color:#60786e;
  font-size:24px;
  transition:transform .2s ease,color .2s ease;
}

.admin-module:hover .admin-module-arrow{
  transform:translateX(3px);
  color:var(--admin-green);
}

.admin-finance-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
}

.admin-pool-card,
.admin-control-card,
.admin-rewards-card{
  border:1px solid var(--admin-border);
  border-radius:20px;
  background:linear-gradient(145deg,#0d1714,#09100e);
  box-shadow:0 14px 38px rgba(0,0,0,.20);
}

.admin-pool-card{
  padding:21px;
}

.admin-pool-card > strong{
  display:block;
  margin:9px 0 18px;
  font-size:30px;
  color:#f6faf8;
}

.admin-pool-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.admin-pool-stats > div{
  padding:11px;
  border:1px solid rgba(145,185,169,.08);
  border-radius:13px;
  background:rgba(255,255,255,.018);
}

.admin-pool-stats small{
  display:block;
  margin-bottom:5px;
  color:#718a80;
}

.admin-pool-stats strong{
  font-size:13px;
  color:#dce8e2;
}

.admin-control-card{
  padding:21px;
}

.admin-control-card h3{
  margin:8px 0;
}

.admin-control-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:17px;
  padding:13px;
  border:1px solid rgba(217,164,65,.16);
  border-radius:13px;
  background:rgba(217,164,65,.045);
  color:#b9aa87;
  line-height:1.5;
}

.admin-control-note .icon{
  color:var(--admin-gold);
  flex:0 0 auto;
}

.admin-rewards-card{
  margin-top:14px;
  padding:21px;
}

.admin-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.admin-card-heading h3{
  margin:5px 0 0;
  font-size:18px;
}

.admin-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.admin-form-row{
  display:flex;
  gap:10px;
}

.admin-app input,
.admin-app select,
.admin-app textarea{
  width:100%;
  border:1px solid rgba(145,185,169,.13);
  border-radius:13px;
  background:#07100d;
  color:#eef6f1;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.admin-app input:focus,
.admin-app select:focus,
.admin-app textarea:focus{
  border-color:rgba(22,227,154,.45);
  box-shadow:0 0 0 3px rgba(22,227,154,.07);
}

.admin-app input::placeholder,
.admin-app textarea::placeholder{
  color:#536b62;
}

.admin-app .btn{
  border-radius:13px;
  font-weight:750;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.admin-app .btn.primary{
  box-shadow:0 8px 24px rgba(22,227,154,.12);
}

.admin-app .btn:hover{
  transform:translateY(-1px);
}

.admin-empty{
  padding:28px 16px;
  border:1px dashed rgba(145,185,169,.12);
  border-radius:14px;
  text-align:center;
  color:#647c72;
}

.admin-security-banner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:34px;
  padding:20px;
  border:1px solid rgba(22,227,154,.16);
  border-radius:19px;
  background:
    linear-gradient(145deg,rgba(22,227,154,.065),rgba(255,255,255,.018));
}

.admin-security-banner > .icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(22,227,154,.09);
  color:var(--admin-green);
}

.admin-security-banner strong{
  display:block;
  margin-bottom:5px;
}

.admin-security-banner p{
  margin:0;
  line-height:1.6;
}

/* Mobile */
@media (max-width:760px){

  .admin-app .admin-top{
    padding:12px 14px;
  }

  .admin-app .brand-logo-img{
    width:34px;
    height:34px;
  }

  .admin-secure-state{
    display:none;
  }

  .admin-content{
    padding:18px 14px 55px;
  }

  .admin-hero{
    align-items:flex-start;
    flex-direction:column;
    padding:21px;
    border-radius:20px;
  }

  .admin-hero h1{
    font-size:30px;
  }

  .admin-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .admin-overview-card{
    min-height:122px;
    padding:16px;
    border-radius:17px;
  }

  .admin-overview-card strong{
    font-size:22px;
  }

  .admin-module-grid,
  .admin-finance-grid{
    grid-template-columns:1fr;
  }

  .admin-module{
    min-height:72px;
  }

  .admin-form-grid{
    grid-template-columns:1fr;
  }

  .admin-form-row{
    flex-direction:column;
  }

  .admin-pool-stats{
    grid-template-columns:1fr;
  }

  .admin-rewards-card,
  .admin-pool-card,
  .admin-control-card{
    padding:17px;
  }

  .admin-card-heading{
    align-items:flex-start;
  }
}

@media (max-width:430px){

  .admin-overview-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-overview-card strong{
    font-size:20px;
  }

  .admin-overview-card small{
    font-size:11px;
  }

  .admin-hero .pill{
    align-self:flex-start;
  }
}


/* =========================================================
   ADMIN HEADER — DASHBOARD LOGO MATCH
   UI ONLY
   ========================================================= */

.admin-app .admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.admin-app .admin-ah-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
}

.admin-app .admin-ah-logo svg{
  width:100%;
  height:100%;
  display:block;
}

.admin-app .admin-brand-name{
  display:inline-flex;
  align-items:center;
  font-size:19px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.45px;
  white-space:nowrap;
}

.admin-app .admin-brand-name .arewa-text{
  color:#f4f7f5;
}

.admin-app .admin-brand-name .hub-text{
  color:#16e39a;
}

.admin-app .admin-brand-label{
  align-self:flex-end;
  margin:0 0 1px 1px;
  color:#16e39a;
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:1.8px;
}

@media (max-width:760px){
  .admin-app .admin-ah-logo{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .admin-app .admin-brand-name{
    font-size:18px;
  }

  .admin-app .admin-brand-label{
    font-size:7px;
  }
}


/* =========================================================
   ADMIN HEADER — LOGO + BRAND ALIGNMENT FIX
   ========================================================= */

.admin-app .admin-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.admin-app .admin-brand{
  display:flex;
  align-items:center;
  gap:9px;
  height:42px;
  margin:0;
  padding:0;
}

.admin-app .admin-ah-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}

.admin-app .admin-ah-logo svg{
  width:38px;
  height:38px;
  display:block;
}

.admin-app .admin-brand-name{
  display:flex;
  align-items:center;
  height:38px;
  margin:0;
  padding:0;
  line-height:1;
}

.admin-app .admin-brand-label{
  display:none;
}

@media (max-width:760px){
  .admin-app .admin-brand{
    height:38px;
    gap:8px;
  }

  .admin-app .admin-ah-logo,
  .admin-app .admin-ah-logo svg{
    width:34px;
    height:34px;
  }

  .admin-app .admin-brand-name{
    height:34px;
    font-size:18px;
  }
}


/* =========================================================
   ADMIN HEADER — LOGO + BRAND ALIGNMENT FIX
   ========================================================= */

.admin-app .admin-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.admin-app .admin-brand{
  display:flex;
  align-items:center;
  gap:9px;
  height:42px;
  margin:0;
  padding:0;
}

.admin-app .admin-ah-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}

.admin-app .admin-ah-logo svg{
  width:38px;
  height:38px;
  display:block;
}

.admin-app .admin-brand-name{
  display:flex;
  align-items:center;
  height:38px;
  margin:0;
  padding:0;
  line-height:1;
}

.admin-app .admin-brand-label{
  display:none;
}

@media (max-width:760px){
  .admin-app .admin-brand{
    height:38px;
    gap:8px;
  }

  .admin-app .admin-ah-logo,
  .admin-app .admin-ah-logo svg{
    width:34px;
    height:34px;
  }

  .admin-app .admin-brand-name{
    height:34px;
    font-size:18px;
  }
}


/* =========================================================
   ADMIN HEADER — CENTER BRAND
   ========================================================= */

.admin-app .admin-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.admin-app .admin-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0;
  padding:0;
}

.admin-app .admin-top-actions{
  margin-left:auto;
}


/* =========================================================
   AREWAHUB — NATIVE MOBILE APP VIEW
   GLOBAL UI LOCK
   ========================================================= */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}

.app,
.auth,
.page,
.content,
main{
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

*{
  -webkit-tap-highlight-color:transparent;
}

@media (max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    touch-action:pan-y;
  }
}


/* =========================================================
   AREWAHUB — INTERNAL PAGE BACK BUTTON
   ========================================================= */

.ah-page-back{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#f4f7f5;
  cursor:pointer;
  padding:0;
  margin:0;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,transform .18s ease;
}

.ah-page-back svg{
  width:20px;
  height:20px;
  display:block;
  pointer-events:none;
}

.ah-page-back:active{
  transform:scale(.94);
  background:rgba(22,227,154,.12);
}

@media (max-width:760px){
  .ah-page-back{
    width:36px;
    height:36px;
    flex-basis:36px;
    border-radius:11px;
  }
}


/* =========================================================
   AREWAHUB — ADMIN ACCESS PREMIUM CONTROL PANEL
   Scoped only to #admin-access
   ========================================================= */

#admin-access{
  position:relative;
}

#admin-access > .admin-section-heading{
  position:relative;
  padding:4px 2px 15px;
  margin-bottom:16px;
}

#admin-access > .admin-section-heading::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(22,227,154,.42),
    rgba(255,255,255,.06),
    transparent
  );
}

#admin-access > .admin-section-heading .muted{
  letter-spacing:.16em;
  font-size:10px;
  color:rgba(22,227,154,.72);
}

#admin-access > .admin-section-heading h2{
  font-size:25px;
  letter-spacing:-.035em;
}

#admin-access > .card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(145,185,169,.12);
  border-radius:20px;
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(22,227,154,.055),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  box-shadow:
    0 18px 50px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
}

#admin-access > .card:first-of-type{
  padding:20px;
}

#admin-access > .card:first-of-type > .muted{
  display:block;
  color:rgba(22,227,154,.78);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}

#admin-access > .card:first-of-type > .subtle{
  max-width:620px;
  margin:8px 0 17px;
  line-height:1.55;
}

#admin-access #admin-access-email{
  min-height:48px;
  padding:0 15px;
  border-radius:14px;
  border-color:rgba(145,185,169,.15);
  background:rgba(4,12,9,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

#admin-access #admin-access-email::placeholder{
  color:rgba(238,246,241,.38);
}

#admin-access #admin-access-email:focus{
  border-color:rgba(22,227,154,.5);
  box-shadow:
    0 0 0 3px rgba(22,227,154,.07),
    inset 0 1px 0 rgba(255,255,255,.025);
}

#admin-access .admin-permission-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:15px 0 18px;
}

#admin-access .admin-permission-grid label{
  position:relative;
  min-height:58px;
  padding:11px 13px;
  border:1px solid rgba(145,185,169,.1);
  border-radius:15px;
  background:rgba(255,255,255,.018);
  color:rgba(238,246,241,.78);
  cursor:pointer;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

#admin-access .admin-permission-grid label:hover{
  transform:translateY(-1px);
  border-color:rgba(22,227,154,.24);
  background:rgba(22,227,154,.035);
}

#admin-access .admin-permission-grid label:has(input:checked){
  border-color:rgba(22,227,154,.38);
  background:rgba(22,227,154,.07);
  color:#f1fff8;
  box-shadow:
    inset 0 0 0 1px rgba(22,227,154,.045),
    0 8px 24px rgba(0,0,0,.12);
}

#admin-access .admin-permission-grid input{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  height:19px;
  flex:none;
  margin:0;
  border:1px solid rgba(145,185,169,.3);
  border-radius:6px;
  background:rgba(0,0,0,.2);
  display:grid;
  place-content:center;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

#admin-access .admin-permission-grid input::before{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #06110d;
  border-bottom:2px solid #06110d;
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
}

#admin-access .admin-permission-grid input:checked{
  border-color:rgba(22,227,154,.8);
  background:#16e39a;
  box-shadow:0 0 0 3px rgba(22,227,154,.08);
}

#admin-access .admin-permission-grid input:checked::before{
  transform:rotate(-45deg) scale(1);
}

#admin-access .admin-form-row .btn.primary{
  min-height:46px;
  padding:0 20px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:
    0 8px 24px rgba(22,227,154,.1),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#admin-access > .card:first-of-type > small.subtle{
  display:block;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.055);
  font-size:11px;
  line-height:1.5;
}

#admin-access > .card:last-of-type{
  padding:18px;
}

#admin-access > .card:last-of-type > .muted{
  display:block;
  color:rgba(238,246,241,.48);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}

#admin-access > .card:last-of-type .admin-member-table-wrap{
  margin-top:14px !important;
  border-color:rgba(145,185,169,.09);
  border-radius:15px;
}

@media (max-width:640px){
  #admin-access > .card:first-of-type{
    padding:16px;
    border-radius:18px;
  }

  #admin-access .admin-permission-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  #admin-access .admin-permission-grid label{
    min-height:54px;
  }

  #admin-access .admin-form-row .btn.primary{
    width:100%;
  }

  #admin-access > .card:last-of-type{
    padding:14px;
  }
}