:root{
 --bg:#080c1a;
 --card:#131b31;
 --border:#2c3650;
 --text:#f7f9ff;
 --muted:#aab5ce;
 --pink:#ec4899;
 --purple:#8b5cf6;
 --blue:#3b82f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 background:var(--bg);
 color:var(--text);
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
.header{
 display:flex;align-items:center;
 justify-content:space-between;
 padding:20px 6%;
 border-bottom:1px solid var(--border);
 background:#0d1324;
 gap:20px;
}
.logo{font-size:21px;font-weight:800;color:#fff}
.header nav{display:flex;gap:20px}
.header nav a{font-size:14px;color:#d0d8ed}
.hero{
 min-height:680px;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:65px 16px;
 background:
 radial-gradient(ellipse at 15% 15%,#56204f77,transparent 45%),
 radial-gradient(ellipse at 85% 75%,#263b8277,transparent 45%),
 #080c1a;
}
.hero-inner{width:100%;max-width:780px;text-align:center}
.pill{
 display:inline-block;
 border:1px solid #664078;
 color:#f0b9e2;
 padding:10px 18px;
 border-radius:40px;
 font-size:12px;
 letter-spacing:2px;
}
h1{
 font-size:clamp(35px,7vw,65px);
 line-height:1.12;
 margin:25px 0 16px;
}
h1 span{
 background:linear-gradient(90deg,#f472b6,#a78bfa);
 background-clip:text;
 -webkit-background-clip:text;
 color:transparent;
}
.hero p{color:var(--muted);line-height:1.7}
.download-box{
 margin:35px auto 0;
 background:#131b31ee;
 border:1px solid #39415b;
 border-radius:24px;
 padding:26px;
 text-align:left;
 box-shadow:0 25px 70px #0006;
}
.tabs{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-bottom:24px;
}
.tab{
 padding:15px;
 border-radius:12px;
 border:1px solid #39415b;
 color:#d4dbed;
 background:#202942;
 font-weight:bold;
}
.tab.active{
 border-color:#ec4899;
 background:linear-gradient(90deg,#ec4899,#8b5cf6);
 color:white;
}
label{display:block;margin:12px 0;color:#dce4f8}
.input-wrap{display:flex;gap:8px}
.input-wrap input{
 min-width:0;flex:1;
 padding:16px;
 border-radius:12px;
 background:#080e20;
 border:1px solid #39415b;
 color:white;
 outline:none;
}
.input-wrap input:focus{border-color:#a78bfa}
.input-wrap button{
 background:#29334f;
 color:white;
 border:0;
 border-radius:10px;
 padding:0 18px;
}
.check{
 display:flex;gap:10px;
 align-items:flex-start;
 font-size:13px;
 line-height:1.5;
 margin:20px 0;
}
.check input{margin-top:2px}
.primary{
 width:100%;
 border:0;
 border-radius:12px;
 padding:17px;
 color:white;
 font-weight:800;
 background:linear-gradient(90deg,#ec4899,#8b5cf6);
}
.primary:hover{filter:brightness(1.12)}
.primary:disabled{opacity:.6;cursor:wait}
#result{margin-top:20px}
.result-card{
 padding:18px;
 background:#0c1428;
 border:1px solid #34405d;
 border-radius:14px;
}
.result-card video{
 width:100%;
 max-height:350px;
 border-radius:12px;
 background:#000;
}
.result-card h3{overflow-wrap:anywhere}
.alert{
 padding:15px;
 background:#512532;
 border-radius:10px;
 color:#fff;
}
.error{color:#fda4af}
.success{color:#86efac}
.features{
 padding:65px 6%;
 max-width:1200px;
 margin:auto;
 text-align:center;
}
.features h2{font-size:32px}
.feature-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 margin-top:35px;
}
.feature{
 padding:28px;
 border:1px solid var(--border);
 border-radius:18px;
 background:var(--card);
}
.emoji{font-size:35px}
.feature p{color:var(--muted);line-height:1.6}
footer{
 text-align:center;
 border-top:1px solid var(--border);
 padding:25px;
 color:var(--muted);
 font-size:13px;
}
.admin-wrap{max-width:1100px;margin:30px auto;padding:15px}
.admin-card{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:25px;
 margin-bottom:20px;
}
.admin-card input,
.admin-card select,
.admin-card textarea{
 display:block;
 width:100%;
 padding:13px;
 border:1px solid #43506b;
 background:#0b1327;
 color:white;
 border-radius:9px;
 margin:8px 0 18px;
}
.admin-card textarea{min-height:90px}
.admin-card table{width:100%;border-collapse:collapse}
.admin-card th,.admin-card td{
 padding:12px;
 border-bottom:1px solid #35415a;
 text-align:left;
}
.table-scroll{overflow-x:auto}
.admin-links{display:flex;gap:12px;flex-wrap:wrap}
.admin-links a{
 padding:10px 15px;
 background:#29334f;
 border-radius:9px;
}
@media(max-width:650px){
 .header{padding:15px;flex-direction:column}
 .header nav{gap:12px;flex-wrap:wrap}
 .download-box{padding:16px}
 .input-wrap{flex-direction:column}
 .input-wrap button{padding:12px}
 .feature-grid{grid-template-columns:1fr}
 .hero{min-height:auto}
}