@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

.ytdlp-wrap{--bg:#f4f6fb;--sur:#fff;--sur2:#f8f9fc;--bor:#e3e7f0;--borh:#c5ccd8;--tx:#0c0e14;--tx2:#556;--tx3:#99a;--red:#e52d27;--redd:#b71c19;--redl:#fff0ef;--grn:#16a34a;--blu:#1d4ed8;--blul:#eff6ff;--r:10px;--rl:16px;--sh:0 2px 12px rgba(0,0,0,.07);--f:'Inter',system-ui,sans-serif;--ease:cubic-bezier(.4,0,.2,1);font-family:var(--f);background:var(--bg);color:var(--tx);max-width:800px;margin:2rem auto;padding:1.75rem 1.5rem 2rem;border-radius:var(--rl);box-sizing:border-box}
.ytdlp-dark{--bg:#0a0c10;--sur:#111318;--sur2:#16181f;--bor:#272a35;--borh:#3e4356;--tx:#eceef4;--tx2:#8b91a8;--tx3:#5a607a;--redl:#2a1110;--blul:#0f1d3a}
.ytdlp-wrap *,.ytdlp-wrap *::before,.ytdlp-wrap *::after{box-sizing:inherit}

/* Header */
.ytdlp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.ytdlp-brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1rem;letter-spacing:-.02em}
.ytdlp-badge-pill{background:var(--sur2);border:1px solid var(--bor);border-radius:99px;font-size:.65rem;font-weight:600;color:var(--tx2);padding:.18rem .55rem;letter-spacing:.01em}
.ytdlp-theme-btn{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);color:var(--tx2);cursor:pointer;padding:.48rem .52rem;line-height:0;transition:all .15s}
.ytdlp-theme-btn:hover{border-color:var(--borh);color:var(--tx)}
.ytdlp-light .moon,.ytdlp-dark .sun{display:none}

/* Search */
.ytdlp-search-box{display:flex;align-items:center;gap:.6rem;background:var(--sur);border:1.5px solid var(--bor);border-radius:var(--rl);padding:.9rem 1rem;box-shadow:var(--sh);transition:border-color .15s}
.ytdlp-search-box:focus-within{border-color:var(--red)}
.ytdlp-link-icon{color:var(--tx3);flex-shrink:0}
.ytdlp-input{flex:1;border:none;outline:none;background:transparent;font-family:monospace;font-size:.875rem;color:var(--tx);min-width:0}
.ytdlp-input::placeholder{color:var(--tx3)}
.ytdlp-hint{color:var(--tx3);font-size:.73rem;margin:.45rem 0 0 1rem}

