:root{
      --brand: <?= safe($config['BRAND_COLOR']) ?>;
      --accent: <?= safe($config['ACCENT']) ?>;
      --ink:#0f172a;
      --muted:#64748b;
    }

    body{
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink)
    }

    .topbar{background:#0b1220;color:#cbd5e1;font-size:.875rem}

    .navbar-brand{font-weight:900;letter-spacing:.4px}
    .navbar-brand span{color:var(--brand)}

    .nav-link{font-weight:600}

    /* Global hover for links (site-wide) */
    .nav-link:hover{color:var(--brand)!important}

    .btn-subscribe{background:var(--brand);color:#fff;font-weight:700}
    .btn-subscribe:hover{filter:brightness(.95)}

    .badge-cat{
      border-radius:999px;
      background: linear-gradient(120deg, #3c00e0 0%, #5c00c9 40%, #9b009b 100%);
      color:#fff;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.3px;
      font-size:.7rem
    }

    .feature-lg{position:relative; overflow:hidden; border-radius:12px}
    .feature-lg img{width:100%; aspect-ratio:16/9; object-fit:cover}
    .feature-lg .overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));}
    .feature-lg .meta{position:absolute; left:1rem; right:1rem; bottom:1rem; color:#fff}

    .card-article{border:none;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
    .card-article img{width:100%; aspect-ratio:16/9; object-fit:cover}
    .card-article .card-body{padding:12px}

    .widget{border:1px solid #e5e7eb;border-radius:12px;padding:16px}
    .widget-title{font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.3px}

    .article-hero img{width:100%; aspect-ratio:16/7; object-fit:cover}

    .title{font-weight:900;letter-spacing:-.2px}
    .byline{color:var(--muted)}

    .sticky-share{position:sticky; top:90px}
    .share-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid #e5e7eb;background:#fff}

    .prose p{line-height:1.75}
    .prose h2{margin-top:1.5rem;font-weight:800}

    .note{border-left:4px solid var(--brand);background:#f8fafc;padding:12px 14px;border-radius:8px}

    .tag{border:1px solid #e5e7eb;border-radius:999px;padding:.25rem .6rem;font-size:.85rem}

    .article-featured img{
      width:100%;
      height:auto;
      max-height:520px;
      object-fit:cover;
    }

    /* =========================
      GRADIENT NAVBAR (FIXED)
      - overrides global .nav-link:hover !important
      ========================= */

    .navbar-gradient{
      background: linear-gradient(90deg, #3c00e0, #9b009b);
    }

    .navbar-gradient .navbar-brand,
    .navbar-gradient .nav-link{
      color:#fff !important;
    }

    /* IMPORTANT: keep hover BRIGHT on gradient nav */
    .navbar-gradient .nav-link:hover,
    .navbar-gradient .nav-link:focus{
      color:#fff !important;
      opacity:1 !important;
    }

    .navbar-gradient .navbar-nav .nav-item{margin-left:1.0rem;}
    .navbar-gradient .navbar-nav .nav-item:first-child{margin-left:0;}

    /* Underline hover indicator */
    .navbar-gradient .nav-link{
      position:relative;
      transition:color .2s ease;
    }

    .navbar-gradient .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-2px;
      width:0;
      height:2px;
      background:#fff;
      transition:width .25s ease;
    }

    .navbar-gradient .nav-link:hover::after{
      width:100%;
    }