:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#101828;background:#f7f8fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{background:#f7f8fb;min-height:100%}body{color:#101828;background:#f7f8fb;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%}#root{min-height:100vh}.app-shell{background:#f7f8fb;flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f7f8fbeb;border-bottom:1px solid #e6eaf0;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;display:flex;position:sticky;top:0}.brand-header{flex-shrink:0;align-items:center;gap:12px;display:flex}.brand-logo{object-fit:contain;border-radius:8px;flex-shrink:0;width:40px;height:40px}.brand-title{color:#172033;letter-spacing:-.01em;white-space:nowrap;margin:0;font-size:.98rem;font-weight:700}.brand-tagline{color:#667085;white-space:nowrap;flex-shrink:0;margin:0;font-size:.82rem}.logo-spinner{object-fit:contain;border-radius:4px;width:16px;height:16px;animation:.8s linear infinite spin-rotate}@keyframes spin-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=576px){.topbar{gap:10px;padding:14px 16px}.brand-logo{width:36px;height:36px}.brand-title{font-size:.85rem}.brand-tagline{font-size:.75rem}}.page-main{flex-direction:column;flex:1;justify-content:center;gap:28px;width:min(100%,1120px);margin:0 auto;padding:44px 20px 36px;display:flex}.hero-section{text-align:center;max-width:760px;margin:0 auto}.hero-section h1{color:#101828;letter-spacing:-.05em;margin:0;font-size:clamp(2rem,4vw,3.35rem);font-weight:700;line-height:1.08}.hero-section p{color:#667085;margin:14px 0 0;font-size:1.02rem}.downloader-shell{justify-content:center;width:100%;display:flex}.downloader-card{background:#fff;border:1px solid #e5eaf2;border-radius:24px;width:min(100%,920px);padding:24px;box-shadow:0 20px 50px #10182814}.input-label{color:#344054;margin-bottom:10px;font-size:.92rem;font-weight:600;display:inline-block}.input-row{grid-template-columns:1fr auto;gap:12px;display:grid}.url-input{color:#101828;background:#fff;border:1px solid #d4dbe7;border-radius:14px;width:100%;min-width:0;height:52px;padding:0 16px;transition:border-color .18s,box-shadow .18s}.url-input::placeholder{color:#98a2b3}.url-input:focus{border-color:#98b5ff;outline:none;box-shadow:0 0 0 4px #648dff1f}.btn{cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;height:52px;padding:0 18px;font-weight:600;transition:transform .16s,box-shadow .18s,background-color .18s,opacity .18s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-primary{color:#fff;background:#1769ff;min-width:144px;box-shadow:0 14px 26px #1769ff2e}.btn-primary:hover{background:#165fe0}.btn-secondary{color:#fff;background:#101828;width:100%}.btn-secondary:hover{background:#0a1220}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:999px;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.status-banner{border:1px solid #0000;border-radius:14px;margin-top:14px;padding:12px 14px;font-size:.92rem}.status-banner--success{color:#067647;background:#ecfdf3;border-color:#abefc6}.status-banner--warning{color:#b54708;background:#fffaeb;border-color:#fedf89}.status-banner--error{color:#b42318;background:#fef3f2;border-color:#fecdca}.result-area{flex-direction:column;gap:18px;margin-top:20px;display:flex}.video-info-card{background:#fbfcfe;border:1px solid #e5eaf2;border-radius:20px;grid-template-columns:230px 1fr;gap:18px;padding:16px;display:grid}.video-thumb-wrap{min-height:140px}.video-thumb{object-fit:cover;background:#f2f4f7;border:1px solid #e5eaf2;border-radius:16px;width:100%;height:100%;display:block}.video-thumb--placeholder{color:#667085;place-items:center;font-weight:600;display:grid}.video-meta{flex-direction:column;justify-content:center;min-width:0;display:flex}.video-title{color:#101828;margin:0;font-size:1.15rem;line-height:1.35}.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;display:grid}.meta-item{color:#344054;background:#fff;border:1px solid #eaecf0;border-radius:14px;align-items:center;gap:8px;min-width:0;padding:12px;display:flex}.meta-item svg{color:#1769ff;flex-shrink:0}.meta-item span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.meta-item--full{grid-column:1/-1;justify-content:space-between}.meta-item--full strong{color:#101828}.formats-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.formats-head h3{color:#101828;margin:0;font-size:1rem}.formats-head span{color:#667085;font-size:.88rem}.formats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.format-card{background:#fff;border:1px solid #e5eaf2;border-radius:18px;flex-direction:column;gap:14px;padding:16px;display:flex;box-shadow:0 10px 24px #1018280d}.format-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.format-main div{min-width:0}.format-label{color:#667085;margin-bottom:4px;font-size:.78rem;display:block}.format-main strong{color:#101828;word-break:break-word;font-size:.92rem}.empty-state{color:#667085;text-align:center;margin:0;padding:14px 0 4px;font-size:.94rem}.footer{text-align:center;color:#667085;padding:12px 20px 20px;font-size:.92rem}@media (width<=860px){.video-info-card{grid-template-columns:1fr}.video-thumb-wrap{max-width:340px}}@media (width<=640px){.topbar{align-items:flex-start;padding:14px 16px}.page-main{justify-content:center;gap:20px;padding:24px 14px 18px}.hero-section h1{font-size:clamp(1.7rem,9vw,2.3rem)}.hero-section p{font-size:.96rem}.downloader-card{border-radius:20px;padding:16px}.input-row{grid-template-columns:1fr}.btn-primary,.btn-secondary{width:100%}.meta-grid{grid-template-columns:1fr}.meta-item--full{flex-wrap:wrap;grid-column:auto}.formats-head{flex-direction:column;align-items:flex-start}.format-main{grid-template-columns:1fr}.footer{padding:12px 16px 18px}}
