:root{
     --bg:#0b0c10;
     --panel:#12141a;
     --text:#e7e9ee;
     --muted:#a6adbb;
     --brand:#6a64cc;
    /* primary */
     --brand-2:#3e2fa3;
    /* secondary */
     --outline:2px solid rgb(106 100 204 / 50%);
     --maxw:1100px;
     --radius:16px;
     --shadow:0 10px 30px rgba(0,0,0,.25);
     --iframe-min-h:clamp(560px,85vh,1200px) 
}

 *{
    box-sizing:border-box
}
 html,body{
    height:100%
}
 body{
     margin:0;
     font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
     color:var(--text);
     background-color:var(--bg);
     min-height:100dvh;
     display:grid;
     grid-template-rows:auto 1fr auto 
}
/* Utilities */
 .container{
    width:min(100% - 2rem,var(--maxw));
    margin-inline:auto
}
 .visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
 .card{
    background:var(--panel);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.06)
}
/* Header / Nav */
 header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(1.1) blur(10px);
    background:color-mix(in hsl,var(--panel) 85%,transparent);
    border-bottom:1px solid rgba(255,255,255,.08)
}
 .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.75rem 0
}
 .brand{
     display:flex;
     align-items:center;
     gap:.5rem;
    text-decoration:none;
    color:inherit;
    font-weight:700 
}
 .brand .logo{
     display:block;
     width:32px;
     height:32px;
     object-fit:contain;
}
 .links{
    display:flex;
    gap:1rem;
    align-items:center
}
 .links a{
    color:var(--text);
    text-decoration:none;
    opacity:.9
}
 .links a:hover,.links a:focus-visible{
    opacity:1;
    text-decoration:underline;
    text-underline-offset:3px
}
 .nav-cta{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .9rem;
    border-radius:999px;
    background:var(--brand);
    color:#fff;
    border:none;
    font-weight:600;
    text-decoration:none;
    box-shadow:var(--shadow)
}
 .menu-btn{
    display:none;
    appearance:none;
    border:none;
    background:transparent;
    color:inherit;
    padding:.5rem;
    border-radius:10px
}
 .menu-btn:focus-visible{
    outline:var(--outline)
}
 @media(max-width:840px){
     .menu-btn{
        display:inline-flex
    }
     .links{
        display:none
    }
     body.nav-open .links{
        display:flex;
        position:absolute;
        left:0;
        right:0;
        top:60px;
        padding:.75rem;
        flex-direction:column;
        background:var(--panel);
        border-bottom:1px solid rgba(255,255,255,.1)
    }
}
/* Main */
 main{
    padding:2rem 0 3rem
}
 .hero{
    display:grid;
    gap:1rem;
    padding:1.25rem;
    align-items:center;
    text-align:center
}
 .hero h1{
    margin:0;
    font-size:clamp(1.6rem,3vw + 1rem,2.6rem);
    letter-spacing:-.02em
}
 .hero p{
    margin:0;
    color:var(--muted);
    font-size:clamp(.95rem,.6vw + .7rem,1.05rem)
}
 .panel-grid{
    align-items: start;
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
    margin-top:1rem
}
 @media(min-width:900px){
    .panel-grid{
        grid-template-columns:1.4fr .9fr
    }
}
 .embed{
    padding:1rem
}
 .embed .iframe-wrap{
    min-height:var(--iframe-min-h);
    width:100%;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 10px,transparent 10px,transparent 20px);
    border-radius:calc(var(--radius) - 6px);
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px dashed rgba(255,255,255,.18)
}
 .embed .iframe-wrap p{
    margin:0;
    color:var(--muted)
}
 .embed iframe{
    width:100%;
    height:100%;
    border:0;
    display:block
}
/* Tips */
 .tips{
    align-self: start;
    padding:1rem;
    display:grid;
    gap:.75rem
}
 .tips h2{
    margin:.2rem 0 .4rem;
    font-size:1.05rem
}
 .tips ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:.5rem
}
 .tips li{
    display:grid;
    grid-template-columns:28px 1fr;
    gap:.5rem;
    align-items:start;
    color:var(--muted)
}
 .bullet{
    width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:color-mix(in hsl,var(--brand) 32%, transparent);
    color:#fff;
    font-weight:800
}
/* Footer */
 footer{
    border-top:1px solid rgba(255,255,255,.1);
    background:color-mix(in hsl,var(--panel) 90%, transparent)
}
 .foot{
    display:grid;
    gap:.75rem;
    padding:1.25rem 0;
    align-items:center
}
 .foot small{
    color:var(--muted)
}
 .foot-links{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap
}
 .foot a{
    color:inherit;
    text-decoration:none;
    opacity:.85
}
 .foot a:hover,.foot a:focus-visible{
    opacity:1;
    text-decoration:underline;
    text-underline-offset:3px
}
/* Downloader card */
 .dl-form{
    display:grid;
    gap:1rem
}
 .field{
    display:grid;
    gap:.4rem
}
 label{
    font-weight:600;
    color:var(--muted)
}
 input[type="url"],select{
     width:100%;
    font-size:1rem;
    color:var(--text);
    background:var(--panel);
     border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    padding:.8rem .95rem;
     transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease 
}
 input::placeholder{
    color:color-mix(in oklab,var(--muted),transparent 35%)
}
 input:focus,select:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 .18rem color-mix(in oklab,var(--brand),transparent 65%)
}
 .btn-primary{
     width:100%;
    appearance:none;
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
     border:1px solid color-mix(in oklab,var(--brand-2),black 22%);
    border-radius:12px;
    color:#fff;
    padding:.9rem 1.1rem;
     font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .1s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
     box-shadow:0 8px 20px color-mix(in oklab,var(--brand),transparent 75%),inset 0 1px 0 rgba(255,255,255,.18) 
}
 .btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px color-mix(in oklab,var(--brand),transparent 70%)
}
 .btn-primary:active{
    transform:translateY(0);
    box-shadow:0 6px 16px color-mix(in oklab,var(--brand),transparent 78%)
}
 .btn-primary:focus-visible{
    outline:var(--outline);
    outline-offset:2px
}
/* Generated download button */
 .strong{
     width:100%;
    appearance:none;
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
     border:1px solid color-mix(in oklab,var(--brand-2),black 22%);
    border-radius:12px;
    color:#fff;
    padding:.9rem 1.1rem;
     font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .1s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
     box-shadow:0 8px 20px color-mix(in oklab,var(--brand),transparent 75%),inset 0 1px 0 rgba(255,255,255,.18) 
}
 .strong:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px color-mix(in oklab,var(--brand),transparent 70%)
}
 .strong:active{
    transform:translateY(0);
    box-shadow:0 6px 16px color-mix(in oklab,var(--brand),transparent 78%)
}
 .strong:focus-visible{
    outline:var(--outline);
    outline-offset:2px
}
/* Progress bar */
 .progress-track {
     height: 8px;
     background: var(--surface-2, #eee);
     border-radius: 999px;
     overflow: hidden;
     margin-top: 6px;
     margin-bottom: 6px;
}
 .progress-fill {
     height: 100%;
     width: 0%;
     transition: width .35s ease;
     background: var(--accent, #6366f1);
}
/* Disabled styles */
 a[disabled] {
     pointer-events: none;
}
 button.strong:disabled {
     background: #d1d5db;
     color: #6b7280;
     border-color: transparent;
     cursor: not-allowed;
}
 button.strong:disabled svg {
     opacity: .6;
}
/* Results area */
 #ds{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:.25rem
}
 @media(max-width:568px){
    #ds{
        flex-direction:column
    }
    #ds>*{
        flex:1 1 100%;
        max-width:100%
    }
}

 .md\:flex-shrink-0{
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1)
}
 .md\:flex-shrink-0 img{
    max-width:100%;
    width:100%;
    height:auto;
    object-fit:cover;
    display:block
}

 a[id^="veed-"]{
    display:none!important
}
 a[href^="https://www.youtube.com/watch?v="], a[href^="https://www.byclickdownloader.com/How-to-download-youtube-playlists.php"]{
    display:none!important
}

 a:focus-visible,button:focus-visible{
    outline:var(--outline);
    outline-offset:2px
}
 @media(prefers-reduced-motion:reduce){
    *{
        transition:none!important;
        animation:none!important
    }
}