/* === Contrast Boost for Dark UI === */
:root{
  /* Text */
  --text-main:    #eaf2ff;   /* brighter than #e9eef4 */
  --text-sec:     #b8c7dc;   /* for small meta/secondary */
  --text-muted:   #9fb3cc;
  --text-invert:  #0b0f14;

  /* Backgrounds */
  --bg-body:      #0b0f14;   /* page */
  --bg-card:      #111927;   /* slightly lighter than #0f1621 */
  --bg-header-1:  #0f2236;   /* header gradient start */
  --bg-header-2:  #0b0f14;   /* header gradient end */

  /* Borders / dividers */
  --line-soft:    #273447;   /* brighter than #1b2636 */
  --line-subtle:  #1f2a3b;

  /* Inputs */
  --input-bg:     #121b29;
  --input-border: #2a3b55;
  --input-ph:     #a7b8cf;

  /* Focus ring */
  --focus-ring:   #58a6ff;   /* clear focus outline */

  /* Accents (keep your existing brand blues/purples, just ensure contrast) */
  --accent:       #0d6efd;
}

/* Page + text */
html,body{ background: var(--bg-body); color: var(--text-main); }
a{ color:#9ec5fe; }
a:hover{ color:#c6ddff; }

/* Header */
.app-header{
  background: linear-gradient(180deg, var(--bg-header-1) 0%, var(--bg-header-2) 100%);
  border-bottom:1px solid var(--line-subtle);
}
.brand .logo{ background: var(--accent); }

/* Cards */
.card.app{
  background: var(--bg-card);
  border:1px solid var(--line-soft);
  color: var(--text-main);
}
.card.app p{ color: var(--text-sec); }
.card.app .meta{ color: var(--text-muted); }

/* Leaderboard */
.lb-card{ background: var(--bg-card); border:1px solid var(--line-soft); }
.lb-item{ }
.lb-item .rank{ background:#14263a; color:#d7e6ff; }
.lb-item .count{ color:#ffd166; }

/* Badges row */
.badge-chip{
  background:#132843;
  border:1px solid var(--line-soft);
  color:#d7e6ff;
}

/* Sections */
.section-title{ color:#c9d7ea; }

/* Inputs */
.search-wrap input{
  background: var(--input-bg);
  border:1px solid var(--input-border);
  color: var(--text-main);
}
.search-wrap input::placeholder{ color: var(--input-ph); }

/* Bottom nav */
.bottom-nav{
  background:#0f2236;
  border-top:1px solid var(--line-soft);
}
.bottom-nav .nav a{ color:#c1d4ea; }
.bottom-nav .nav a.active{ color:#ffffff; }

/* Icons stay white to pop on colored tiles */
.card.app .icon{ color:#fff; }

/* Buttons: keep Bootstrap palette but ensure text contrast */
.btn-primary{ color:#fff; }
.btn-outline-light{ border-color:#cfe3ff; color:#dfeaff; }
.btn-outline-light:hover{ background:#cfe3ff; color:#0b2137; }

/* Focus visibility (keyboard a11y) */
:where(a,button,input,select,textarea,.card.app):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}

/* Hover lift only on pointer devices */
@media (hover:hover){
  .card.app{ transition: transform .08s ease, border-color .08s ease; }
  .card.app:hover{ transform: translateY(-1px); border-color:#36557a; }
}

/* Improve tiny text readability */
.small, .text-secondary{ color: var(--text-muted) !important; }

/* Optional: boost emoji/icons legibility on very dark tiles */
.bi{ filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }


/* === Critical legibility overrides for maintenance + login === */

/* Global text tone on dark backgrounds */
html, body { color: var(--text-main, #eaf2ff); }
h1, h2, h3, h4, h5, h6 { color: var(--text-main, #eaf2ff); }

/* Make any "secondary/muted/dark" Bootstrap text brighter on dark UIs */
.text-secondary, .text-muted, .small, small, .form-text {
  color: var(--text-muted, #b8c7dc) !important;
}
.text-dark { color: var(--text-main, #eaf2ff) !important; } /* safety net if text-dark sneaks in */

/* Cards on dark */
.card, .lb-card {
  background: var(--bg-card, #111927) !important;
  border-color: var(--line-soft, #273447) !important;
  color: var(--text-main, #eaf2ff) !important;
}

/* --- LOGIN FORM specifics --- */
.form-label, label { color: var(--text-main, #eaf2ff) !important; }

.form-control {
  background: var(--input-bg, #121b29) !important;
  color: var(--text-main, #eaf2ff) !important;
  border-color: var(--input-border, #2a3b55) !important;
}
.form-control::placeholder {
  color: var(--input-ph, #a7b8cf) !important;
  opacity: 1 !important; /* some browsers dim placeholders */
}
.form-check-label { color: var(--text-main, #eaf2ff) !important; }

/* Buttons still readable */
.btn-primary { color:#fff !important; }
.btn-outline-light { border-color:#cfe3ff !important; color:#eaf2ff !important; }
.btn-outline-light:hover { background:#cfe3ff !important; color:#0b2137 !important; }

/* --- MAINTENANCE page specifics --- */
.muted { color: var(--text-muted, #b8c7dc) !important; }
.logo { color:#fff !important; }

/* Inputs focus */
:where(input,button,select,textarea):focus-visible{
  outline: 2px solid var(--focus-ring, #58a6ff);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}

/* Ensure Bootstrap’s default body color doesn’t override us */
body, .card p, .card .meta { color: var(--text-main, #eaf2ff); }


    :root{ --safe-top: env(safe-area-inset-top, 10px); --safe-bot: env(safe-area-inset-bottom, 10px); }
    html,body{height:100%; background:#0b0f14; color:#e9eef4;}
    .app-header{ position:sticky; top:0; z-index:1000; padding-top:var(--safe-top);
      background:linear-gradient(180deg,#0d1b2a 0%, #0b0f14 100%); border-bottom:1px solid rgba(255,255,255,.06); }
    .brand{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem .6rem; }
    .brand .logo{ width:36px; height:36px; border-radius:10px; background:#0d6efd; display:grid; place-items:center; font-weight:700; color:#fff; }
    .search-wrap{ padding:0 1rem 1rem; }
    .search-wrap form{ display:flex; gap:.5rem; }
    .search-wrap input{ background:#0f1621; border:1px solid #1b2636; color:#dfe7ef; }
    .search-wrap input::placeholder{ color:#97a6b7; }

    .badge-bar{ display:flex; gap:.5rem; overflow:auto; padding:.5rem 1rem 0.8rem; }
    .badge-chip{ background:#102036; border:1px solid #1b2b45; color:#d0e2ff; border-radius:999px; padding:.35rem .75rem; font-size:.85rem; white-space:nowrap; }
    .section-title{ padding:1rem 1rem .2rem; color:#bcd0e5; font-size:.95rem; letter-spacing:.02em; }

    .cards{ padding:.6rem .8rem 6rem; }
    .card.app{ background:#0f1621; border:1px solid #1b2636; color:#e9eef4; border-radius:16px; overflow:hidden; height:100%; transition: transform .08s ease; }
    .card.app:active{ transform: scale(.99); }
    .card.app .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; color:#fff; }
    .icon.dp{ background:#6f42c1; } .icon.jg{ background:#0d6efd; } .icon.dd{ background:#20c997; }
    .icon.ed{ background:#fd7e14; } .icon.ch{ background:#ffc107; } .icon.bl{ background:#e83e8c; } .icon.nw{ background:#198754; } .icon.si{ background:#0ea5e9; }
    .card.app .card-body{ padding:1rem; }
    .card.app h5{ margin:.6rem 0 .3rem; font-size:1.05rem; }
    .card.app p{ color:#b9c7d8; margin:0; font-size:.93rem; }
    .card.app .meta{ font-size:.8rem; color:#8ea2b8; margin-top:.5rem; }

    .bottom-nav{ position:fixed; left:0; right:0; bottom:0; padding-bottom:var(--safe-bot);
      background:#0d1b2a; border-top:1px solid rgba(255,255,255,.08); z-index:1000; }
    .bottom-nav .nav{ display:flex; justify-content:space-around; padding:.35rem 0; }
    .bottom-nav .nav a{ display:flex; flex-direction:column; align-items:center; gap:.15rem;
      color:#b6c6d8; text-decoration:none; padding:.4rem .6rem; font-size:.82rem; }
    .bottom-nav .nav a.active{ color:#fff; }
    .grid{ display:grid; gap:.8rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
    @media(min-width:992px){
      .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); max-width:1100px; margin:0 auto; }
      .search-wrap, .brand, .badge-bar, .section-title, .cards > .container-xl{ max-width:1100px; margin:0 auto; }
    }
    a.stretched-link{ position: static; }

    /* Leaderboard */
    .lb-card{ background:#0f1621; border:1px solid #1b2636; border-radius:16px; padding:1rem; }
    .lb-item{ display:flex; align-items:center; gap:.8rem; padding:.5rem .2rem; border-radius:10px; }
    .lb-item .rank{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#102036; color:#cfe1ff; font-weight:700; font-size:.85rem; }
    .lb-item img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
    .lb-item .name{ font-weight:600; }
    .lb-item .count{ margin-left:auto; color:#ffd166; font-weight:700; }
    .lb-meta{ color:#8ea2b8; font-size:.85rem; margin-top:.5rem; }