/* /assets/css/style.css - PromptVerse AI — Poloja-style Design */

/* ─── VARIABLES ────────────────────────────────── */
:root {
  --bg:          #111111;
  --bg2:         #1a1a1a;
  --bg3:         #222222;
  --card:        #1e1e1e;
  --border:      #2a2a2a;
  --border2:     #333333;
  --text:        #f0f0f0;
  --muted:       #888888;
  --accent:      #4f8ef7;
  --accent2:     #e53935;
  --green:       #2ecc71;
  --yellow:      #f1c40f;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 4px 20px rgba(0,0,0,0.5);
  --tr:          all .22s ease;
}

/* ─── BASE ─────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px;
  min-height:100vh;
  padding-bottom:70px; /* space for mobile bottom nav */
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}

/* ─── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ─── ANNOUNCEMENT BAR ──────────────────────────── */
.announce-bar{
  background:linear-gradient(90deg,#1a1a2e,#16213e,#0f3460);
  border-bottom:1px solid #0f3460;
  padding:8px 0;
  overflow:hidden;
  white-space:nowrap;
  font-size:13px;
  color:#adb5f5;
}
.announce-bar marquee{display:inline-block}
.announce-bar a{color:#7b9fff;font-weight:600}
.announce-bar a:hover{color:#fff}

/* ─── NAVBAR ────────────────────────────────────── */
#mainNav{
  background:#161616 !important;
  border-bottom:1px solid var(--border);
  padding:10px 0;
  position:sticky;
  top:0;
  z-index:1000;
}
.navbar-brand img{height:38px;width:auto}
.navbar-brand-text{
  font-size:1.3rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.3px;
}
.brand-dot{color:var(--accent)}
.nav-tg-btn{
  background:linear-gradient(135deg,#0088cc,#006fa3);
  color:#fff!important;
  border:none;
  border-radius:8px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.nav-tg-btn:hover{opacity:.88;color:#fff!important}
.nav-link{
  color:var(--muted)!important;
  font-size:13px;
  font-weight:500;
  padding:6px 10px!important;
  border-radius:7px;
  transition:var(--tr);
}
.nav-link:hover,.nav-link.active-link{color:var(--text)!important;background:var(--bg3)}
.navbar-toggler{border-color:var(--border)!important;padding:4px 8px}
.navbar-toggler-icon{filter:invert(1)}

/* ─── SEARCH BAR ────────────────────────────────── */
.search-bar .form-control{
  background:var(--bg3)!important;
  border:1px solid var(--border2)!important;
  color:var(--text)!important;
  border-radius:8px 0 0 8px!important;
  padding:8px 14px;
  font-size:13px;
}
.search-bar .form-control:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(79,142,247,.15)!important}
.search-bar .btn{border-radius:0 8px 8px 0!important;padding:8px 14px}
::placeholder{color:#555!important}

/* ─── HERO ──────────────────────────────────────── */
.hero-section{
  padding:28px 0 20px;
  text-align:center;
  background:linear-gradient(180deg,rgba(79,142,247,.06) 0%,transparent 100%);
  border-bottom:1px solid var(--border);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 14px;
  background:rgba(79,142,247,.12);
  border:1px solid rgba(79,142,247,.25);
  border-radius:50px;
  font-size:12px;color:var(--accent);
  margin-bottom:12px;
}
.hero-title{
  font-size:clamp(1.7rem,4vw,2.6rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.5px;
  margin-bottom:10px;
}
.gradient-text{
  background:linear-gradient(135deg,var(--accent),#9b59b6,#e74c3c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle{color:var(--muted);font-size:.95rem;max-width:520px;margin:0 auto 16px}

/* Stats bar */
.stats-bar{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:12px 0 4px}
.stat-item{text-align:center}
.stat-num{font-size:1.3rem;font-weight:700;color:var(--accent);display:block}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ─── SECTION HEADER ────────────────────────────── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.section-title{
  font-size:15px;
  font-weight:700;
  display:flex;align-items:center;gap:8px;
  margin:0;
  color:var(--text);
}
.section-title .title-icon{color:var(--accent)}
.section-count{
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:50px;
}

/* ─── FILTER BAR ────────────────────────────────── */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filter-btn{
  padding:5px 14px;
  border-radius:50px;
  border:1px solid var(--border2);
  background:var(--bg2);
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:var(--tr);
  text-decoration:none;
}
.filter-btn:hover,.filter-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* ─── PROMPT CARD (poloja-style) ────────────────── */
.prompt-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--tr);
  cursor:pointer;
  position:relative;
}
.prompt-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(0,0,0,.6);
}
.card-img-wrap{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg3);
}
.card-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  transition:var(--tr);
}
.prompt-card:hover .card-img-wrap img{transform:scale(1.06)}
.card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%);
  opacity:0;transition:var(--tr);
}
.prompt-card:hover .card-overlay{opacity:1}
.overlay-btns{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;
  opacity:0;transition:var(--tr);
}
.prompt-card:hover .overlay-btns{opacity:1}
/* AI badge on card */
.card-ai-badge{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.75);
  color:var(--accent);
  font-size:10px;font-weight:700;
  padding:2px 8px;
  border-radius:50px;
  border:1px solid rgba(79,142,247,.3);
  backdrop-filter:blur(4px);
}
/* Fav button on card */
.btn-fav-prompt{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(229,57,53,.3);
  color:#e53935;
  width:32px;height:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:13px;
  transition:var(--tr);
  z-index:5;
}
.btn-fav-prompt:hover,.btn-fav-prompt.active{
  background:rgba(229,57,53,.2);
  border-color:rgba(229,57,53,.6);
  transform:scale(1.15);
}

