/* =====================================================================
   AnjokMetaFlow — Blue theme · responsive (mobile + web)
   ===================================================================== */
:root{
  --blue-50:#eff6ff;  --blue-100:#dbeafe; --blue-200:#bfdbfe;
  --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6;
  --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af;
  --blue-900:#1e3a8a;
  --ink:#0f1e3d; --muted:#5b6b86; --line:#e6ecf5;
  --bg:#f4f7fd; --card:#ffffff;
  --ig:#c13584;
  --radius:16px; --shadow:0 8px 30px rgba(37,99,235,.08);
  --shadow-sm:0 2px 10px rgba(15,30,61,.06);
}
*{ -webkit-tap-highlight-color: transparent; }
body{
  background:
    radial-gradient(1200px 500px at 100% -10%, var(--blue-100), transparent 60%),
    radial-gradient(900px 400px at -10% 0%, #e7f0ff, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  min-height:100vh;
}

/* ---------- Top navigation ---------- */
.app-nav{
  background:linear-gradient(100deg,var(--blue-700),var(--blue-600) 55%,var(--blue-500));
  box-shadow:0 6px 22px rgba(29,78,216,.28);
  position:sticky; top:0; z-index:1030;
}
.app-nav .navbar-brand{ display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:.2px; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.app-nav .nav-link{ color:rgba(255,255,255,.86)!important; font-weight:600; font-size:.95rem; border-radius:10px; padding:.4rem .8rem!important; }
.app-nav .nav-link:hover{ color:#fff!important; background:rgba(255,255,255,.12); }
.app-nav .nav-link.active{ color:#fff!important; background:rgba(255,255,255,.2); }
.acct-switch .form-select{
  border:none; border-radius:12px; font-weight:600; color:var(--blue-800);
  background-color:rgba(255,255,255,.92); box-shadow:var(--shadow-sm); min-width:180px;
}

/* ---------- Cards & layout ---------- */
.card{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--card); }
.card.glass{ box-shadow:var(--shadow); }
.section-title{ font-weight:800; letter-spacing:-.2px; }
.text-muted{ color:var(--muted)!important; }

/* ---------- Buttons ---------- */
.btn{ border-radius:12px; font-weight:600; }
.btn-brand{ background:linear-gradient(100deg,var(--blue-700),var(--blue-500)); border:none; color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.28); }
.btn-brand:hover{ filter:brightness(1.05); color:#fff; transform:translateY(-1px); }
.btn-outline-primary{ border-color:var(--blue-300); color:var(--blue-700); }
.btn-outline-primary:hover{ background:var(--blue-600); border-color:var(--blue-600); }
.btn-success{ background:linear-gradient(100deg,#0ea15b,#12b981); border:none; }

/* ---------- Stat cards ---------- */
.stat-card{ position:relative; overflow:hidden; border-radius:var(--radius); transition:.18s; }
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-card .num{ font-size:2rem; font-weight:800; line-height:1; color:var(--blue-700); }
.stat-card .lbl{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.stat-card .ic{ position:absolute; right:-6px; bottom:-8px; font-size:3.4rem; opacity:.08; }

/* ---------- Pills / badges ---------- */
.pill-fb{ background:var(--blue-50); color:var(--blue-700); border-radius:20px; padding:2px 10px; font-size:.72rem; font-weight:700; }
.pill-ig{ background:#fbeaf4; color:var(--ig); border-radius:20px; padding:2px 10px; font-size:.72rem; font-weight:700; }
.badge-new{ background:var(--blue-50); color:var(--blue-700); }
.badge-replied{ background:#e6f7ee; color:#0f9d58; }
.badge-hidden{ background:#fdeaea; color:#d0342c; }
.badge-skipped{ background:#eef1f6; color:#77839a; }
.badge{ font-weight:700; border-radius:8px; }

/* ---------- Post media ---------- */
.post-card{ overflow:hidden; }
.post-media{ position:relative; border-radius:12px; overflow:hidden; background:#0b1a36; aspect-ratio:16/10; }
.post-media img,.post-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.post-media .play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.05));
}
.post-media .play span{ width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--blue-700);display:grid;place-items:center;font-size:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.3); }
.post-empty{ aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue-50),#fff); color:var(--blue-300); border-radius:12px; font-size:2rem; }

/* ---------- Tables ---------- */
.table{ margin-bottom:0; }
.table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--line); }
.table td{ vertical-align:middle; }
.comment-msg{ max-width:460px; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; }

/* ---------- Pagination ---------- */
.pagination .page-link{ border:none; color:var(--blue-700); border-radius:10px!important; margin:0 3px; font-weight:600; }
.pagination .page-item.active .page-link{ background:var(--blue-600); color:#fff; }
.pagination .page-item.disabled .page-link{ color:#b9c3d6; }

/* ---------- Auth (login / register) ---------- */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.auth-hero{
  position:relative; color:#fff; padding:56px 48px; overflow:hidden;
  background:linear-gradient(140deg,var(--blue-800),var(--blue-600) 60%,var(--blue-500));
}
.auth-hero:after{ content:""; position:absolute; width:520px;height:520px; right:-160px; bottom:-200px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%); border-radius:50%; }
.auth-hero .brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.35rem; }
.auth-hero h1{ font-weight:800; font-size:2.3rem; line-height:1.15; margin:.4em 0 .3em; }
.auth-hero ul{ list-style:none; padding:0; margin:1.4rem 0 0; }
.auth-hero li{ display:flex; align-items:center; gap:.6rem; margin:.55rem 0; opacity:.95; }
.auth-hero li .tick{ width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.8rem; }
.auth-form-wrap{ display:grid; place-items:center; padding:32px; }
.auth-card{ width:100%; max-width:400px; border-radius:20px; }
.form-control,.form-select{ border-radius:12px; border:1px solid var(--line); padding:.6rem .8rem; }
.form-control:focus,.form-select:focus{ border-color:var(--blue-400); box-shadow:0 0 0 4px var(--blue-100); }
.input-icon{ position:relative; }
.input-icon .form-control{ padding-left:2.4rem; }
.input-icon .ic{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--blue-400); }

@media (max-width: 900px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-hero{ display:none; }
  .auth-form-wrap{ min-height:100vh; }
}
@media (max-width: 576px){
  main.container-fluid{ padding-left:.85rem!important; padding-right:.85rem!important; }
  .stat-card .num{ font-size:1.6rem; }
  .acct-switch .form-select{ min-width:100%; }
}