:root{--p:#6c5ce7;--pl:#a29bfe;--pd:#5b4cdb;--s:#00cec9;--ok:#00b894;--err:#d63031;--bg:#0a0a1a;--card:#12122a;--inp:#1e1e3f;--t1:#fff;--t2:#a0a0c0;--t3:#6c6c8a;--bd:#2a2a4a;--r:12px;--rl:20px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden}
.bg{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 50%,rgba(108,92,231,.08),transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,206,201,.06),transparent 50%);pointer-events:none;z-index:0}
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,26,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);height:60px;display:flex;align-items:center}
header .inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{color:var(--t1);text-decoration:none;font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.logo i{color:var(--p)}
nav{display:flex;gap:25px}
nav a{color:var(--t2);text-decoration:none;font-size:.9rem;transition:.3s}
nav a:hover,nav a.active{color:var(--pl)}
main{position:relative;z-index:1}
.hero{padding:130px 20px 60px;text-align:center;max-width:750px;margin:0 auto}
.hero h1{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;line-height:1.2;margin-bottom:15px}
.hero h1 span{background:linear-gradient(135deg,var(--p),var(--s));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero>p{color:var(--t2);margin-bottom:40px;font-size:1rem}
.form{max-width:680px;margin:0 auto}
.input-wrap{display:flex;align-items:center;background:var(--inp);border:2px solid var(--bd);border-radius:var(--rl);transition:.3s}
.input-wrap:focus-within{border-color:var(--p);box-shadow:0 0 0 3px rgba(108,92,231,.15)}
.input-wrap>i{padding:0 15px;color:var(--t3)}
.input-wrap input{flex:1;border:none;background:transparent;color:var(--t1);font-size:.95rem;padding:16px 0;outline:none}
.input-wrap input::placeholder{color:var(--t3)}
.btn-icon{background:none;border:none;color:var(--t3);padding:8px 12px;cursor:pointer;font-size:1rem}
#btnParse{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;border:none;padding:16px 30px;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;border-radius:0 var(--rl) var(--rl) 0;transition:.3s}
#btnParse:hover{filter:brightness(1.1)}
#btnParse:disabled{opacity:.5;cursor:not-allowed}
.tip{text-align:left;padding:8px 15px;font-size:.8rem;color:var(--t3)}
.loading{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--pl);margin-top:25px;font-size:.95rem}
.spinner{width:22px;height:22px;border:3px solid rgba(108,92,231,.2);border-top-color:var(--p);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.result{padding:10px 20px 60px;max-width:850px;margin:0 auto;animation:fi .4s ease}
@keyframes fi{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rl);padding:30px;position:relative}
.close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--t3);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.9rem;transition:.3s;display:flex;align-items:center;justify-content:center}
.close:hover{background:var(--err);color:#fff;border-color:var(--err)}
.author{display:flex;align-items:center;gap:15px;padding:20px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:20px;position:relative}
.author img{width:64px;height:64px;border-radius:50%;border:3px solid var(--p);object-fit:cover;flex-shrink:0}
.author .info{flex:1;min-width:0}
.author h3{font-size:1.15rem;margin-bottom:2px}
.author .aid{color:var(--t3);font-size:.85rem;margin-bottom:8px;display:flex;align-items:center;gap:4px}
.author .stats{display:flex;gap:20px;font-size:.9rem;color:var(--t2)}
.author .stats b{color:var(--t1);margin-left:4px}
.badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,var(--p),var(--s));color:#fff;padding:4px 12px;border-radius:15px;font-size:.75rem;font-weight:600}
.result h2{font-size:1.05rem;margin-bottom:20px;padding:0 5px;line-height:1.5}
.quality-box{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;justify-content:center}
.qbtn{padding:6px 16px;background:var(--inp);border:1px solid var(--bd);border-radius:20px;color:var(--t2);font-size:.82rem;cursor:pointer;transition:.2s;white-space:nowrap}
.qbtn:hover{border-color:var(--pl);color:var(--pl)}
.qbtn.active{background:var(--p);border-color:var(--p);color:#fff;font-weight:600}
.player{max-width:700px;margin:0 auto 20px;border-radius:var(--r);overflow:hidden;background:#000}
.player video{width:100%;display:block;max-height:450px}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.btn{display:flex;align-items:center;gap:7px;padding:11px 24px;border:none;border-radius:var(--r);font-size:.9rem;font-weight:600;cursor:pointer;transition:.3s;color:#fff}
.btn.green{background:linear-gradient(135deg,var(--ok),#00a383)}
.btn.green:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,184,148,.35)}
.btn.purple{background:linear-gradient(135deg,var(--p),var(--pd))}
.btn.purple:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(108,92,231,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.grid .gi{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--inp);border:1px solid var(--bd);transition:.3s}
.grid .gi:hover{transform:translateY(-2px);border-color:var(--p)}
.grid .gi img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.grid .gi:hover img{transform:scale(1.05)}
.grid .gi .idx{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600}
.grid .gi .dl{position:absolute;bottom:6px;right:6px;background:rgba(108,92,231,.9);color:#fff;width:28px;height:28px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer}
.grid .gi:hover .dl{display:flex}
.features{max-width:800px;margin:0 auto;padding:60px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:15px}
.f{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:25px 15px;text-align:center;transition:.3s}
.f:hover{transform:translateY(-3px);border-color:var(--p)}
.f i{font-size:1.5rem;color:var(--pl);margin-bottom:10px}
.f h3{font-size:.95rem;margin-bottom:5px}
.f p{color:var(--t3);font-size:.8rem}
.apidoc{max-width:800px;margin:0 auto;padding:40px 20px 60px}
.apidoc h2{text-align:center;font-size:1.5rem;margin-bottom:25px;background:linear-gradient(135deg,var(--pl),var(--s));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.apidoc h3{color:var(--pl);margin:18px 0 8px;font-size:.95rem}
.apidoc code{display:block;background:var(--inp);border:1px solid var(--bd);padding:10px 15px;border-radius:8px;color:var(--s);font-size:.85rem;margin:5px 0}
.apidoc pre{background:#0d0d20;border:1px solid var(--bd);border-radius:8px;padding:15px;overflow-x:auto;font-size:.8rem;line-height:1.6;color:var(--s);margin:5px 0}
footer{text-align:center;padding:25px;color:var(--t3);font-size:.8rem;border-top:1px solid var(--bd);position:relative;z-index:1}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.92);z-index:10000;display:flex;align-items:center;justify-content:center}
.overlay img{max-width:90%;max-height:85vh;object-fit:contain;border-radius:8px}
.ov-close{position:absolute;top:15px;right:15px;background:rgba(255,255,255,.1);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.ov-close:hover{background:var(--err)}
.ov-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem}
.ov-nav:hover{background:rgba(108,92,231,.5)}
.ov-prev{left:15px}
.ov-next{right:15px}
.ov-counter{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card);border:1px solid var(--bd);color:var(--t1);padding:12px 24px;border-radius:var(--r);font-size:.9rem;z-index:10001;opacity:0;transition:.4s;display:flex;align-items:center;gap:8px}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{border-color:var(--ok)}.toast.ok i{color:var(--ok)}
.toast.er{border-color:var(--err)}.toast.er i{color:var(--err)}
@media(max-width:640px){
.quality-box{gap:5px;margin-bottom:10px}
.qbtn{padding:5px 12px;font-size:.78rem}
header nav a:not(:last-child){display:none}
.hero h1{font-size:1.6rem}
.input-wrap{flex-direction:column;border-radius:var(--r)}
.input-wrap>i{display:none}
.input-wrap input{width:100%;padding:14px 15px}
#btnParse{width:100%;justify-content:center;border-radius:0 0 var(--r) var(--r)}
.author{flex-direction:column;text-align:center;padding:15px}
.author .stats{justify-content:center}
.badge{position:static;margin-top:8px}
.grid{grid-template-columns:repeat(2,1fr);gap:8px}
.btn{padding:10px 18px;font-size:.85rem}
}