:root {
  --nw-green: #00B140;
  --nw-purple: #6C43F3;
  --nw-gradient: linear-gradient(90deg, var(--nw-green), var(--nw-purple));
  --nw-bg: #f8fbf9;
  --srj-text: #222;
  --srj-muted: #666;
}

/* wrapper */
.srj-wrapper{font-family:Inter, system-ui, -apple-system, 'Poppins', sans-serif; margin:24px 0; padding:16px; background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.04);}
.srj-title{font-size:18px; color:var(--nw-purple); margin:0 0 12px; font-weight:700;}

/* Cards */
.srj-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.srj-card{background:var(--nw-bg); padding:12px; border-radius:10px; border:1px solid #e9eef6; transition:transform .2s, box-shadow .2s;}
.srj-card:hover{transform:translateY(-6px); box-shadow:0 8px 20px rgba(108,67,243,0.08);}
.srj-card-title{display:block; font-weight:600; color:var(--srj-text); margin-bottom:6px; text-decoration:none;}
.srj-card-meta{font-size:12px; color:var(--srj-muted);}

/* List */
.srj-list{padding:0; margin:0; list-style:none; display:block;}
.srj-list li{padding:8px 0; border-bottom:1px dashed #f0f3f8;}
.srj-list li a{color:var(--nw-green); text-decoration:none; font-weight:600;}

/* Buttons */
.srj-buttons{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;}
.srj-btn{padding:8px 12px; border-radius:8px; border:2px solid var(--nw-purple); color:var(--nw-purple); text-decoration:none; font-weight:600; display:inline-block;}
.srj-btn:hover{background:var(--nw-gradient); color:#fff;}

/* Banner */
.srj-banner{display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(90deg,#f0fff6, #f6f0ff); padding:12px; border-radius:10px;}
.srj-banner-inner{display:flex; gap:10px; flex-wrap:wrap;}
.srj-banner-item{background:#fff; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--srj-text); border:1px solid #eceff7;}

/* CTA */
.srj-cta{padding:10px 14px; border-radius:8px; background:var(--nw-gradient); color:#fff; text-decoration:none; font-weight:700;}

/* Infobox */
.srj-infobox{background:var(--nw-gradient); color:#fff; padding:12px; border-radius:10px; display:flex; gap:8px; flex-wrap:wrap;}
.srj-infobox a{color:#fff; font-weight:700; text-decoration:underline;}

/* Slider (CSS scroll-snap) */
.srj-slider{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.srj-slide{flex:0 0 260px; background:var(--nw-bg); padding:12px; border-radius:10px; border:1px solid #e9eef6; scroll-snap-align:start;}
.srj-slide .srj-card-title{font-weight:700; color:var(--srj-text); margin-bottom:6px; text-decoration:none; display:block;}

/* small screens */
@media (max-width:600px){
  .srj-slide{flex:0 0 85%;}
  .srj-cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .srj-banner{flex-direction:column; align-items:flex-start;}
  .srj-cta{align-self:stretch; text-align:center;}
}