/* Card bottom info bar */
.card-info{
  padding:8px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);
}
.card-title-text{
  font-size:12px;font-weight:600;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;margin-right:8px;
}
.card-count{
  font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:3px;
  white-space:nowrap;flex-shrink:0;
}

/* ─── BUTTONS ────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#2563eb);
  border:none;font-weight:600;border-radius:8px;
  padding:8px 18px;font-size:13px;
}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,142,247,.35)}
.btn-copy{
  background:linear-gradient(135deg,#2ecc71,#27ae60);
  border:none;color:#fff;font-weight:600;border-radius:8px;
  padding:8px 18px;font-size:13px;
}
.btn-copy:hover{opacity:.88;transform:translateY(-1px)}
.btn-outline-primary{border-color:var(--accent);color:var(--accent);border-radius:8px;font-size:13px}
.btn-outline-primary:hover{background:var(--accent);color:#fff}
.btn-outline-secondary{border-color:var(--border2);color:var(--muted);border-radius:8px;font-size:13px}
.btn-outline-secondary:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.btn-sm{padding:5px 12px!important;font-size:12px!important}

/* ─── GLASS CARD (for detail sections) ──────────── */
.glass-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--tr);
}

/* ─── PROMPT DETAIL PAGE ────────────────────────── */
.detail-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:18px;background:var(--bg3)}
.detail-hero img{width:100%;max-height:460px;object-fit:cover}
.prompt-box{
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:14px 14px 14px 14px;
  font-family:'Courier New',monospace;
  font-size:13px;
  color:#93c5fd;
  line-height:1.7;
  word-break:break-word;
  position:relative;
}
.prompt-box .copy-btn-inner{position:absolute;top:8px;right:8px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.info-item{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
}
.info-item .info-label{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.info-item .info-val{font-size:13px;font-weight:600;color:var(--text)}
.tag-pill{
  display:inline-block;padding:3px 10px;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:50px;font-size:11px;color:var(--accent);
  margin:2px;transition:var(--tr);
}
.tag-pill:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-item{display:flex;gap:10px;margin-bottom:10px}
.step-num{
  width:28px;height:28px;min-width:28px;
  background:linear-gradient(135deg,var(--accent),#2563eb);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}

/* Share buttons */
.share-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;
  font-size:12px;font-weight:500;
  text-decoration:none;transition:var(--tr);color:#fff;
}
.share-twitter{background:#000}
.share-facebook{background:#1877f2}
.share-whatsapp{background:#25d366}
.share-btn:hover{opacity:.85;color:#fff;transform:translateY(-1px)}

/* Sidebar */
.sidebar-ad-box{
  background:var(--bg2);border:1px dashed var(--border2);
  border-radius:var(--radius);padding:14px;
  text-align:center;min-height:200px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;
}

/* ─── SKELETON ──────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{to{background-position:-200% 0}}
.skeleton-card{height:280px;border-radius:var(--radius)}
.skeleton-img{height:180px;border-radius:var(--radius) var(--radius) 0 0}
.skeleton-line{height:12px;margin-bottom:7px}
.skeleton-line.w75{width:75%}
.skeleton-line.w50{width:50%}

/* ─── BADGES ─────────────────────────────────────── */
.badge{font-weight:500;font-size:11px}
.bg-glass{background:var(--bg3)!important}
.badge-cat{background:rgba(79,142,247,.15);color:var(--accent);border:1px solid rgba(79,142,247,.25)}

/* ─── PAGINATION ─────────────────────────────────── */
.page-link{
  background:var(--bg2);border-color:var(--border);
  color:var(--muted);border-radius:8px!important;margin:0 2px;
  font-size:13px;
}
.page-link:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.page-item.active .page-link{background:var(--accent);border-color:var(--accent)}

/* ─── TOAST ──────────────────────────────────────── */
.toast{
  background:var(--bg2)!important;
  border:1px solid var(--border2)!important;
  color:var(--text)!important;
  font-size:13px;
}
.toast.success-toast{border-left:3px solid var(--green)!important}
.toast.error-toast{border-left:3px solid var(--accent2)!important}

/* ─── FORMS ──────────────────────────────────────── */
.form-control,.form-select{
  background:var(--bg3)!important;
  border:1px solid var(--border2)!important;
  color:var(--text)!important;
  border-radius:8px!important;
  font-size:13px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(79,142,247,.15)!important;
}
.form-label{color:var(--muted);font-size:12px;font-weight:500}
select option{background:var(--bg2)}

/* ─── FOOTER ─────────────────────────────────────── */
.footer-main{
  background:#151515;
  border-top:1px solid var(--border);
  padding:20px 0 12px;
  font-size:12px;
  color:var(--muted);
}
.footer-main a{color:#666;transition:var(--tr)}
.footer-main a:hover{color:var(--accent)}

/* ─── STICKY ADS ─────────────────────────────────── */
.sticky-footer-ad{
  position:fixed;bottom:56px;left:0;right:0;
  background:rgba(22,22,22,.97);
  border-top:1px solid var(--border);
  z-index:990;
  padding:4px 0;
}
@media(min-width:769px){
  body{padding-bottom:0}
  .sticky-footer-ad{bottom:0}
}
.ad-header{min-height:40px;background:var(--bg2)}
.ad-footer{min-height:50px}
.ad-between-cards{
  min-height:80px;background:var(--bg2);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
}

/* ─── MOBILE BOTTOM NAV ─────────────────────────── */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  background:#161616;
  border-top:1px solid var(--border);
  z-index:1000;
  height:56px;
}
.bottom-nav-inner{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:100%;
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:10px;color:var(--muted);
  text-decoration:none;transition:var(--tr);
  cursor:pointer;
}
.bnav-item i{font-size:18px;line-height:1}
.bnav-item.active,.bnav-item:hover{color:var(--accent)}
@media(max-width:768px){
  .bottom-nav{display:block}
}

/* ─── MODAL ──────────────────────────────────────── */
.modal-content{
  background:var(--bg2)!important;
  border:1px solid var(--border2)!important;
  border-radius:var(--radius)!important;
  color:var(--text);
}
.modal-header{border-bottom:1px solid var(--border)!important}
.modal-footer{border-top:1px solid var(--border)!important}
.btn-close{filter:invert(1)!important}

/* Countdown */
.countdown-ring{width:100px;height:100px}
.countdown-num{font-size:2rem;font-weight:800;fill:var(--text);font-family:'Segoe UI',sans-serif}
#copyProgress{transition:width 1s linear}

/* ─── CATEGORY PAGE ──────────────────────────────── */
.cat-header{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.cat-icon-big{font-size:2.5rem;color:var(--accent)}

/* ─── DETAIL — QUICK STATS ROW ───────────────────── */
.detail-stats{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:10px 0;margin-bottom:14px;
}
.dstat{
  display:flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px;
  font-size:12px;font-weight:600;
}

/* ─── TUTORIAL VIDEO SECTION ─────────────────────── */
#tutorialSection{border-top:2px solid rgba(229,57,53,.25)}
.video-frame{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--bg3);
}
.video-frame iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border:none;border-radius:var(--radius-sm);
}

/* ─── TELEGRAM BANNER ────────────────────────────── */
.tg-inline-banner{
  background:linear-gradient(135deg,rgba(0,136,204,.12),rgba(0,136,204,.06));
  border:1px solid rgba(0,136,204,.25);
  border-radius:var(--radius);
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.tg-join-btn{
  background:linear-gradient(135deg,#0088cc,#006fa3);
  color:#fff;border:none;border-radius:8px;
  padding:7px 16px;font-size:12px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.tg-join-btn:hover{color:#fff;opacity:.88}

/* ─── FAVORITES ──────────────────────────────────── */
.btn-fav-prompt i{pointer-events:none;transition:transform .25s}
.btn-fav-prompt:hover i{transform:scale(1.3)}
#favBadge{font-size:9px;min-width:16px;height:16px;padding:0 4px;line-height:16px}

/* ─── PWA INSTALL BTN ────────────────────────────── */
#pwaInstallBtn{animation:pulse-glow 2.5s infinite}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(79,142,247,.4)}
  50%{box-shadow:0 0 0 5px rgba(79,142,247,0)}
}

/* ─── NO RESULTS ─────────────────────────────────── */
.no-results{text-align:center;padding:40px 20px;color:var(--muted)}
.no-results i{font-size:3rem;opacity:.25;margin-bottom:12px}

/* ─── LAZY IMG ───────────────────────────────────── */
img.lazy{opacity:0;transition:opacity .4s}
img.lazy.loaded{opacity:1}

/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up:nth-child(2){animation-delay:.04s}
.fade-up:nth-child(3){animation-delay:.08s}
.fade-up:nth-child(4){animation-delay:.12s}
.fade-up:nth-child(5){animation-delay:.16s}
.fade-up:nth-child(6){animation-delay:.20s}
.fade-up:nth-child(7){animation-delay:.24s}
.fade-up:nth-child(8){animation-delay:.28s}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media(max-width:768px){
  .hero-section{padding:20px 0 14px}
  .hero-title{font-size:1.6rem}
  .hero-subtitle{font-size:.85rem}
  .stats-bar{gap:14px}
  .stat-num{font-size:1.1rem}
  .section-header{flex-direction:column;align-items:flex-start;gap:6px}
  .container{padding-left:12px;padding-right:12px}
}

/* ─── ADMIN OVERRIDES ────────────────────────────── */
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* Search autocomplete */
#searchResults{
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
#searchResults .list-group-item{
  background:var(--bg2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  font-size:13px;
}
#searchResults .list-group-item:hover{background:var(--bg3)!important}

/* ══════════════════════════════════════════════════
   BANGLA + EMOJI FONT FIX
══════════════════════════════════════════════════ */
body, * {
  font-family: 'Hind Siliguri', 'Inter', 'Noto Emoji', 'Segoe UI Emoji',
               'Segoe UI', system-ui, -apple-system, sans-serif;
}
/* Emoji always use system font */
.emoji, [class*="bi-"] { font-family: 'Bootstrap Icons', 'Segoe UI Emoji', 'Noto Emoji' !important; }

/* ══════════════════════════════════════════════════
   DAY / LIGHT MODE
══════════════════════════════════════════════════ */
body.light-mode {
  --bg:       #f5f5f5;
  --bg2:      #ffffff;
  --bg3:      #eaeaea;
  --card:     #ffffff;
  --border:   #e0e0e0;
  --border2:  #d0d0d0;
  --text:     #1a1a1a;
  --muted:    #666666;
  --accent:   #4f8ef7;
  --accent2:  #e53935;
  --shadow:   0 4px 20px rgba(0,0,0,.12);
}
body.light-mode #mainNav { background:#ffffff !important; box-shadow:0 1px 8px rgba(0,0,0,.08); }
body.light-mode .bottom-nav { background:#ffffff; border-top:1px solid #e0e0e0; }
body.light-mode .announce-bar { background:linear-gradient(90deg,#e8eeff,#eef2ff,#e8f0ff); border-bottom:1px solid #c7d7ff; }
body.light-mode .announce-bar, body.light-mode .announce-bar a { color:#4f6ef7; }
body.light-mode .prompt-card { box-shadow:0 2px 10px rgba(0,0,0,.08); }
body.light-mode .glass-card { box-shadow:0 2px 10px rgba(0,0,0,.06); }
body.light-mode .form-control, body.light-mode .form-select { color:#1a1a1a !important; }
body.light-mode .hero-section { background:linear-gradient(180deg,rgba(79,142,247,.06) 0%,transparent 100%); }
body.light-mode .modal-content { background:#ffffff !important; }
body.light-mode .footer-main { background:#f0f0f0; border-top:1px solid #e0e0e0; }
body.light-mode .search-bar .form-control { color:#1a1a1a !important; }
body.light-mode #searchResults { background:#ffffff; border-color:#e0e0e0; }
body.light-mode .sidebar-ad-box { background:#f0f0f0; border-color:#ddd; }
body.light-mode .btn-close { filter:none !important; }

/* Theme toggle button active state */
#themeToggle, #themeToggleMobile { transition: all .2s; }
#themeToggle:hover { transform:rotate(20deg); }

/* ══════════════════════════════════════════════════
   NOTICE BAR ANIMATION
══════════════════════════════════════════════════ */
#siteNoticeBar {
  animation: slideDown .3s ease;
}
@keyframes slideDown {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}

/* ══════════════════════════════════════════════════
   ADS — MOBILE / DESKTOP FIXED SIZES
══════════════════════════════════════════════════ */

/* Generic ad wrapper */
.ad-wrap {
  text-align: center;
  overflow: hidden;
  line-height: 0;
}
.ad-wrap small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Header ad — Full width banner */
.ad-header-wrap {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  text-align: center;
}
/* Desktop: 728×90 Leaderboard */
.ad-desktop-leaderboard {
  display: none;
  min-height: 90px;
  min-width: 728px;
  max-width: 100%;
}
/* Mobile: 320×50 Mobile Banner */
.ad-mobile-banner {
  display: none;
  min-height: 50px;
  width: 320px;
  max-width: 100%;
}
@media (min-width: 769px) {
  .ad-desktop-leaderboard { display: inline-block; }
  .ad-mobile-banner-only  { display: none !important; }
}
@media (max-width: 768px) {
  .ad-mobile-banner       { display: inline-block; }
  .ad-desktop-only        { display: none !important; }
}

/* Sticky footer ad sizes */
.sticky-footer-ad {
  position: fixed;
  left: 0; right: 0;
  background: rgba(17,17,17,.97);
  border-top: 1px solid var(--border);
  z-index: 990;
  padding: 5px 0;
  text-align: center;
}
/* Mobile sticky: bottom=56px (above bottom nav) */
@media (max-width: 768px) {
  .sticky-footer-ad { bottom: 56px; }
  .sticky-footer-ad .ad-slot { min-height: 50px; max-height: 60px; overflow: hidden; }
}
/* Desktop sticky: bottom=0 */
@media (min-width: 769px) {
  .sticky-footer-ad { bottom: 0; }
  .sticky-footer-ad .ad-slot { min-height: 90px; max-height: 100px; overflow: hidden; }
  body { padding-bottom: 0; }
}

/* In-content ad slots */
.ad-between-cards {
  background: var(--bg2);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 8px;
  text-align: center;
  margin: 8px 0;
}
@media (max-width: 768px) {
  .ad-between-cards { min-height: 100px; } /* 300×100 mobile */
}
@media (min-width: 769px) {
  .ad-between-cards { min-height: 90px; }  /* 728×90 desktop */
}

/* Sidebar ad */
.sidebar-ad-box {
  min-height: 250px; /* 300×250 rectangle */
  width: 100%;
}

/* Prompt page mid ad */
.ad-prompt-mid {
  text-align: center;
  padding: 8px 0;
  margin: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
  .ad-prompt-mid .ad-slot { min-height: 250px; } /* 300×250 */
}
@media (min-width: 769px) {
  .ad-prompt-mid .ad-slot { min-height: 90px; }  /* 728×90 */
}

/* ══════════════════════════════════════════════════
   MOBILE BOTTOM NAV — ENHANCED
══════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #161616;
  border-top: 2px solid var(--border);
  z-index: 1000;
  height: 58px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  body { padding-bottom: 58px; }
}
.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  align-items: center;
}
.bnav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: #666;
  text-decoration: none;
  transition: all .2s;
  height: 100%;
  position: relative;
}
.bnav-item i { font-size: 20px; line-height: 1; }
.bnav-item span { font-family: 'Hind Siliguri', sans-serif; }
.bnav-item.active, .bnav-item:hover { color: var(--accent); }
.bnav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 3px 3px;
}
/* Highlight center tutorial button */
.bnav-item.bnav-center i { font-size: 24px; color: #e53935; }
.bnav-item.bnav-center.active::before, .bnav-item.bnav-center:hover::before { background: #e53935; }

/* ══════════════════════════════════════════════════
   ADBLOCK DETECTION MODAL
══════════════════════════════════════════════════ */
#adblockModal .modal-content {
  background: var(--bg2) !important;
  border: 2px solid rgba(239,68,68,.3) !important;
}