/* ---------- THEME TOKENS ---------- */
  :root[data-theme="dark"]{
    --bg:#0b130d;
    --box-bg:#2c4a33;
    --box-bg-2:#122018;
    --border:#245830;
    --title:#57c15c;
    --text:#eef3ee;
    --text-muted:#c7d2c7;
    --link:#6fc6bf;
    --link-hover:#9fe2db;
    --label:#5fbf66;
    --news:#6fc6bf;
    --news-strong:#92d9d2;
    --input-bg:#0c1610;
    --input-border:#2c4a33;
    --btn-bg:#1f3d28;
    --btn-bg-hover:#27512f;
    --btn-text:#d8ead9;
    --accent:#57c15c;
    --ad-bg:#eef3e4;
    --ad-text:#4f6b53;
    --ad-border:#c9d6bc;
    --rate:#79c5bd;
    --disc-head:#1a3320;
    --hover:rgba(127,180,127,.10);
    --panel-bg: #2c4a33;
    /* --shadow:0 1px 0 rgba(0,0,0,.4); */
  }
  :root[data-theme="light"]{
    --bg:#ffffff;
    --box-bg:#f3f8f0;
    --box-bg-2:#ffffff;
    --border:#cfe0cd;
    --title:#1f7a24;
    --text:#1c2a1f;
    --text-muted:#42554a;
    --link:#0b5c8a;
    --link-hover:#08486b;
    --label:#1f7a24;
    --news:#0b5c8a;
    --news-strong:#063f5f;
    --input-bg:#ffffff;
    --input-border:#cdddc9;
    --btn-bg:#1f7a24;
    --btn-bg-hover:#1a661f;
    --btn-text:#ffffff;
    --accent:#1f7a24;
    --ad-bg:#eef3e4;
    --ad-text:#4f6b53;
    --ad-border:#cfdcc4;
    --rate:#0b5c8a;
    --disc-head:#e9eefb;
    --panel-bg: #f3f8f0;
    --hover:rgba(31,122,36,.07);
    /* --shadow:0 1px 2px rgba(0,0,0,.06); */
  }

  *{box-sizing:border-box;}
  *{
    font-family:"Poppins", "Segoe UI", sans-serif;
}
  html{-webkit-text-size-adjust:100%;}

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    line-height: 1.55;
    transition: background .25s ease, color .25s ease;
}
  a{color:var(--link);text-decoration:none;}
  a:hover{color:var(--link-hover);text-decoration:underline;}
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
  }

  .wrap{max-width:1100px;margin:0 auto;padding:14px;}

  .panel{
    background:var(--box-bg);
    /* border:1px solid var(--border); */
    border-radius:10px;
    /* box-shadow:var(--shadow); */
  }

  /* ---------- HEADER ---------- */
  .masthead{position:relative;padding:22px 16px 18px;text-align:center;margin-bottom:14px;}
  .theme-btn{
    position:absolute;top:14px;right:16px;
    width:38px;height:38px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid transparent;color:var(--accent);
    cursor:pointer;transition:background .2s ease,transform .2s ease;
  }
  .theme-btn:hover{background:rgba(127,180,127,.12);transform:rotate(12deg);}
  .theme-btn svg{width:22px;height:22px;}

  .brand{
    margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:.5px;
    color:var(--title);line-height:1.1;
  }
  .brand .naira{color:var(--title);} 

  .welcome{margin:0 auto 6px;color:var(--text);font-size:15px;}
  .welcome b{font-weight:700;}
  .sep{opacity:.5;padding:0 3px;}
  .stats{margin:0 auto 16px;color:var(--text);font-size:14.5px;}
  .stats b{font-weight:700;}

  .searchbar{
    display:flex;gap:8px;max-width:680px;margin:0 auto;justify-content:center;
  }
  .searchbar input{
    flex:1;min-width:0;
    background:var(--input-bg);border:1px solid var(--input-border);
    color:var(--text);border-radius:10px;padding:11px 18px;font-size:15px;
  }
  .searchbar input::placeholder{color:var(--text-muted);opacity:.7;}
  .searchbar button{
    background:var(--btn-bg);color:var(--btn-text); 
    border-radius:10px;padding:8px 22px;font-size:15px;cursor:pointer;font-weight:600;
    transition:background .2s ease;
    border: none;
  }
  .searchbar button:hover{background:var(--btn-bg-hover);}

  /* ---------- FORUM BOARD ---------- */
  .board{margin-bottom:14px;overflow:hidden;}
  .board-title{
    text-align:center;font-weight:800;letter-spacing:1px;font-size:17px;
    color:var(--text);
  }
  .cat{padding:8px 22px;border-bottom:1px solid var(--border);}
  .cat:last-child{border-bottom:none;}
  .cat-label{color:var(--label);font-weight:800;}
  .cat-links{color:var(--text-muted);}
  .cat-links a{font-weight:600;white-space:nowrap;}
  .comma{color:var(--text-muted);}

  /* ---------- ADS ---------- */
  .ads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
  .ad{
    position:relative;height:128px;border-radius:8px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:var(--ad-bg);border:1px solid var(--ad-border);
    background-image:
      radial-gradient(circle at 18% 30%, rgba(120,160,120,.12) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 65%, rgba(120,160,120,.1) 0 2px, transparent 3px),
      linear-gradient(90deg, rgba(120,160,120,.06) 1px, transparent 1px),
      linear-gradient(0deg, rgba(120,160,120,.06) 1px, transparent 1px);
    background-size:auto,auto,46px 46px,46px 46px;
  }
  .ad-house p{margin:0;color:var(--ad-text);font-size:21px;font-weight:700;line-height:1.25;}
  .ad-mid{
    background:linear-gradient(135deg,#2a1d10,#160d05);border-color:#3a2a16;
    color:#f4e7d2;
  }
  .ad-mid .tag{
    background:#e08a1e;color:#1a1206;font-weight:800;padding:4px 10px;border-radius:4px;
    display:inline-block;font-size:18px;
  }
  .ad-mid small{display:block;margin-top:8px;color:#cbb38e;font-size:11px;letter-spacing:.5px;}

  .ad-promo{flex-direction:column;align-items:stretch;padding:0;overflow:hidden;
    background:#0e1f3a;border-color:#1d3a63;}
  .ad-promo .bar{background:#37a04a;color:#fff;font-weight:800;letter-spacing:3px;
    padding:9px;text-align:center;font-size:13px;}
  .ad-promo .body{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:8px;}
  .ad-promo .body .h{font-weight:800;color:#fff;font-size:16px;}
  .ad-promo .body .y{color:#f0b429;font-weight:700;font-size:13px;margin-top:5px;}
  .ad-promo .body .c{color:#9fb2cc;font-size:11px;margin-top:6px;}

  .ad-crypto{background:linear-gradient(135deg,#c0274b,#7d0f2c);border-color:#8a1734;color:#fff;}
  .ad-crypto .h{font-weight:800;font-size:20px;}
  .ad-crypto .s{font-size:12px;opacity:.85;margin-top:6px;}

  /* ---------- NEWS ---------- */
  .news{margin-bottom:20px;overflow:hidden; border: 1px solid var(--border)}
  .news-bar{
    text-align:center;font-weight:700;padding:13px 16px;border-bottom:1px solid var(--border);
  }
  .news-bar a{color:var(--news);font-weight:700;}
  .news-bar .rate{color:var(--rate);font-weight:800;}
  .news-list{margin:0;padding:0;list-style:none;}
  .news-list li{border-bottom:1px solid var(--border);text-align:center;padding:5px 18px;}
  .news-list li:last-child{border-bottom:none;}
  .news-list a{color:var(--news);}
  .news-list a:hover .h{color:var(--link-hover);}
  .news-list .b{color:var(--news-strong);font-weight:600;}
  .news-list .ang{opacity:.6;font-weight:700;}

  .foot{text-align:center;color:var(--text-muted);font-size:13px;padding:6px 0 24px;}
  .foot a{color:var(--link);}

  /* ---------- PAGINATION ---------- */
  .pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:16px;margin-bottom:14px;}
  .pager a{
    min-width:36px;height:36px;padding:0 8px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:9px;font-weight:700;
    color:var(--link);background:transparent;
  }
  .pager a:hover{background:var(--hover);text-decoration:none;color:var(--link-hover);}
  .pager a.active{background:var(--accent);color:#fff;border-color:var(--accent);}

  /* ---------- MEMBERS ONLINE ---------- */
  .online{text-align:center;padding:18px 16px;margin-bottom:14px;}
  .online .t{font-weight:800;font-size:17px;margin:0 0 4px;color:var(--text);}
  .online .d{margin:0;color:var(--text);}
  .online b{color:var(--accent);font-weight:600;}
  .online .u{font-weight:700;}

  /* ---------- DISCOVER MORE ---------- */
  .discover{margin-bottom:14px;overflow:hidden;}
  .discover-head{
    padding:5px 22px;font-weight:600;font-size:17px;color:var(--text);
    background:var(--disc-head);border-bottom:1px solid var(--border);
  }
  .acc-item{border-bottom:1px solid var(--border);}
  .acc-item:last-child{border-bottom:none;}
  .acc-btn{
    width:100%;background:transparent;border:none;cursor:pointer;font:inherit;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:7px 22px;color:var(--text);text-align:left;font-size:16px;
  }
  .acc-btn:hover{background:var(--hover);}
  .acc-btn .chev{flex:none;color:var(--text-muted);transition:transform .2s ease;}
  .acc-btn[aria-expanded="true"] .chev{transform:rotate(90deg);}
  .acc-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;}
  .acc-panel .inner{padding:0 22px 18px;color:var(--text-muted);font-size:14.5px;}
  .acc-panel .inner a{font-weight:700;}

  /* ---------- SITE FOOTER ---------- */
  .site-foot{padding:20px 16px;text-align:center;}
  .goup{display:inline-block;font-weight:800;color:var(--accent);margin-bottom:14px;}
  .copyright{color:var(--text);font-size:13.5px;line-height:1.75;margin:14px 0 0;}
  .copyright b{font-weight:700;}
  .copyright a{color:var(--link);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:820px){
    .ads{grid-template-columns:1fr;}
    .ad{height:96px;}
    .ad-house p{font-size:20px;}
  }
  @media (max-width:560px){
    body{font-size:14px;}
    .wrap{padding:4px;}
    .brand{font-size:26px;}
    .welcome,.stats{font-size:14.5px;}
    .masthead{padding:18px 12px 16px;}
    .theme-btn{top:10px;right:10px;}
    .searchbar{flex-direction:row;}
    .searchbar button{padding:10px 16px;}
    .board-title{font-size:15px;letter-spacing:.5px;}
    .cat{padding:14px 16px;}
    .cat-links a{white-space:normal;}
    .news-list a{font-size:15px;}
    /* .news-list li{padding:13px 14px;} */
    .pager a{min-width:32px;height:32px;font-size:13px;}
    .discover-head{font-size:15px;padding:14px 16px;}
    .acc-btn{padding:16px;font-size:15px;}
    .acc-panel .inner{padding:0 16px 16px;}
    .online .t{font-size:15px;}
    .copyright{font-size:12.5px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;}
    .theme-btn:hover{transform:none;}
  }


  /* ============================================================
   AUTH PAGE — mobile-first responsive
   ============================================================ */

.auth {
  width: 100%;
  /* max-width: 480px; */
  /* margin: 24px auto 48px; */
  /* padding: 0 16px; */
  box-sizing: border-box;
}

.auth-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  /* margin: 0 0 16px; */
  color: var(--text, #e8e8e8);
  line-height: 1.4;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #2a2e33);
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  /* padding: 10px 0; */
  font-size: .9rem;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #9aa0a6);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.tab:hover { color: var(--text, #e8e8e8); }
.tab.active {
  color: var(--accent, #5b8def);
  border-bottom-color: var(--accent, #5b8def);
}

/* ---- Message bar ---- */
.msg {
  display: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 12px;
  line-height: 1.4;
}
.msg.show { display: block; }
.msg.err {
  background: rgba(220,53,69,.1);
  border: 1px solid rgba(220,53,69,.35);
  color: #ff8a93;
}
.msg.ok {
  background: rgba(40,167,69,.1);
  border: 1px solid rgba(40,167,69,.35);
  color: #6fdc8c;
}

/* ---- Auth card panel ---- */
.auth-card {
  padding: 18px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.auth-row {
  margin-bottom: 14px;
  font-size: .875rem;
  color: var(--text, #e8e8e8);
  line-height: 1.5;
}
.auth-row:last-child { margin-bottom: 0; }
.auth-row.hint {
  font-size: .78rem;
  color: var(--muted, #9aa0a6);
  margin-bottom: 0;
}

/* ---- Forms ---- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-form label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted, #9aa0a6);
  margin-bottom: 6px;
}

.auth-form input[type=email],
.auth-form input[type=text],
.auth-form input[type=password] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2e33);
  background: var(--input-bg, #14161a);
  color: var(--text, #e8e8e8);
  font-size: .9rem;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .15s;
  margin-bottom: 10px;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--accent, #5b8def);
}

.auth-form button[type=button]:not(.btn-google) {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #5b8def);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
  margin-top: 15px;
}
.auth-form button[type=button]:not(.btn-google):hover { opacity: .88; }

/* ---- Stacked login form fields ---- */
.auth-form.stacked .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.auth-form.stacked .field label { margin-bottom: 6px; }
.auth-form.stacked .field input { margin-bottom: 0; }

/* ---- Remember me — properly aligned ---- */
.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted, #9aa0a6);
  cursor: pointer;
  margin-top: 12px;
  line-height: 1;
  user-select: none;
}
.remember input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin: 0;               /* reset browser default margins */
  flex-shrink: 0;
  accent-color: var(--accent, #5b8def);
  cursor: pointer;
}

/* ---- Forgot link ---- */
.small-link {
  display: inline-block;
  font-size: .8rem;
  color: var(--accent, #5b8def);
  text-decoration: none;
  margin-top: 10px;
}
.small-link:hover { text-decoration: underline; }

/* ---- Google button panel ---- */
.google-wrap {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2e33);
  background: #e7431a; 
  color: #e8e8e8;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
/* .btn-google:hover {
  border-color: var(--accent, #5b8def);
  background: rgba(91,141,239,.06);
} */
.btn-google .g {
  font-size: 1rem;
  font-weight: 900;
  color: #4285F4;
  line-height: 1;
}

/* ---- Hidden utility ---- */
.hidden { display: none !important; }

/* ---- Mobile tweaks (≤ 400px) ---- */
@media (max-width: 400px) {
  /* .auth { padding: 0 10px; } */
  .auth-title { font-size: .97rem; }
  .auth-card { padding: 14px 12px; }
  .auth-form input[type=email],
  .auth-form input[type=text],
  .auth-form input[type=password] { font-size: .85rem; padding: 14px 10px; }
}

  @media (max-width:560px){
  body{font-size:15.5px}.wrap{padding:10px}.brand{font-size:26px}.board-title{font-size:21px}
  .theme-btn{top:10px;right:10px}.sb{padding:14px}.topic .ttl{font-size:15px}
  .ads .ad:nth-child(n+2){display:none}   /* mobile: keep only the first ad */
}