/* Buttons */
.ytdlp-btn{display:inline-flex;align-items:center;gap:.35rem;border:none;border-radius:var(--r);cursor:pointer;font-family:var(--f);font-size:.82rem;font-weight:600;padding:.58rem 1rem;line-height:1;transition:all .15s var(--ease);text-decoration:none;white-space:nowrap}
.ytdlp-btn:active{transform:translateY(1px)}
.ytdlp-btn-red{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(229,45,39,.35);min-width:130px;justify-content:center}
.ytdlp-btn-red:hover{background:var(--redd)}
.ytdlp-btn-red:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ytdlp-btn-ghost{background:transparent;border:1px solid var(--bor);color:var(--tx2)}
.ytdlp-btn-ghost:hover{border-color:var(--borh);color:var(--tx)}
.ytdlp-btn-dl{background:var(--grn);color:#fff;font-size:.78rem;padding:.46rem .85rem}
.ytdlp-btn-dl:hover{filter:brightness(1.1)}
.ytdlp-btn-dl.busy{opacity:.7;cursor:wait;transform:none}

/* Spinner */
.btn-spin{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ytdlp-spin .65s linear infinite}
.ytdlp-btn-red.loading .btn-text{display:none}
.ytdlp-btn-red.loading .btn-spin{display:inline-block}

/* Error */
.ytdlp-error{background:#fee2e2;border:1px solid #fca5a5;border-radius:var(--r);color:#991b1b;font-size:.875rem;padding:.85rem 1rem;margin:.85rem 0;animation:ytdlp-in .25s ease}
.ytdlp-dark .ytdlp-error{background:#2d1212;border-color:#7f1d1d;color:#fca5a5}

/* Skeleton */
.ytdlp-skeleton{display:flex;gap:1.1rem;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:1.25rem;margin:.85rem 0}
.sk-thumb{width:148px;height:83px;border-radius:var(--r);flex-shrink:0;background:linear-gradient(90deg,var(--bor) 25%,var(--bg) 50%,var(--bor) 75%);background-size:300% 100%;animation:ytdlp-sh 1.5s infinite}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:.65rem;justify-content:center}
.sk-line{height:13px;border-radius:4px;background:linear-gradient(90deg,var(--bor) 25%,var(--bg) 50%,var(--bor) 75%);background-size:300% 100%;animation:ytdlp-sh 1.5s infinite}
.sk-line.w80{width:80%}.sk-line.w55{width:55%;animation-delay:.1s}.sk-line.w35{width:35%;animation-delay:.2s}

/* Result */
.ytdlp-result{background:var(--sur);border:1px solid var(--bor);border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh);margin-top:.85rem;animation:ytdlp-in .3s ease}
.ytdlp-meta{display:flex;gap:1.1rem;padding:1.25rem;border-bottom:1px solid var(--bor)}
.ytdlp-thumb-wrap{position:relative;width:180px;height:101px;flex-shrink:0;border-radius:var(--r);overflow:hidden;background:var(--bor)}
.ytdlp-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ytdlp-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.ytdlp-thumb-wrap:hover .ytdlp-play-btn{opacity:1}
.ytdlp-info{flex:1;min-width:0}
.ytdlp-title{font-size:1rem;font-weight:700;margin:0 0 .3rem;line-height:1.4;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ytdlp-meta-line{font-size:.78rem;color:var(--tx2);margin:0 0 .85rem}
.ytdlp-actions{display:flex;flex-wrap:wrap;gap:.45rem}

/* Tabs */
.ytdlp-tabs{display:flex;border-bottom:1px solid var(--bor);padding:0 1.25rem}
.ytdlp-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--tx2);cursor:pointer;font-family:var(--f);font-size:.85rem;font-weight:600;padding:.8rem .9rem;transition:all .15s;margin-bottom:-1px}
.ytdlp-tab:hover{color:var(--tx)}
.ytdlp-tab.active{color:var(--red);border-color:var(--red)}

/* Format rows */
.ytdlp-panel{padding:1rem 1.25rem}
.ytdlp-list{display:flex;flex-direction:column;gap:.5rem}
.ytdlp-row{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border:1px solid var(--bor);border-radius:var(--r);transition:background .15s,border-color .15s;animation:ytdlp-in .25s ease both}
.ytdlp-row:hover{background:var(--sur2);border-color:var(--borh)}
.ytdlp-qbadge{background:var(--redl);color:var(--red);border-radius:5px;font-size:.72rem;font-weight:700;padding:.22rem .55rem;min-width:60px;text-align:center;flex-shrink:0}
.ytdlp-qbadge.audio{background:var(--blul);color:var(--blu)}
.ytdlp-ext{font-size:.75rem;font-weight:700;color:var(--tx2);text-transform:uppercase;min-width:38px}
.ytdlp-sz{font-size:.75rem;color:var(--tx3);flex:1;font-family:monospace}
.ytdlp-empty{color:var(--tx3);font-size:.875rem;text-align:center;padding:1rem 0}

/* Progress */
.ytdlp-progress{height:3px;background:var(--bor);border-radius:2px;overflow:hidden;margin-top:.85rem}
.ytdlp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff7b7b);transition:width .35s var(--ease)}

.ytdlp-legal{font-size:.72rem;color:var(--tx3);text-align:center;margin-top:1rem}

@keyframes ytdlp-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ytdlp-spin{to{transform:rotate(360deg)}}
@keyframes ytdlp-sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media(max-width:580px){
	.ytdlp-wrap{padding:1.25rem .75rem 1.5rem}
	.ytdlp-search-box{flex-wrap:wrap}
	.ytdlp-btn-red{width:100%;margin-top:.5rem}
	.ytdlp-meta{flex-direction:column}
	.ytdlp-thumb-wrap{width:100%;height:0;padding-bottom:56.25%;position:relative}
	.ytdlp-thumb-wrap img{position:absolute;inset:0}
	.ytdlp-title{white-space:normal}
	.ytdlp-badge-pill{display:none}
}