:root{
  --bg:#070707;
  --panel:#101010;
  --line:#2a2a2a;
  --text:#e8e4d9;
  --muted:#a29d8f;
  --accent:#8f1d1d;
  --accent-2:#7f6a2a;
  --danger:#a53a3a;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:radial-gradient(circle at top, #111 0%, var(--bg) 35%, #040404 100%);color:var(--text);font-family:var(--sans);min-height:100%}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.015), rgba(255,255,255,0) 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
  opacity:.4;
  mix-blend-mode:screen;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

.app{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.phone{
  width:min(100%, 430px);
  min-height:calc(100dvh - 32px);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(6px);
}

.topbar{
  position:sticky; top:0;
  z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.92);
  backdrop-filter: blur(10px);
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand .title{font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; font-size:12px}
.brand .subtitle{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.rec{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--danger); box-shadow:0 0 12px rgba(165,58,58,.8); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

.content{padding:18px 16px 28px}
.hero{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:calc(100dvh - 170px);
  gap:18px;
}
.eyebrow{
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}
h1{
  margin:0;
  font-size:clamp(30px, 7vw, 42px);
  line-height:.95;
  letter-spacing:.02em;
}
h2{
  margin:0 0 10px;
  font-size:22px;
  line-height:1;
}
.lead{font-size:16px; line-height:1.5; color:#dad4c8; max-width:30ch}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
}
.panel::after{
  content:"";
  position:absolute; inset:auto -20% -80% -20%; height:100px;
  background:radial-gradient(circle, rgba(143,29,29,.12) 0%, rgba(143,29,29,0) 65%);
  pointer-events:none;
}
.row{display:flex; gap:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.space{justify-content:space-between}
.stack{display:flex; flex-direction:column; gap:12px}
.grid{display:grid; gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.tag{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-family:var(--mono);
  color:var(--muted);
}
.btn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:15px 16px;
  font-size:15px;
  font-weight:700;
  background:linear-gradient(180deg, #efe5d0, #d5c8ac);
  color:#111;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.btn.secondary{
  background:linear-gradient(180deg, #1e1e1e, #131313);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.danger{
  background:linear-gradient(180deg, #5a1818, #381010);
  color:#f2e4e4;
}
.btn:active{transform:translateY(1px)}
.footer-note{
  margin-top:6px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.check{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.015);
}
.check input{
  width:21px; height:21px; margin-top:2px; accent-color:#d5c8ac;
}
.check span{line-height:1.4}
.kpis{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.kpi{
  border:1px solid var(--line); border-radius:14px; padding:10px;
  background:rgba(255,255,255,.02)
}
.kpi .label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono)}
.kpi .value{margin-top:6px; font-size:15px; font-weight:700}

.feed{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg,#080808,#0f0f0f 50%, #090909);
  aspect-ratio:16/9;
}
.live-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.7;
  filter:contrast(1.1) brightness(0.75) saturate(0.7);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,100%{ opacity:0.7 }
  48%{ opacity:0.65 }
  50%{ opacity:0.4 }
  52%{ opacity:0.75 }
}

.feed .noise, .feed .vignette, .feed .scan, .feed .timecode, .feed .label, .feed .camid{
  position:absolute;
}
.feed .noise{
  inset:0;
  opacity:.18;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,.08) 0 1px, transparent 1px);
  background-size:9px 9px, 12px 12px, 11px 11px;
  animation:noiseMove .3s steps(2) infinite;
}
@keyframes noiseMove{from{transform:translate(0,0)}to{transform:translate(2px,-1px)}}
.feed .scan{
  inset:-20% 0 auto 0; height:36%;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
  animation:scan 5s linear infinite;
  mix-blend-mode:screen;
}
@keyframes scan{from{transform:translateY(-40%)}to{transform:translateY(300%)}}
.feed .vignette{
  inset:0;
  box-shadow:inset 0 0 100px rgba(0,0,0,.85), inset 0 -60px 100px rgba(90,20,20,.15);
}
.feed .timecode{
  left:10px; bottom:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:#d8d0be; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 8px;
}
.feed .label{
  top:10px; right:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#efdfdf; background:rgba(90,20,20,.4); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 9px;
}
.feed .camid{
  left:10px; top:10px;
  font-family:var(--mono); font-size:11px; color:#d8d0be;
  background:rgba(0,0,0,.35); border-radius:999px; padding:6px 9px; border:1px solid rgba(255,255,255,.08)
}
.feed .glitch{
  position:absolute; left:0; right:0; height:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.12), rgba(255,255,255,.0));
  opacity:.14;
  animation:glitch 3.2s linear infinite;
}
@keyframes glitch{0%{top:15%;opacity:.05}25%{top:31%;opacity:.13}40%{top:29%;opacity:.06}60%{top:59%;opacity:.1}100%{top:80%;opacity:.05}}

hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0}
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.015);
}
.list-item .name{font-weight:700}
.list-item .sub{color:var(--muted)}
.list-item.locked{opacity:.6}
.mono{font-family:var(--mono)}
.center{text-align:center}
.hidden{display:none !important}
.input{
  width:100%;
  padding:15px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#0d0d0d;
  color:var(--text);
  font-size:16px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--mono);
}
.input:focus{outline:none;border-color:#6a5a35;box-shadow:0 0 0 3px rgba(127,106,42,.16)}
.notice{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(127,106,42,.35);
  background:rgba(127,106,42,.08);
  color:#dbd0b4;
  font-size:14px;
}
.alert{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(165,58,58,.35);
  background:rgba(165,58,58,.09);
  color:#edd7d7;
  font-size:14px;
}
.progress{
  height:9px; background:#0c0c0c; border-radius:999px; overflow:hidden; border:1px solid var(--line)
}
.progress > span{
  display:block; height:100%; width:12%;
  background:linear-gradient(90deg, var(--accent), #c89f60);
}
.blink{animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:.35}}
.flash{
  animation:flashy 1.1s linear infinite;
}
@keyframes flashy{0%,100%{filter:brightness(1)}4%{filter:brightness(1.45)}8%{filter:brightness(.92)}}
.small{font-size:12px}
.center-hero{align-items:center;text-align:center}
.subbig{font-size:18px;color:#d9d3c5}
.spacer16{height:16px}

/* Modal */
#fileModal{
  background: rgba(0,0,0,0.82) !important;
  backdrop-filter: blur(6px);
}
#fileModal .panel{
  background: #0b0b0b !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
#fileModal pre{
  color: #f0eadc;
}
#modalTitle{
  color:#e6dcc7;
}
.modal-card{
  animation:modalIn .18s ease-out;
  position: relative;
  overflow: hidden;
}
@keyframes modalIn{
  from{opacity:0; transform:translateY(8px) scale(.985)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
#fileModal .modal-card::before,
#fileModal .modal-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
#fileModal .modal-card::before{
  background:
    linear-gradient(90deg, rgba(255,0,0,.06), transparent 24%, transparent 76%, rgba(0,180,255,.05)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  animation: modalGlitchA 2.2s infinite steps(2);
}
#fileModal .modal-card::after{
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 46%, transparent 54%, transparent 100%);
  animation: modalGlitchB 3s infinite linear;
}
@keyframes modalGlitchA{
  0%, 82%, 100% { opacity:0; transform:translate(0,0) }
  83% { opacity:.5; transform:translate(-2px, 0) }
  84% { opacity:.3; transform:translate(2px, 0) }
  85% { opacity:.18; transform:translate(-1px, 0) }
  86% { opacity:0; transform:translate(0,0) }
}
@keyframes modalGlitchB{
  0%, 78%, 100% { opacity:0; transform:translateY(-120%) }
  80% { opacity:.35; transform:translateY(-20%) }
  83% { opacity:.2; transform:translateY(10%) }
  86% { opacity:0; transform:translateY(120%) }
}
#fileModal.is-open #modalTitle,
#fileModal.is-open #modalBody{
  animation: modalTextFlicker .8s linear 1;
}
@keyframes modalTextFlicker{
  0% { opacity:0; transform:translateX(-2px) }
  20% { opacity:.7; transform:translateX(2px) }
  35% { opacity:.45; transform:translateX(-1px) }
  55% { opacity:1; transform:translateX(1px) }
  100% { opacity:1; transform:translateX(0) }
}

@media (min-width:431px){
  .phone{min-height:880px}
}