/* Stage 37.8 Adaptive Surf Engine: desktop, tablet and mobile surf modes */
:root{--surf-dark:#061b49;--surf-blue:#075bdc;--surf-text:#0f172a;--surf-muted:#334155;--surf-line:#dbeafe;}
.surf-page{max-width:1280px;margin:0 auto;padding-bottom:40px;}
.surf-hero.readable-dark-panel,.surf-viewer-card{background:linear-gradient(135deg,#071f57,#075bdc)!important;color:#fff!important;}
.surf-hero.readable-dark-panel h2,.surf-viewer-card .surf-toolbar h2{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.surf-hero.readable-dark-panel p,.surf-viewer-card .surf-toolbar p{color:#f8fbff!important;font-weight:800!important;opacity:1!important}.surf-rules-mini b{color:#fff!important}.surf-rules-mini span{background:#fff!important;color:#075bdc!important;border:1px solid rgba(255,255,255,.7)!important}
.stage378-device-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:12px 14px;background:#fff;border:1px solid var(--surf-line);border-radius:18px;box-shadow:0 12px 30px rgba(15,23,42,.07)}
.stage378-device-strip strong{color:#0f172a;font-size:15px}.stage378-device-strip span{color:#334155;font-weight:800;font-size:13px}.stage378-device-pills{display:flex;flex-wrap:wrap;gap:8px}.stage378-device-pills b{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#eff6ff;color:#075bdc;border:1px solid #bfdbfe;font-size:12px}
.stage378-surf-shell{position:relative}.stage378-wide-frame .surf-session-layout{display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;gap:16px!important;align-items:stretch}.stage378-wide-frame .surf-session-side{position:sticky;top:14px;align-self:start;background:#fff!important;border:1px solid var(--surf-line)!important;border-radius:22px!important;color:var(--surf-text)!important;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.stage378-wide-frame .surf-campaign-meta h3,.stage378-wide-frame .surf-campaign-meta p,.stage378-wide-frame .surf-campaign-meta li{color:#0f172a!important}.stage378-wide-frame .surf-campaign-meta p{font-weight:800!important;color:#334155!important}.stage378-wide-frame .surf-timer{background:linear-gradient(135deg,#fff7ed,#eff6ff)!important;border:1px solid #bfdbfe!important;color:#0f172a!important}.stage378-wide-frame .surf-timer strong{font-size:46px!important;color:#0f172a!important}.stage378-wide-frame .surf-timer span,.stage378-wide-frame .surf-timer small{color:#334155!important;font-weight:900!important}
.stage378-wide-frame .surf-frame-wrap{background:#fff!important;border-radius:18px!important;overflow:hidden!important;min-height:min(78vh,860px)!important;box-shadow:0 16px 40px rgba(0,0,0,.14)}.stage378-wide-frame .surf-frame-top{background:#fff!important;color:#0f172a!important;border-bottom:1px solid #dbeafe!important}.stage378-wide-frame .surf-frame-top span{color:#075bdc!important;font-weight:950!important}.stage378-wide-frame .surf-frame-top a{font-weight:950!important;color:#075bdc!important}.stage378-wide-frame .stage376-surf-iframe{display:block!important;width:100%!important;height:min(74vh,820px)!important;min-height:640px!important;background:#fff!important;border:0!important}
.stage378-mobile-action-bar{display:none}.stage378-mobile-action-bar .btn{flex:1;min-height:46px}.surf-check-grid{gap:10px!important}.surf-check{color:#0f172a!important}.surf-check span{color:#334155!important;font-weight:800!important}.surf-check.done{border-color:#86efac!important;background:#ecfdf3!important}.surf-check.pending{background:#fff!important;border-color:#dbeafe!important}.stage377-sponsor-slot{background:#fff!important}.stage377-sponsor-slot strong{font-size:clamp(17px,2vw,22px)!important}.stage377-sponsor-slot small,.stage377-slot-note{color:#334155!important}.surf-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.surf-stat span,.surf-stat small{color:#334155!important;font-weight:900!important}.surf-stat strong{color:#0f172a!important}.surf-bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.surf-rules-card p{color:#334155!important;font-weight:800!important;line-height:1.65!important}
/* tablet */
@media(max-width:1180px){.stage378-wide-frame .surf-session-layout{grid-template-columns:240px minmax(0,1fr)!important}.stage378-wide-frame .stage376-surf-iframe{height:66vh!important;min-height:560px!important}.stage378-wide-frame .surf-frame-wrap{min-height:620px!important}.surf-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.surf-bottom-grid{grid-template-columns:1fr 1fr!important}.stage378-device-strip{align-items:flex-start;flex-direction:column}}
/* mobile dedicated surf mode */
@media(max-width:760px){body.stage37-body{overflow-x:hidden}.stage37-main{padding:12px!important}.stage37-topbar{border-radius:18px!important;padding:18px!important;display:grid!important;gap:12px!important}.stage37-topbar .btn{width:100%;justify-content:center}.surf-page{padding-bottom:96px}.surf-hero.readable-dark-panel{border-radius:20px!important;padding:18px!important;display:grid!important;gap:14px!important}.surf-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.surf-hero-actions .btn{width:100%;justify-content:center;min-height:46px}.surf-stats-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.surf-stat{padding:14px!important;border-radius:16px!important}.stage377-rewards-grid{grid-template-columns:1fr 1fr!important}.stage377-sponsor-slot{border-radius:18px!important;margin:12px 0!important;padding:10px!important}.stage377-sponsor-slot img{width:100%!important;max-height:120px!important;object-fit:contain!important}.stage378-device-strip{border-radius:16px!important}.stage378-device-pills{width:100%;display:grid;grid-template-columns:1fr 1fr}.stage378-wide-frame{padding:12px!important;border-radius:22px!important;margin-left:-2px;margin-right:-2px}.stage378-wide-frame .surf-toolbar{display:grid!important;gap:12px!important}.surf-rules-mini{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.surf-rules-mini b{grid-column:1/-1}.stage378-wide-frame .surf-session-layout{display:flex!important;flex-direction:column!important;gap:12px!important}.stage378-wide-frame .surf-session-side{position:relative!important;top:auto!important;order:1;width:100%!important;border-radius:18px!important;padding:12px!important}.stage378-wide-frame .surf-timer{display:grid!important;place-items:center!important;padding:12px!important}.stage378-wide-frame .surf-timer strong{font-size:38px!important}.stage378-wide-frame .surf-campaign-meta ul{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}.surf-complete-form{display:grid!important;gap:10px!important}.surf-complete-form .btn{min-height:48px;width:100%}.stage378-wide-frame .surf-frame-wrap{order:2;width:100%!important;border-radius:18px!important;min-height:64vh!important}.stage378-wide-frame .surf-frame-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 12px!important}.stage378-wide-frame .stage376-surf-iframe{height:60vh!important;min-height:420px!important;width:100%!important}.surf-check-grid{grid-template-columns:1fr 1fr!important;margin-top:12px!important}.surf-check{min-height:74px!important;border-radius:14px!important;padding:10px!important}.stage378-mobile-action-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px;background:rgba(255,255,255,.96);border-top:1px solid #dbeafe;box-shadow:0 -16px 35px rgba(15,23,42,.18);backdrop-filter:blur(10px)}.surf-bottom-grid{grid-template-columns:1fr!important;gap:12px!important}.surf-empty-production{padding:22px 14px!important}.empty-actions{display:grid!important;grid-template-columns:1fr!important}.empty-actions .btn{width:100%;justify-content:center}.app-sidebar{transform:translateX(-105%);position:fixed!important;z-index:80;inset:0 auto 0 0;width:86vw!important;max-width:320px!important;transition:.2s ease}.app-shell.sidebar-open .app-sidebar{transform:translateX(0)}.stage378-mobile-menu-toggle{display:inline-flex!important}.stage27-bottom-nav,.mobile-bottom-nav{display:none!important}}
@media(max-width:430px){.surf-stats-grid,.stage377-rewards-grid,.surf-check-grid{grid-template-columns:1fr!important}.stage378-device-pills{grid-template-columns:1fr}.stage378-wide-frame .stage376-surf-iframe{height:58vh!important;min-height:360px!important}.stage377-sponsor-slot img{max-height:100px!important}.surf-rules-mini{grid-template-columns:1fr!important}}
@media(min-width:761px){.stage378-mobile-menu-toggle{display:none!important}}