:root{
  --bg:#070808; --panel:#0d0f10; --line:#1c2022; --dim:#7a8288; --txt:#e6e9ea;
  --acc:#ff3b30; --green:#39d353; --gold:#d4a017; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.gold{color:var(--gold)}
.red{color:var(--acc)}
.green{color:var(--green)}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(7,8,8,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);letter-spacing:.22em;font-size:12px}
.brand b{color:var(--acc);font-weight:700}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.top__nav{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.top__nav a:hover{color:var(--txt)}
.counter{font-family:var(--mono);font-size:11px;color:var(--dim)}
.counter b{color:var(--green);font-weight:600}

/* hero */
.hero{padding:54px 0 26px;border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 10px;font-size:clamp(26px,4.4vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:700}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p{margin:0;max-width:660px;color:var(--dim)}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.pill{border:1px solid var(--line);padding:5px 9px;color:var(--dim);background:#0a0b0c}
.pill--live{color:var(--green);border-color:#1d3325}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:26px 0}
.cam{display:block;border:1px solid var(--line);background:var(--panel);transition:.16s ease;position:relative}
.cam:hover{border-color:#2f3a3f;transform:translateY(-2px)}
.cam__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.cam__thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05)}
.cam__badge{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  padding:3px 6px;background:rgba(0,0,0,.72);border:1px solid #232a2d;color:var(--green)}
.cam__price{position:absolute;bottom:8px;right:8px;font-family:var(--mono);font-size:10px;padding:3px 6px;
  background:rgba(0,0,0,.75);border:1px solid #2a2622;color:var(--gold)}
.cam__meta{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;font-family:var(--mono);font-size:10.5px}
.cam__id{color:var(--txt)}
.cam__loc{color:var(--dim);font-size:9.5px;letter-spacing:.06em;margin-top:2px}

/* section */
.sec{padding:44px 0;border-top:1px solid var(--line)}
.sec h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.sec p.lead{margin:0 0 22px;color:var(--dim);max-width:620px}
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--panel);padding:18px}
.kv{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;padding:7px 0;border-bottom:1px dashed #1a1e20}
.kv:last-child{border-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;border:1px solid var(--acc);color:#fff;background:var(--acc);cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;border-color:#2b3236;color:var(--txt)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#0a0a0a}
.btn--block{width:100%}
label.f{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);margin:14px 0 6px}
input.f,select.f{width:100%;padding:11px 12px;background:#0a0b0c;border:1px solid #232a2d;color:var(--txt);
  font-family:var(--mono);font-size:12px;outline:none}
input.f:focus,select.f:focus{border-color:var(--acc)}
.foot{padding:30px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:#565e63}
.disc{font-size:10.5px;color:#6a7276;line-height:1.7}

/* player */
.player{position:relative;border:1px solid var(--line);background:#000;overflow:hidden}
.player video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;filter:contrast(1.06)}
.player__hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:10.5px;
  color:#dfe4e6;text-shadow:0 1px 2px #000}
.player__hud .tl{position:absolute;top:10px;left:12px}
.player__hud .tr{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;color:#ff5a4f}
.player__hud .bl{position:absolute;bottom:10px;left:12px}
.player__hud .br{position:absolute;bottom:10px;right:12px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pulse 1.4s infinite}
.gate{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(4,5,5,.82),rgba(4,5,5,.94));backdrop-filter:blur(3px)}
.gate.on{display:flex}
.gate__card{width:min(92%,420px);border:1px solid #2a2f32;background:#0b0d0e;padding:22px;text-align:center}
.gate__card h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.gate__card p{margin:0 0 16px;color:var(--dim);font-size:12.5px}
.price{display:flex;gap:10px;margin:14px 0}

/* filters */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 0 4px}
.filters .f{padding:9px 11px;font-size:11.5px}
.seg{display:flex;border:1px solid #232a2d}
.seg__b{background:transparent;border:0;border-right:1px solid #232a2d;color:var(--dim);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;padding:9px 12px;cursor:pointer}
.seg__b:last-child{border-right:0}
.seg__b.is-on{color:#0a0a0a;background:var(--gold)}
.seg__b:hover{color:var(--txt)}