:root{
      --bg0:#f5f9ff;
      --bg1:#eaf2ff;

      --ink:#081a2b;
      --ink2:rgba(8,26,43,.78);

      --brand: <?= e($site["brand_color"] ?? "#4a8bff") ?>;
      --brand2:#22c55e;
      --brand3:#8b7cf6;

      --surface: rgba(255,255,255,.1);
      --surface2: rgba(255,255,255,.2);

      --stroke: rgba(8,26,43,.12);
      --stroke2: rgba(74,139,255,.28);

      --shadow: 0 18px 55px rgba(15,40,80,.12);
      --r: 22px;
    }

    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background:
        radial-gradient(1100px 650px at 10% -10%, rgba(74,139,255,.20), transparent 60%),
        radial-gradient(900px 600px at 92% 0%, rgba(139,124,246,.16), transparent 62%),
        radial-gradient(900px 650px at 60% 105%, rgba(34,197,94,.10), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
    }
    a{color:inherit; text-decoration:none}

    /* Visibility */
    p, li, small, .small, .text-muted, .muted{ color: var(--ink2) !important; }
    h1,h2,h3,h4,h5,h6{ color: var(--ink) !important; }

    .glass{
      background: linear-gradient(180deg, var(--surface), var(--surface2));
      border: 1px solid var(--stroke);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      backdrop-filter: blur(2px);
    }

    .nav-blur{
      position:sticky; top:0; z-index:1030;
      background: rgba(245,249,255,.10);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(8,26,43,.10);
    }

    .brand-badge{
      width:42px; height:42px; border-radius:14px;
      display:grid; place-items:center;
      overflow:hidden;
      padding: 6px;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(8,26,43,.10);
      box-shadow: 0 14px 30px rgba(91,157,255,.10);
    }
    .brand-badge img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      border-radius: 12px;
    }

    .btn-brand{
      border:0;
      background: linear-gradient(135deg, rgba(74,139,255,1), rgba(139,124,246,1));
      color:white;
      border-radius: 14px;
      padding:.75rem 1rem;
      box-shadow: 0 16px 35px rgba(74,139,255,.18);
    }
    .btn-brand:hover{ filter:brightness(1.05); color:#fff; }
    .btn-soft{
      background: rgba(255,255,255,.92);
      border:1px solid var(--stroke);
      border-radius: 14px;
      color:var(--ink);
    }

    .chip{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.4rem .7rem;
      border-radius: 999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.92);
      color: rgba(8,26,43,.75);
      font-size:.85rem;
      white-space:nowrap;
    }

    /* HERO */
    .hero-left{
      position:relative;
      min-height: 360px;
      overflow:hidden;
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.20);
      box-shadow: var(--shadow);
    }
    .hero-left::before{
      content:"";
      position:absolute; inset:0;
      background-image: var(--hero-bg);
      background-size: cover;
      background-position: center;
      transform: scale(1.03);
      filter: saturate(1.05);
    }
    .hero-left::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(6,10,18,.90) 0%, rgba(6,10,18,.70) 55%, rgba(6,10,18,.86) 100%),
        radial-gradient(600px 300px at 15% 35%, rgba(91,157,255,.22), transparent 65%),
        radial-gradient(560px 280px at 75% 25%, rgba(167,139,250,.18), transparent 70%);
    }
    .hero-content{ position:relative; z-index:2; }
    .hero-content h1{ color:#fff !important; }
    .hero-content .hero-desc{ color: rgba(255,255,255,.16) !important; }

    /* Keypoints */
    .klist{ padding-left: 1.1rem; margin: .6rem 0 0; color: rgba(8,26,43,.82) !important; }
    .klist li{ margin:.2rem 0; }
    .hero-left .klist{ color: rgba(255,255,255,.88) !important; }

    /* Topic cards */
    .topic-card{
      height:100%;
      border-radius: var(--r);
      overflow:hidden;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.88);
      box-shadow: 0 18px 55px rgba(15,40,80,.10);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .topic-card:hover{
      transform: translateY(-4px);
      border-color: var(--stroke2);
      box-shadow: 0 24px 70px rgba(15,40,80,.14);
    }

    .thumb{
      height: 180px;
      background-size: cover;
      background-position: center;
      position:relative;
    }
    .thumb:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, transparent, rgba(6,10,18,.25));
    }

    /* Forms */
    .form-control, .form-select{
      background: rgba(255,255,255,.95);
      border: 1px solid var(--stroke);
      color: var(--ink);
      border-radius: 14px;
    }
    .form-control::placeholder{ color: rgba(8,26,43,.55); }
    .form-control:focus, .form-select:focus{
      box-shadow: 0 0 0 .25rem rgba(74,139,255,.18);
      border-color: rgba(74,139,255,.40);
    }

    /* Toast */
    .toast-live{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2000;
      width: min(560px, calc(100% - 24px));
      display:none;
    }
    .toast-live.show{display:block}
    .toast-box{
      display:flex; gap:.75rem; align-items:flex-start;
      padding: .9rem 1rem;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(8,12,24,.82);
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      color:#fff;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background: var(--brand2);
      box-shadow: 0 0 0 6px rgba(34,197,94,.15);
      margin-top:.35rem;
    }

    /* Floating button desktop */
    .floating-help{ position: fixed; right: 16px; bottom: 16px; z-index: 1500; }
    .floating-help .btn{ border-radius: 999px; padding:.85rem 1rem; box-shadow: 0 16px 40px rgba(15,40,80,.16); }

    /* Footer */
    .site-footer{ margin-top: 56px; padding: 28px 0 22px; }
    .footer-top{ border-radius: 26px; overflow:hidden; position:relative; }
    .footer-top::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 260px at 10% 0%, rgba(74,139,255,.20), transparent 60%),
        radial-gradient(680px 240px at 90% 0%, rgba(139,124,246,.16), transparent 62%),
        radial-gradient(700px 260px at 60% 120%, rgba(34,197,94,.10), transparent 60%);
      pointer-events:none;
    }
    .footer-inner{ position:relative; z-index:1; }
    .footer-link{
      display:flex; gap:.55rem; align-items:center;
      padding:.55rem .7rem;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.90);
    }
    .footer-link:hover{ filter: brightness(1.02); }
    .footer-mini{
      border-top: 1px solid rgba(8,26,43,.10);
      margin-top: 18px;
      padding-top: 14px;
      color: var(--ink2);
      font-size: .92rem;
    }

    /* =========================
       MOBILE BOTTOM NAV
    ========================= */

    @media (max-width: 767.98px){
      body{ padding-bottom: 110px; }
      .floating-help{ display:none !important; }
    }

    .mobile-bottom-nav{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 3000;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(245,249,255,.78);
      backdrop-filter: blur(16px);
      border-top: 1px solid rgba(8,26,43,.10);
      display: none;
    }
    @media (max-width: 767.98px){
      .mobile-bottom-nav{ display:block; }
    }

    .mobile-bottom-nav .nav-wrap{
      width: min(620px, 100%);
      margin: 0 auto;
      position: relative;

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;

      padding: 12px 12px 10px;
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(8,26,43,.10);
      box-shadow: 0 18px 60px rgba(15,40,80,.16);
    }

    .mobile-bottom-nav .nav-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 4px;

      padding: 10px 6px;
      border-radius: 16px;

      color: rgba(8,26,43,.72);
      border: 1px solid transparent;
      transition: .18s ease;

      user-select:none;
      background: transparent;
      text-decoration:none;
      min-width: 0;
    }

    .mobile-bottom-nav .nav-item i{
      font-size: clamp(1.05rem, 3.8vw, 1.35rem);
      line-height: 1;
    }
    .mobile-bottom-nav .nav-item span{
      font-size: clamp(.62rem, 2.6vw, .78rem);
      font-weight: 700;
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .mobile-bottom-nav .nav-item.active{
      background: linear-gradient(135deg, rgba(74,139,255,.18), rgba(139,124,246,.16));
      border-color: rgba(74,139,255,.26);
      color: rgba(8,26,43,.95);
    }

    /* center floating action */
    .mobile-bottom-nav .fab{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -45%);
      width: 58px;
      height: 58px;
      border-radius: 999px;

      display:grid;
      place-items:center;

      border: 0;
      color: #fff;
      background: linear-gradient(135deg, rgba(74,139,255,1), rgba(139,124,246,1));
      box-shadow: 0 18px 45px rgba(74,139,255,.28);
    }
    .mobile-bottom-nav .fab i{
      font-size: 1.45rem;
      line-height: 1;
    }
    .mobile-bottom-nav .fab:active{ transform: translate(-50%, -45%) scale(.98); }

    /* cutout behind FAB */
    .mobile-bottom-nav .nav-wrap::before{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      transform: translate(-50%, -35%);
      width: 72px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(8,26,43,.08);
      box-shadow: 0 10px 30px rgba(15,40,80,.10);
    }

    @media (max-width: 360px){
      .mobile-bottom-nav .nav-item span{ display:none; }
      .mobile-bottom-nav .nav-item{ padding: 12px 6px; }
    }

    /* toast above bottom nav */
    .toast-live{ bottom: 112px; }

    /* =========================
   PAGINATION (STYLED)
========================= */

