:root{
  --brand1:#ff416c;
  --brand2:#ff4b2b;
  --accent:#ffcc00;
  --muted:#6c757d;
  --card-bg:#fff;
  --page-bg:#f3f6f9;
  --container-max:1100px;
}

html,body{height:100%; background:var(--page-bg); font-family: "Inter", system-ui, -apple-system, 'Segoe UI', Roboto, Arial; color:#0d1b2a;}
.site-top .navbar{background:linear-gradient(90deg,var(--brand1),var(--brand2)); border-radius:10px; padding:.5rem 1rem;}
.navbar-brand img{height:52px; margin-right:10px; border-radius:6px;}
.brand-title{color:#fff; font-weight:700;}
.brand-sub{color:rgba(255,255,255,0.9); font-size:.85rem; margin-top:2px;}
.container{max-width:var(--container-max)!important;}

.hero{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:30px; border-radius:8px; box-shadow:0 6px 26px rgba(13,59,102,0.04);}

.content-card{background:var(--card-bg); padding:18px; border-radius:10px; box-shadow:0 8px 24px rgba(18,38,63,0.04); margin-bottom:16px;}
.section-title{font-weight:700; color:#0d3b66; margin-bottom:8px;}

.list-unstyled a{color:#0d3b66; text-decoration:none;}
.list-unstyled a:hover{text-decoration:underline;}

.site-footer{margin-top:18px; padding:18px; background:#0b1220; color:#ddd; border-radius:8px;}
.site-footer a{color:var(--accent); text-decoration:none;}

.circle-refresh{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(180deg,#6a11cb,#2575fc); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(41,128,185,0.18); z-index:9999; cursor:pointer; border:3px solid rgba(255,255,255,0.06);
  animation:floaty 4s ease-in-out infinite;
}
.refresh-icon{font-size:18px; animation:rotate 2.5s linear infinite;}
@keyframes rotate{100%{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (max-width:575px){
  .hero{padding:18px}
  .brand-title{font-size:1.05rem;}
}