/* ── YT Downloader Pro – Frontend Styles ───────────────────── */
:root{
    --ytdl-red:#FF0000;
    --ytdl-red-dark:#cc0000;
    --ytdl-bg:#0f0f0f;
    --ytdl-card:#1a1a1a;
    --ytdl-border:#2a2a2a;
    --ytdl-text:#f1f1f1;
    --ytdl-muted:#aaa;
    --ytdl-green:#00c853;
    --ytdl-radius:12px;
}

.ytdl-wrap{
    font-family:'Segoe UI',Arial,sans-serif;
    max-width:780px;
    margin:0 auto;
    color:var(--ytdl-text);
}

/* ── Search Bar ────────────────────────────── */
.ytdl-search-bar{
    background:var(--ytdl-card);
    border:1px solid var(--ytdl-border);
    border-radius:var(--ytdl-radius);
    padding:24px;
    margin-bottom:20px;
}
.ytdl-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:18px;
    color:#fff;
}
.ytdl-input-row{
    display:flex;
    gap:10px;
}
.ytdl-input-row input{
    flex:1;
    padding:12px 16px;
    border-radius:8px;
    border:1px solid var(--ytdl-border);
    background:#111;
    color:#fff;
    font-size:1rem;
    outline:none;
    transition:border .2s;
}
.ytdl-input-row input:focus{
    border-color:var(--ytdl-red);
}
.ytdl-input-row button{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    background:var(--ytdl-red);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:background .2s,transform .1s;
    white-space:nowrap;
}
.ytdl-input-row button:hover{background:var(--ytdl-red-dark);}
.ytdl-input-row button:active{transform:scale(.97);}

/* ── Status ─────────────────────────────────── */
#ytdl-status{
    padding:12px 18px;
    border-radius:8px;
    margin-bottom:14px;
    font-size:.95rem;
}
#ytdl-status.ytdl-error{background:#3b1515;border:1px solid #7f1717;color:#ff8080;}
#ytdl-status.ytdl-info{background:#1a2a1a;border:1px solid #2d6a2d;color:#7ddf7d;}
#ytdl-status.ytdl-loading{background:#1a1a2a;border:1px solid #2a2a7f;color:#8080ff;}

/* ── Info Card ───────────────────────────────── */
#ytdl-info-card{
    background:var(--ytdl-card);
    border:1px solid var(--ytdl-border);
    border-radius:var(--ytdl-radius);
    padding:24px;
}
.ytdl-card-inner{
    display:flex;
    gap:18px;
    margin-bottom:20px;
}
#ytdl-thumb{
    width:180px;
    height:102px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
}
.ytdl-meta h3{
    margin:0 0 8px;
    font-size:1.05rem;
    line-height:1.4;
}
.ytdl-meta p{
    margin:0 0 4px;
    color:var(--ytdl-muted);
    font-size:.875rem;
}

/* ── Format Buttons ──────────────────────────── */
.ytdl-formats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}
.ytdl-fmt-btn{
    padding:10px 18px;
    border-radius:8px;
    border:1px solid var(--ytdl-border);
    background:#111;
    color:#fff;
    font-size:.875rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .1s;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}
.ytdl-fmt-btn span.ytdl-fmt-size{
    font-size:.75rem;
    color:var(--ytdl-muted);
    font-weight:400;
}
.ytdl-fmt-btn:hover{
    background:var(--ytdl-red);
    border-color:var(--ytdl-red);
}
.ytdl-fmt-btn:active{transform:scale(.96);}
.ytdl-fmt-btn.ytdl-active{
    background:var(--ytdl-red);
    border-color:var(--ytdl-red);
}
.ytdl-fmt-btn.ytdl-audio{
    border-color:#9c27b0;
    color:#ce93d8;
}
.ytdl-fmt-btn.ytdl-audio:hover{
    background:#9c27b0;
    color:#fff;
}

/* ── Progress ────────────────────────────────── */
#ytdl-progress{margin:16px 0;}
.ytdl-progress-bar{
    background:#222;
    border-radius:99px;
    height:8px;
    overflow:hidden;
    margin-bottom:8px;
}
.ytdl-progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--ytdl-red),#ff6b35);
    border-radius:99px;
    transition:width .3s;
    animation:ytdl-progress-pulse 1.5s ease-in-out infinite;
}
@keyframes ytdl-progress-pulse{
    0%,100%{opacity:1;}50%{opacity:.6;}
}
#ytdl-progress-text{
    font-size:.85rem;
    color:var(--ytdl-muted);
    margin:0;
}

/* ── Download Link ───────────────────────────── */
#ytdl-dl-link{margin-top:16px;}
#ytdl-dl-anchor{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    background:var(--ytdl-green);
    color:#000;
    border-radius:8px;
    font-weight:700;
    font-size:1rem;
    text-decoration:none;
    transition:opacity .2s,transform .1s;
}
#ytdl-dl-anchor:hover{opacity:.9;}
#ytdl-dl-anchor:active{transform:scale(.97);}

.ytdl-hidden{display:none!important;}

/* ── Responsive ──────────────────────────────── */
@media(max-width:540px){
    .ytdl-card-inner{flex-direction:column;}
    #ytdl-thumb{width:100%;height:auto;}
    .ytdl-input-row{flex-direction:column;}
}