/* =========================================================
 * Quant App – Styles (FINAL, drop-in)
 * - Flat theme, tanpa perubahan struktur HTML/JS
 * - Top Picks: grid 3 kolom (desktop), scroll horizontal (mobile)
 * - Stale dimming: #top-picks.is-stale .pick-card → redup (sampai <15:00 WIB)
 * - Progress bar: .score-rail / .score-fill (warna dari JS inline)
 * =======================================================*/

/* ---------- 1) THEME TOKENS ---------- */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --radius:12px;
  --primary:#1e90ff;        /* dodgerblue */
  --primary-hover:#1877d4;
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.5;
}
section{ background:transparent; }

/* ---------- 2) LAYOUT ---------- */
#app.container{ max-width:460px;width:100%;margin:auto; }

/* Fullscreen pages (splash, login, liveness) */
#splash-page,#login-page,#liveness-check{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100vh;margin:0;padding:0;overflow:hidden;
  flex-direction:column;
}

/* ---------- 3) FLAT CARDS / SURFACES ---------- */
.this-page{
  background:var(--surface)!important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:none; color:var(--text)!important;
  position:relative; z-index:5;
}
#home-page>.this-page{ background:var(--surface)!important;border-radius:var(--radius); }

/* ---------- 4) SPLASH VISUALS ---------- */
.bg-overlay{
  position:absolute; inset:0; z-index:1;
  background:#0f172a!important; filter:none!important; background-image:none!important;
}
.bg-overlay::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:transparent!important; mix-blend-mode:normal!important; opacity:1!important;
}
/* Logo splash */
#splash-logo{ border:4px solid var(--primary); border-radius:50%; max-width:15%; }

/* ---------- 5) TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-.02em; margin:0; }
.fw-900{ font-weight:900; }
#manifesto p,#manifesto ol{ color:var(--muted)!important; margin:0; }

/* Label “Updated in …” di bawah judul Markov */
#markov-updated{ color:var(--muted); text-align:center; margin:-6px 0 .5rem; font-size:.9rem; }

/* ---------- 6) BUTTONS ---------- */
.btn{ border-radius:10px; box-shadow:none!important; font-weight:600; }
.btn-primary{ background:var(--primary)!important; border-color:var(--primary)!important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-hover)!important; border-color:var(--primary-hover)!important; }

/* Outline buttons (vote list) */
.btn-outline-primary{ border-color:var(--primary)!important; color:var(--primary)!important; background:transparent!important; }
.btn-outline-primary:hover,.btn-outline-primary:focus{ background:var(--primary)!important; color:#fff!important; }

/* ---------- 7) FORMS ---------- */
.form-label{ font-weight:700; color:var(--text)!important; }
.form-control{ border-radius:10px; border:1px solid var(--border); box-shadow:none; }
.form-control:focus{ border-color:var(--primary); outline:none; box-shadow:none; }

/* ---------- 8) HOME HEADER ---------- */
#home-page .this-page:first-of-type{ border:1px solid var(--border); }
#home-page h2{ font-weight:600; color:var(--text); }
#home-page i{ color:var(--primary)!important; }
/* Embedded About Us iframe */

/* ---------- 15) NOTIFICATIONS ---------- */
#notif-container{
  position:fixed; bottom:1rem; left:1rem;
  display:flex; flex-direction:column; gap:.5rem;
  pointer-events:none; z-index:9999;
}
.notif{
  background:gold; color:var(--text);
  border-radius:10px; padding:.5rem .75rem; font-size:.8rem; white-space:nowrap;
  opacity:0; animation:slideIn .25s ease-out forwards, fadeOut .3s ease-in forwards 8.7s;
}
@keyframes slideIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes fadeOut{ to{ opacity:0; } }

/* ---------- 16) RESPONSIVE TWEAKS ---------- */
@media (max-width:600px){
  .w-25{ width:100%!important; }
  .emiten-info+.emiten-info{ margin-top:.5rem; }
}
@media (max-width:960px){
  #splash-logo{ max-width:30%; }
  #login-form{ width:100%!important; }
  .this-page{ width:100%!important; max-width:100%!important; }
}

/* ---------- 17) TAG CAPSULES ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0; }
.tag{ padding:6px 14px; border-radius:20px; font-size:14px; font-weight:500; text-decoration:none; color:#fff; transition:.2s; }
.tag:hover{ transform:scale(1.05); opacity:.9; }
.tag.blue{ background:#007bff; }
.tag.green{ background:#28a745; }
.tag.orange{ background:#fd7e14; }
.tag.purple{ background:#6f42c1; }
.tag.red{ background:#dc3545; }
.tag.teal{ background:#20c997; }
.tag.pink{ background:#e83e8c; }

.icon-btn {
    text-decoration: none !important;
}
.icon-btn i {
    text-decoration: none !important;
}