/* WEB PANEL PROXY public CSS */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:#050505;color:#c8ffd0;font-family:'Courier New',monospace;overflow:hidden}

/* ── сканлайны ── */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px)}

/* ── шум ── */
.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;animation:noiseShift .1s steps(3) infinite}
@keyframes noiseShift{to{background-position:200px 200px}}

/* ── vignette ── */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:98;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7) 100%)}

/* ── кадр камеры ── */
.camera-frame{position:relative;z-index:1;display:flex;flex-direction:column;
  min-height:100vh;padding:16px;
  background:linear-gradient(180deg,#080c08 0%,#0a0f0a 100%)}

/* ── хедер камеры ── */
.cam-header{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border:1px solid #1a3a1a;border-radius:4px;
  background:#0a120a;margin-bottom:12px;flex-shrink:0;flex-wrap:wrap;gap:8px}
.cam-id{font-size:13px;letter-spacing:2px;color:#5aff6a;text-shadow:0 0 8px #5aff6a44}
.cam-id span{color:#3a8a3a}
.cam-meta{display:flex;align-items:center;gap:16px;font-size:11px;color:#3a7a3a;flex-wrap:wrap}
.rec{display:flex;align-items:center;gap:6px;color:#ff3a3a;font-weight:700;font-size:12px;letter-spacing:1px}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3a3a;animation:blink 1s steps(1) infinite;box-shadow:0 0 6px #ff3a3a88}
@keyframes blink{50%{opacity:0}}

/* ── основной вид ── */
.cam-view{flex:1;display:flex;align-items:center;justify-content:center;
  border:1px solid #1a3a1a;border-radius:4px;position:relative;overflow:hidden;
  background:#060a06;min-height:0}

/* ── уголковые скобки ── */
.cam-view::before,.cam-view::after,
.br-bl,.br-tr{position:absolute;width:28px;height:28px;pointer-events:none;z-index:5}
.cam-view::before{content:'';top:8px;left:8px;border-top:2px solid #5aff6a;border-left:2px solid #5aff6a}
.cam-view::after{content:'';bottom:8px;right:8px;border-bottom:2px solid #5aff6a;border-right:2px solid #5aff6a}
.br-bl{top:8px;right:8px;border-top:2px solid #5aff6a44;border-right:2px solid #5aff6a44}
.br-tr{bottom:8px;left:8px;border-bottom:2px solid #5aff6a44;border-left:2px solid #5aff6a44}

/* ── контент ── */
.content{position:relative;z-index:2;width:min(640px,100%);padding:32px 28px;text-align:center}

.cats{display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.cat{font-size:3.6rem;cursor:pointer;user-select:none;position:relative;
  filter:grayscale(.6) brightness(1.2) drop-shadow(0 0 8px #5aff6a22);
  animation:catIdle 2.5s ease-in-out infinite;transition:filter .3s}
.cat:nth-child(2){font-size:4rem;animation-delay:.4s}
.cat:nth-child(3){animation-delay:.8s}
.cat:nth-child(4){font-size:3.8rem;animation-delay:1.2s}
.cat:hover{filter:grayscale(0) brightness(1.4) drop-shadow(0 0 16px #5aff6a55)}
.cat::after{content:'DETECTED';position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:2px;color:#5aff6a88;white-space:nowrap;opacity:0;transition:opacity .3s}
.cat:hover::after{opacity:1}

@keyframes catIdle{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-4px) rotate(-3deg)}70%{transform:translateY(2px) rotate(2deg)}}

.title{font-size:clamp(22px,5vw,30px);font-weight:700;letter-spacing:3px;margin-bottom:6px;
  color:#c8ffd0;text-shadow:0 0 20px #5aff6a33;text-transform:uppercase}
.title span{color:#5aff6a}
.subtitle{font-size:13px;color:#3a7a3a;margin-bottom:24px;line-height:1.6}

/* ── прогресс ── */
.track{height:6px;overflow:hidden;border-radius:2px;background:#1a3a1a;border:1px solid #1a3a1a}
.bar{width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#2a6a2a,#5aff6a,#2a6a6a);
  box-shadow:0 0 12px #5aff6a44;transition:width .08s linear}
.progress-text{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#3a7a3a;letter-spacing:1px}
.sync-label{color:#5aff6a88}

/* ── статус ── */
.status{min-height:60px;margin:20px 0;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  border:1px solid #1a3a1a;border-radius:2px;background:#0a120a88;position:relative}
.status::before{content:'SYS_LOG';position:absolute;top:-8px;left:12px;
  background:#0a0f0a;padding:0 6px;font-size:9px;letter-spacing:2px;color:#3a5a3a}
.status-emoji{font-size:1.6rem;filter:grayscale(.4) brightness(1.1);animation:pop 1.2s ease-in-out infinite}
.message{font-size:13px;color:#7ac87a;line-height:1.5}
.message span{color:#5aff6a}
@keyframes pop{50%{transform:scale(1.15)}}

/* ── кнопка ── */
.fun{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 32px;border:1px solid #5aff6a44;border-radius:2px;
  color:#0a0a0a;background:#5aff6a;
  font:700 13px/1 'Courier New',monospace;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.fun:hover{background:#7aff8a;box-shadow:0 0 24px #5aff6a44;transform:scale(1.03)}
.fun:active{transform:scale(.97)}
.fun::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);transition:transform .4s}
.fun:hover::after{transform:translateX(100%)}

.counter{margin-top:18px;font-size:12px;color:#3a6a3a;letter-spacing:1px}
.counter b{color:#5aff6a;font-size:14px}

/* ── футер камеры ── */
.cam-footer{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border:1px solid #1a3a1a;border-radius:4px;
  background:#0a120a;margin-top:12px;flex-shrink:0;flex-wrap:wrap;gap:6px;font-size:10px;color:#2a5a2a;letter-spacing:1px}
.cam-footer .live{color:#5aff6a;animation:blink 1.5s steps(1) infinite}
.signal-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.signal-bars span{display:block;width:3px;background:#3a6a3a;border-radius:1px}
.signal-bars span:nth-child(1){height:4px}
.signal-bars span:nth-child(2){height:7px}
.signal-bars span:nth-child(3){height:10px}
.signal-bars span:nth-child(4){height:12px;background:#5aff6a}

/* ── глюк ── */
.glitch{animation:glitch .15s steps(2) 1}
@keyframes glitch{
  0%{transform:translate(0);filter:hue-rotate(0deg)}
  25%{transform:translate(-3px,1px);filter:hue-rotate(90deg)}
  50%{transform:translate(2px,-1px);filter:hue-rotate(180deg)}
  75%{transform:translate(-1px,2px);filter:hue-rotate(270deg)}
  100%{transform:translate(0);filter:hue-rotate(0deg)}
}

/* ── мерцающая полоса ── */
.scan-bar{position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(180deg,transparent,#5aff6a11,transparent);
  z-index:3;animation:scanMove 4s linear infinite;pointer-events:none}
@keyframes scanMove{0%{top:-3px}100%{top:100%}}

/* ── адаптив ── */
@media(max-width:600px){
  .camera-frame{padding:8px}
  .content{padding:24px 16px}
  .cat,.cat:nth-child(2),.cat:nth-child(4){font-size:2.6rem}
  .cam-header,.cam-footer{font-size:9px;padding:6px 8px}
  .fun{width:100%}
  .br-bl,.br-tr{display:none}
}
@media(max-width:400px){
  .cat,.cat:nth-child(2),.cat:nth-child(4){font-size:2.2rem}
  .content{padding:20px 10px}
  .cam-meta{gap:8px}
}