.viewer-page { min-height:100vh; background:#070c16; }
.viewer-header { position:relative; border-bottom-color:rgba(79,195,247,.16); }
.viewer-logo { display:flex; align-items:center; gap:10px; color:var(--primary); text-decoration:none; }
.viewer-logo img { width:32px; height:32px; border-radius:8px; }
.viewer-header .site-sections { margin-left:auto; }
.viewer-community { margin-left:0; padding:7px 11px; border:1px solid var(--border); border-radius:8px; color:var(--text2); font-size:11px; font-weight:800; text-decoration:none; }
.viewer-main { width:min(1320px,calc(100% - 32px)); margin:0 auto; padding:54px 0 70px; }
.viewer-intro { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:50px; align-items:end; margin-bottom:36px; }
.viewer-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:15px; color:var(--primary); font-size:10px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; }
.viewer-eyebrow i { width:28px; height:1px; background:var(--primary); box-shadow:0 0 10px var(--primary); }
.viewer-intro h1 { max-width:800px; color:#f2f7ff; font-size:clamp(38px,5.2vw,72px); line-height:.98; letter-spacing:-2.8px; }
.viewer-intro h1 span { color:#7890ac; }
.viewer-intro p { max-width:680px; margin-top:20px; color:var(--text2); font-size:14px; line-height:1.7; }
.viewer-intro-status { padding:17px 18px; border-left:2px solid #f59e0b; background:rgba(245,158,11,.055); }
.viewer-intro-status span,.viewer-intro-status small { display:block; color:var(--text2); font-size:9px; line-height:1.45; }
.viewer-intro-status strong { display:block; margin:6px 0; color:#fbbf24; font-size:15px; }
.tactical-desk { min-height:570px; display:grid; grid-template-columns:290px minmax(0,1fr); overflow:hidden; border:1px solid rgba(79,195,247,.22); border-radius:18px; background:#0d1524; box-shadow:0 32px 90px rgba(0,0,0,.32); }
.tactical-controls { padding:22px; border-right:1px solid rgba(79,195,247,.16); background:linear-gradient(180deg,rgba(79,195,247,.055),transparent 38%); }
.tactical-step { padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.tactical-step > span { display:block; margin-bottom:6px; color:var(--primary); font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.tactical-step strong { color:var(--text1); font-size:13px; }
.tactical-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tactical-chips i { padding:6px 8px; border:1px solid var(--border); border-radius:7px; color:var(--text2); font-size:9px; font-style:normal; }
.tactical-chips i.selected { border-color:var(--primary); color:var(--primary); background:rgba(79,195,247,.1); }
.agent-slots { display:flex; gap:7px; margin-top:12px; }
.agent-slots i { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border); border-radius:9px; color:var(--text2); background:var(--surface2); font-size:11px; font-style:normal; font-weight:900; }
.tactical-step.muted { opacity:.5; }
.premium-lock { margin-top:34px; padding:14px; border:1px solid rgba(245,158,11,.24); border-radius:10px; background:rgba(245,158,11,.05); }
.premium-lock b { color:#fbbf24; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.premium-lock p { margin-top:7px; color:var(--text2); font-size:10px; line-height:1.55; }
.map-stage { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 50%,rgba(79,195,247,.07),transparent 45%),#090f1b; }
.map-grid { position:absolute; inset:34px; opacity:.52; border:1px solid rgba(79,195,247,.16); background-image:linear-gradient(rgba(79,195,247,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(79,195,247,.055) 1px,transparent 1px); background-size:38px 38px; clip-path:polygon(8% 10%,44% 3%,56% 13%,90% 8%,96% 38%,83% 54%,91% 88%,60% 96%,47% 87%,13% 94%,5% 62%,15% 45%); }
.map-grid::before,.map-grid::after { content:""; position:absolute; border:2px solid rgba(79,195,247,.28); }
.map-grid::before { inset:18% 52% 48% 12%; transform:rotate(-8deg); }
.map-grid::after { inset:42% 12% 12% 48%; transform:rotate(7deg); }
.map-grid > span { position:absolute; display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,70,85,.6); color:#ff7180; font-size:17px; font-weight:900; }
.site-a { top:20%; right:21%; }.site-b { bottom:20%; left:22%; }
.route { position:absolute; height:2px; transform-origin:left; background:linear-gradient(90deg,var(--primary),transparent); box-shadow:0 0 9px rgba(79,195,247,.55); }
.route-one { width:38%; left:26%; top:63%; transform:rotate(-36deg); }.route-two { width:28%; left:46%; top:46%; transform:rotate(24deg); }
.point { position:absolute; width:11px; height:11px; border:2px solid #08111d; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px rgba(79,195,247,.14),0 0 17px var(--primary); }
.point-one { left:26%; top:63%; }.point-two { left:71%; top:57%; }
.map-stage-copy { position:relative; z-index:2; max-width:390px; padding:28px; text-align:center; background:radial-gradient(circle,rgba(9,15,27,.96) 35%,rgba(9,15,27,.5) 68%,transparent 72%); }
.map-stage-copy span { color:var(--primary); font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; }
.map-stage-copy h2 { margin:8px 0; color:var(--text1); font-size:24px; }
.map-stage-copy p { color:var(--text2); font-size:11px; line-height:1.6; }
.viewer-coming-soon { position:absolute; right:22px; top:20px; padding:6px 9px; border:1px solid rgba(245,158,11,.32); border-radius:99px; color:#fbbf24; background:rgba(245,158,11,.07); font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
@media(max-width:800px) {
  .viewer-community { display:none; }
  .viewer-main { width:min(100% - 20px,680px); padding-top:32px; }
  .viewer-intro { grid-template-columns:1fr; gap:22px; }
  .viewer-intro h1 { letter-spacing:-1.5px; }
  .tactical-desk { grid-template-columns:1fr; }
  .tactical-controls { border-right:0; border-bottom:1px solid rgba(79,195,247,.16); }
  .map-stage { min-height:430px; }
}
@media(max-width:620px) {
  .viewer-logo { font-size:0; }
  .viewer-logo span { display:none; }
  .viewer-header .site-sections { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }