/* Stage 39.4 - Surf rewards and sitewide readability audit
   Final high-contrast overrides for Traffic Viewer reward cards, surf panels,
   sponsor slots, forms, tables and dashboard cards. */
:root{
  --ibo-readable-title:#061936;
  --ibo-readable-body:#17233a;
  --ibo-readable-muted:#334155;
  --ibo-readable-soft:#475569;
  --ibo-readable-link:#075bdc;
  --ibo-dark-title:#ffffff;
  --ibo-dark-body:#f8fbff;
  --ibo-dark-muted:#dbeafe;
}

/* Traffic Viewer reward panel */
.stage38-reward-panel,
.stage38-reward-panel *{
  opacity:1!important;
  text-shadow:none!important;
}
.stage38-reward-panel{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:2px solid #bfdbfe!important;
  box-shadow:0 18px 42px rgba(15,23,42,.10)!important;
}
.stage38-reward-head h3,
.stage38-reward-panel h2,
.stage38-reward-panel h3,
.stage38-reward-panel strong{
  color:var(--ibo-readable-title)!important;
  font-weight:950!important;
}
.stage38-reward-head p,
.stage38-reward-panel p,
.stage38-reward-panel small,
.stage38-reward-panel span{
  color:var(--ibo-readable-body)!important;
  font-weight:850!important;
  line-height:1.55!important;
}
.stage38-reward-panel .surf-badge{
  background:#fff3bf!important;
  color:#3b2600!important;
  border:1px solid #f59e0b!important;
  font-weight:950!important;
  box-shadow:0 6px 16px rgba(245,158,11,.16)!important;
}
.stage38-progress{
  height:16px!important;
  background:#eaf2ff!important;
  border:1px solid #93c5fd!important;
}
.stage38-progress span{
  background:linear-gradient(90deg,#075bdc 0%,#22c55e 100%)!important;
  min-width:4px;
}
.stage38-milestone{
  background:#ffffff!important;
  border:2px solid #dbeafe!important;
  box-shadow:0 12px 30px rgba(15,23,42,.08)!important;
  position:relative!important;
  overflow:hidden!important;
}
.stage38-milestone span{
  color:#17233a!important;
  font-weight:950!important;
  font-size:14px!important;
}
.stage38-milestone strong{
  color:#075bdc!important;
  font-size:30px!important;
  font-weight:950!important;
  line-height:1.05!important;
}
.stage38-milestone small{
  color:#334155!important;
  font-size:13px!important;
  font-weight:900!important;
}
.stage38-milestone.locked{
  opacity:1!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
.stage38-milestone.claimable{
  background:linear-gradient(180deg,#ecfdf5,#ffffff)!important;
  border-color:#22c55e!important;
}
.stage38-milestone.claimable:after{
  content:'Ready to claim';
  position:absolute;
  top:10px;
  right:10px;
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:950;
}
.stage38-milestone.claimed{
  background:#f0fdf4!important;
  border-color:#86efac!important;
}
.stage38-milestone.streak{
  background:linear-gradient(180deg,#fff7ed,#ffffff)!important;
  border-color:#fb923c!important;
}
.stage38-milestone.streak strong{color:#c2410c!important;}
.stage38-milestone .btn{
  color:#ffffff!important;
  font-weight:950!important;
}
.stage38-reward-head .btn,
.stage38-reward-panel .btn-soft{
  background:#eff6ff!important;
  color:#0646b8!important;
  border:1px solid #bfdbfe!important;
  font-weight:950!important;
}

/* Dark sections: keep all copy visible */
.readable-dark-panel,
.surf-hero,
.surf-viewer-card,
.surf-toolbar,
.surf-mode-banner{
  color:#ffffff!important;
}
.readable-dark-panel h1,.readable-dark-panel h2,.readable-dark-panel h3,
.surf-hero h1,.surf-hero h2,.surf-hero h3,
.surf-viewer-card h1,.surf-viewer-card h2,.surf-viewer-card h3,
.surf-toolbar h1,.surf-toolbar h2,.surf-toolbar h3{
  color:#ffffff!important;
  opacity:1!important;
}
.readable-dark-panel p,.readable-dark-panel small,.readable-dark-panel span,
.surf-hero p,.surf-hero small,
.surf-viewer-card .surf-toolbar p,
.surf-mode-banner small{
  color:#f8fbff!important;
  opacity:1!important;
  font-weight:800!important;
}
.surf-rules-mini span,.surf-rules-mini b{
  opacity:1!important;
}

/* Surf session side/card readability */
.surf-session-side,
.surf-campaign-meta,
.surf-timer,
.surf-check,
.surf-bottom-grid .surf-rules-card,
.stage377-sponsor-slot,
.surf-empty-production{
  color:#0f172a!important;
  opacity:1!important;
}
.surf-session-side h3,.surf-campaign-meta h3,.surf-timer strong,
.surf-check b,.surf-rules-card h3,.stage377-sponsor-slot strong,
.surf-empty-production h2{
  color:#061936!important;
  font-weight:950!important;
}
.surf-session-side p,.surf-session-side li,.surf-timer span,.surf-timer small,
.surf-check span,.surf-rules-card p,.stage377-sponsor-slot p,.stage377-slot-note,
.surf-empty-production p{
  color:#17233a!important;
  font-weight:850!important;
  line-height:1.55!important;
  opacity:1!important;
}
.surf-frame-wrap .surf-frame-top span,
.surf-frame-wrap .surf-mode-banner strong,
.surf-frame-wrap .surf-mode-banner small{
  color:#0f172a!important;
  opacity:1!important;
}
.mode-pill,.iframe-mode{
  color:#0646b8!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  font-weight:950!important;
}

/* Sitewide fallback for faint text in cards, tables and forms */
.card p,.card small,.table td,.table th,
.stage37-main p,.stage37-main small,
.app-main p,.app-main small,
input::placeholder,textarea::placeholder,select,
.footer p,.footer a,.site-footer p,.site-footer a{
  opacity:1!important;
}
.app-main p,.stage37-main p,.card p,.table td small{
  color:#334155!important;
  font-weight:700;
}
input::placeholder,textarea::placeholder{color:#64748b!important;font-weight:700!important;}

@media(max-width:760px){
  .stage38-reward-panel{padding:16px!important;border-radius:20px!important;}
  .stage38-reward-head{gap:12px!important;}
  .stage38-milestone-row{grid-template-columns:1fr!important;}
  .stage38-milestone{min-height:96px!important;padding:14px!important;}
  .stage38-milestone strong{font-size:26px!important;}
  .stage38-reward-head .btn{width:100%;justify-content:center;}
}