/* БАЗА */
:root {
  --bg1:#1a1a2e; --bg2:#0f0f1f; --brand:#00ffcc; --brand2:#007a66; --text:#fff;
  --muted:#6b7280; --card:#0f1524; --card2:#11182c; --border:#1f2a44;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(circle at center,var(--bg1),var(--bg2));
  font-family:'Orbitron',sans-serif; color:var(--text); overflow:hidden; position:relative;
}
footer{position:absolute; bottom:10px; font-size:.8em; color:#777}

/* ПРАВАЯ ПОДЛОЖКА */
.right-bg{position:absolute; top:0; right:0; height:100%; width:auto; z-index:-2; object-fit:cover}
@media (max-width: 768px){
  .right-bg{left:0; width:100%}
}

/* ДЕКОР */
.neural-bg{position:absolute; inset:0; z-index:-3; background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Neural_network_animation.gif/800px-Neural_network_animation.gif') center/cover no-repeat; opacity:.05}
.scythe{position:absolute; width:80px; height:80px; background:url('https://img.freepik.com/free-icon/scythe_318-6626782.jpg') center/contain no-repeat; animation:harvest 6s linear infinite; opacity:.9; z-index:2}
@keyframes harvest{0%{left:-100px;top:30%;transform:rotate(-20deg)}50%{left:50%;top:50%;transform:rotate(10deg)}100%{left:110%;top:70%;transform:rotate(30deg)}}
.pixels{position:absolute; inset:0; pointer-events:none; z-index:1}
.pixel{position:absolute; width:4px; height:4px; background:radial-gradient(circle,var(--brand),var(--brand2)); border-radius:50%; opacity:.9; animation:spark 1s ease-out forwards}
@keyframes spark{0%{transform:scale(1) translate(0,0);opacity:1}100%{transform:scale(.3) translate(var(--x),var(--y));opacity:0}}

/* Рабочая область: ограничена справа перед видео (правый фон ~33–34vw) */
.content-wrapper{
  position:absolute;
  top:32vh;
  left:0;
  right:34vw;             /* <— ключ: ничего не вылезет в блок с видео */
  padding-left:8vw;
  padding-right:4vw;      /* небольшой внутренний отступ справа */
  z-index:10;
}

/* Контейнер тянется на всю ширину рабочей области */
.container{
  width:100%;
  max-width:1200px;       /* страховка, чтобы не раздувалось на очень широких */
  margin:0;
  padding:0;
}

.hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;               /* нормальный зазор между колонками */
}

/* Пропорции колонок внутри РАБОЧЕЙ области */
.hero-left{  flex:1 1 52%; min-width:360px; }
.hero-right{ flex:1 1 48%; max-width:560px; }

h1{ margin:0; }
.uploader-card{ width:100%; max-width:560px; margin-top:0; }

/* Мобильная адаптация: когда видео перекрывает всё — уходим в столбик */
@media (max-width: 980px){
  .content-wrapper{ right:0; top:40vh; padding-left:6vw; padding-right:6vw; }
  .hero{ flex-direction:column; gap:18px; }
  .hero-right, .uploader-card{ max-width:min(560px, 92vw); }
}


h1{font-size:3em; letter-spacing:.1em; white-space:nowrap; overflow:hidden; border-right:2px solid var(--brand); transition:opacity .5s ease-in-out}
.typing{animation:typing 2s steps(8), blink .75s step-end infinite; opacity:1}
.fade-out{opacity:0}
@keyframes typing{from{width:0} to{width:8ch}}
@keyframes blink{50%{border-color:transparent}}
.subtitle{margin-top:10px; font-size:1.2em; color:var(--brand)}

.loader-block{margin-top:18px}
.progress{font-size:1em; background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 10px var(--brand)} to{text-shadow:0 0 20px var(--brand),0 0 30px var(--brand2)}}
.progress-bar{width:300px; height:8px; background:#333; border-radius:10px; margin-top:10px; overflow:hidden}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand2)); animation:fillBar 20s linear forwards}
@keyframes fillBar{from{width:0%} to{width:100%}}

/* Uploader */
.uploader-card{
  margin-top:28px; width:min(520px,90vw); background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border); border-radius:16px; padding:18px 18px; box-shadow:0 8px 24px rgba(0,0,0,.35); backdrop-filter:blur(3px)
}
.uploader-title{font-size:16px; letter-spacing:.02em; margin-bottom:10px; color:#9fe}
.dropzone{
  border:1px dashed #2a3b5f; border-radius:14px; padding:22px; text-align:center; cursor:pointer;
  background:rgba(15,22,35,.55); transition:all .18s ease-in-out; outline:none
}
.dropzone:hover,.dropzone.dz-hover{border-color:var(--brand); box-shadow:0 0 0 2px rgba(0,255,204,.15) inset}
.dz-ico{font-size:30px; opacity:.9}
.dz-title{margin-top:6px; font-size:16px}
.dz-sub{margin-top:2px; color:#bcd}
.dz-sub .dz-link{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
.dz-accept{margin-top:8px; color:#8aa}

.actions{display:flex; align-items:center; gap:12px; margin-top:14px}
.btn-primary{
  border:0; border-radius:12px; padding:10px 16px; background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#061a18;
  font-weight:600; cursor:pointer; transition:transform .08s ease; box-shadow:0 6px 16px rgba(0,255,204,.25)
}
.btn-primary:disabled{opacity:.6; cursor:not-allowed}
.btn-primary:active{transform:translateY(1px)}
.hint{font-size:12px; color:#9ab}

.status{margin-top:10px; font-size:13px; color:#bcd}
.status.ok{color:#9fffcc}
.status.error{color:#ff9f9f}
.status.info{color:#9ab}

/* Particles */
#particles-js{position:absolute; inset:0; z-index:-4}

.options{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:12px;
}
.chk{ display:flex; align-items:center; gap:8px; font-size:13px; color:#cfe8e2; }
.chk input{ transform: translateY(1px); }

.orient{ display:flex; align-items:center; gap:8px; }
.btn-toggle{
  border:1px solid var(--border); background:#0d1426; color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn-toggle.active{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,255,204,.12) inset;
}