.pager-wrap{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

.pagination{
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.70);
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 55px rgba(15,40,80,.10);
  backdrop-filter: blur(10px);
}

.pagination .page-item{
  margin: 0 !important;
}

.pagination .page-link{
  border: 1px solid rgba(8,26,43,.12);
  background: rgba(255,255,255,.92);
  color: rgba(8,26,43,.82);

  border-radius: 14px;
  min-width: 44px;
  height: 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight: 800;
  padding: 0 14px;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 10px 24px rgba(15,40,80,.08);
}

.pagination .page-link:hover{
  transform: translateY(-2px);
  border-color: rgba(74,139,255,.35);
  box-shadow: 0 14px 30px rgba(74,139,255,.14);
}

.pagination .page-item.active .page-link{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, rgba(74,139,255,1), rgba(139,124,246,1));
  box-shadow: 0 16px 35px rgba(74,139,255,.22);
}

.pagination .page-item.disabled .page-link{
  opacity: .55;
  pointer-events:none;
  background: rgba(255,255,255,.65);
}

/* Ellipsis */
.pagination .page-item.disabled span.page-link{
  min-width: 44px;
  padding: 0 12px;
  border-style: dashed;
  opacity: .7;
}

/* Make arrows look like icon buttons */
.pagination .page-link i{
  font-size: 1.05rem;
  line-height: 1;
}

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 767.98px){
  .pagination{
    width: 100%;
    max-width: 520px;
    justify-content:center;
    padding: 10px;
    border-radius: 22px;
  }

  .pagination .page-link{
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 0 12px;
    font-weight: 800;
  }
}

/* super small phones: hide numbers far away, keep usable tap targets */
@media (max-width: 360px){
  .pagination{
    gap: 6px;
  }
  .pagination .page-link{
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
  }
}