*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:#090b10;
  color:#f5f7fb;
}

button,input{
  font:inherit;
}

button{cursor:pointer}

header{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;
  border-bottom:1px solid #191d26;
}

.logo{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  font-size:22px;
  font-weight:800;
}

.logo-mark{
  width:30px;
  height:30px;
  border-radius:8px;
}

.logo-word{
  color:#fff;
}

.logo-word span{color:#7c5cff}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.connect{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  padding:10px 15px;
  border:1px solid #292e39;
  border-radius:11px;
}

.connect:hover{
  border-color:#7c5cff;
}

#menuBtn{
  background:none;
  border:0;
  color:#fff;
  font-size:24px;
}

nav{
  display:none;
  padding:15px 6%;
  background:#0d1017;
  border-bottom:1px solid #191d26;
}

nav.open{display:block}

nav a{
  color:#aaa;
  text-decoration:none;
  margin-right:20px;
}

nav a:hover{color:#fff}

main{
  width:min(calc(100% - 30px),1000px);
  margin:auto;
}

.hero{
  text-align:center;
  padding:75px 0 55px;
}

.badge,.eyebrow{
  color:#8c75ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
}

.hero h1{
  margin:14px 0;
  font-size:62px;
  line-height:1;
  letter-spacing:-4px;
}

.hero h1 span{color:#8c75ff}

.hero p{
  color:#9298a6;
  max-width:590px;
  margin:0 auto 27px;
  line-height:1.6;
}

.hero-connect{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  background:#7c5cff;
  padding:14px 21px;
  border-radius:13px;
  font-weight:800;
}

.hero-connect:hover{
  filter:brightness(1.1);
}

.hero-connect.connected{
  background:transparent;
  border:1px solid #2d8a61;
  color:#63d89b;
  cursor:pointer;
}

.hero-connect.connected:hover{
  background:#123022;
  filter:none;
}

.card,.scanner{
  background:#10131b;
  border:1px solid #1c202b;
  border-radius:22px;
}

.scanner{
  padding:28px;
}

.section-title{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:22px;
}

.folder-icon{
  width:50px;
  height:50px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#19152d;
  font-size:24px;
}

.section-title h2{
  margin:0 0 5px;
}

.section-title p{
  color:#858b99;
  margin:0;
}

.input-row{
  display:flex;
  gap:12px;
}

.input-row input{
  flex:1;
  min-width:0;
  min-height:64px;
  padding:0 20px;
  border-radius:15px;
  border:1px solid #282d39;
  background:#090b10;
  color:#fff;
  font-size:16px;
  outline:none;
}

.input-row input:focus{
  border-color:#7c5cff;
  box-shadow:0 0 0 3px #7c5cff18;
}

.primary{
  border:0;
  border-radius:15px;
  padding:0 24px;
  min-height:60px;
  background:#7c5cff;
  color:#fff;
  font-weight:800;
}

.primary:hover{
  filter:brightness(1.1);
}

.primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.hint{
  color:#666d7b;
  font-size:12px;
  margin-top:12px;
}

.support-card{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:20px;
  padding:13px 15px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(110deg,#211a3e,#181526);
  border:1px solid #493d79;
  border-radius:15px;
  transition:transform .15s,border-color .15s,background .15s;
}

.support-card:hover{
  transform:translateY(-2px);
  border-color:#9c8eff;
  background:linear-gradient(110deg,#2a2050,#1c1930);
}

.support-card img{
  width:46px;
  height:46px;
  flex:none;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #a99aff;
}

.support-card span{
  flex:1;
  min-width:0;
}

.support-card strong,
.support-card small{
  display:block;
}

.support-card strong{
  font-size:14px;
}

.support-card small{
  margin-top:3px;
  color:#b7afdc;
  font-size:12px;
}

.support-card b{
  font-size:24px;
}

.media-toggle{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}

.media-toggle-btn{
  flex:1;
  background:#0d1118;
  color:#dfe3ef;
  border:1px solid #2a303d;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
}

.media-toggle-btn.active{
  background:#7c5cff;
  border-color:#7c5cff;
  color:#fff;
}

.results{
  margin:55px 0;
}

.results-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:20px;
}

.results-head h2{
  margin:5px 0;
}

#folderStats{
  color:#777e8c;
  font-size:13px;
}

.buttons{
  display:flex;
  gap:8px;
}

.small,.secondary{
  border:1px solid #292e39;
  background:#12151d;
  color:#fff;
  border-radius:12px;
  padding:11px 15px;
}

.small:hover,.secondary:hover{
  border-color:#7c5cff;
}

.search{
  width:100%;
  height:50px;
  background:#0e1118;
  border:1px solid #202530;
  border-radius:13px;
  padding:0 15px;
  color:#fff;
  outline:0;
  margin-bottom:12px;
}

.search:focus{
  border-color:#7c5cff;
}

.video-card{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  margin:9px 0;
  background:#10131b;
  border:1px solid #1c2029;
  border-radius:16px;
  transition:.15s;
  flex-wrap:wrap;
}

.video-card:hover{
  border-color:#30275b;
}

.video-check{
  width:18px;
  height:18px;
  flex:none;
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-content:center;
  border:1px solid #4f466f;
  border-radius:5px;
  background:transparent;
  cursor:pointer;
}

.video-check::before{
  content:"";
  width:10px;
  height:10px;
  transform:scale(0);
  transition:transform .12s ease-in-out;
  clip-path:polygon(14% 44%,0 59%,38% 96%,100% 23%,86% 9%,38% 67%);
  background:#b4a8ff;
}

.video-check:checked{
  border-color:#8c75ff;
  background:transparent;
}

.video-check:checked::before{
  transform:scale(1);
}

.video-check:focus-visible{
  outline:2px solid #8c75ff;
  outline-offset:2px;
}

.preview-button{
  width:46px;
  height:46px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid #6654bd;
  border-radius:50%;
  background:linear-gradient(145deg,#30245f,#17152d);
  color:#fff;
  font-size:15px;
  padding-left:2px;
  box-shadow:0 5px 16px #0005;
  cursor:pointer;
}

.preview-button:hover{
  border-color:#a08cff;
  background:linear-gradient(145deg,#4d3d8d,#211b43);
}

.preview-button:focus-visible{
  outline:2px solid #b4a8ff;
  outline-offset:3px;
}

.video-info{
  flex:1;
  min-width:0;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.video-info h3{
  font-size:14px;
  margin:0 0 4px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  white-space:normal;
  color:#e0e0e0;
}

.video-info p,
.video-info small{
  display:block;
  color:#707785;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.video-info p{
  margin:0 0 3px;
}

.stream-saver-button{
  border:1px solid #292e39;
  background:#151821;
  color:#fff;
  border-radius:11px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.stream-saver-button:hover{
  border-color:#7c5cff;
  background:#1a1d28;
}

.download-button{
  width:42px;
  height:42px;
  flex:none;
  border:1px solid #292e39;
  background:#151821;
  color:#fff;
  border-radius:11px;
  font-size:18px;
}

.download-button:hover{
  border-color:#7c5cff;
  background:#1a1d28;
}

.download-bar{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(94%,650px);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#151821;
  border:1px solid #292e39;
  border-radius:17px;
  box-shadow:0 15px 50px #0008;
  z-index:10;
}

.download-bar span{
  display:block;
  color:#777e8b;
  font-size:11px;
  margin-top:3px;
}

.download-bar .primary{
  min-height:45px;
}

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:70px 0;
}

.about .card{
  padding:24px;
}

.about h3{
  margin-top:0;
}

.about p{
  color:#858b99;
  line-height:1.5;
}

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:#000b;
  z-index:20;
}

.modal-box{
  position:relative;
  width:min(100%,550px);
  max-height:90vh;
  overflow:auto;
  background:#10131b;
  border:1px solid #292e39;
  border-radius:22px;
  padding:25px;
  box-shadow:0 25px 80px #000b;
}

.modal-box h2{
  margin:8px 0;
}

.modal-box p{
  color:#858b99;
}

.modal-note{
  font-size:12px;
  line-height:1.5;
  margin:12px 0 0;
}

.close{
  position:absolute;
  right:15px;
  top:10px;
  background:none;
  border:0;
  color:#aaa;
  font-size:28px;
}

.close:hover{color:#fff}

.preview-box video{
  display:block;
  width:100%;
  max-height:55vh;
  background:#000;
  border-radius:14px;
  margin:15px 0;
}

.preview-image{
  display:block;
  width:100%;
  max-height:55vh;
  object-fit:contain;
  background:#000;
  border-radius:14px;
  margin:15px 0;
}

.full{
  width:100%;
  margin-top:10px;
}

.progress{
  height:9px;
  background:#202530;
  border-radius:10px;
  overflow:hidden;
  margin:20px 0;
}

#progressFill{
  width:0;
  height:100%;
  background:#7c5cff;
  transition:width .3s;
}

.success{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25203d;
  color:#a99aff;
  font-size:25px;
  margin-bottom:15px;
}

.success-box{text-align:left}

.hidden{
  display:none!important;
}

.quality-options{
  display:flex;
  gap:12px;
  margin-top:15px;
}

.quality-btn{
  flex:1;
  padding:15px;
  font-size:16px;
  font-weight:800;
}

.site-footer{
  padding:0 0 35px;
  text-align:center;
  color:#666d7b;
  font-size:12px;
}

.site-footer a{
  color:#9c8eff;
  text-decoration:none;
  margin:0 6px;
}

.site-footer a:hover{
  text-decoration:underline;
}

.legal-page{
  margin:55px auto;
  padding:32px;
  max-width:760px;
}

.legal-page h1{
  margin-top:35px;
}

.legal-page h2{
  margin-top:28px;
}

.legal-page p{
  color:#a7adba;
  line-height:1.7;
}

.legal-page a:not(.logo){
  color:#a99aff;
}

@media(max-width:700px){
  header{
    padding:0 16px;
  }

  main{
    width:calc(100% - 26px);
  }

  .hero{
    padding:55px 0 42px;
  }

  .hero h1{
    font-size:48px;
    letter-spacing:-3px;
  }

  .hero p{
    font-size:14px;
  }

  .scanner{
    padding:20px;
  }

  .input-row{
    flex-direction:column;
  }

  .input-row input{
    width:100%;
    min-height:68px;
  }

  .input-row .primary{
    width:100%;
    min-height:56px;
  }

  .results{
    margin-top:45px;
  }

  .results-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .buttons{
    width:100%;
  }

  .small{
    flex:1;
  }

  .about{
    grid-template-columns:1fr;
  }

  .video-card{
    gap:8px;
    padding:10px;
  }

  .video-check{
    width:17px;
    height:17px;
  }

  .preview-button{
    width:48px;
    height:42px;
  }

  .download-button{
    width:39px;
    height:39px;
  }

  .stream-saver-button{
    width:100%;
    order:10;
    margin-top:8px;
  }

  .video-info h3{
    font-size:13px;
  }

  .video-info p,
  .video-info small{
    font-size:10px;
  }

  .download-bar{
    bottom:9px;
    width:calc(100% - 16px);
    padding:10px;
    flex-wrap:wrap;
  }

  .download-bar .primary{
    min-height:44px;
    padding:0 12px;
    font-size:12px;
  }

  .modal{
    padding:10px;
  }

  .modal-box{
    width:100%;
    padding:22px 17px;
    border-radius:18px;
  }

  .preview-box video{
    max-height:45vh;
  }

  .quality-options{
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *{
    transition:none!important;
  }
}