/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/*
 * Kit: the small set of parts (buttons, fields, cards, notes) that pages
 * outside the themes are built from - the page of a playlist, the developer
 * pages, and the pages of plugins. Classes of its own (k-*), colours from the
 * primary colour of the site: the same in every theme, light and dark,
 * left-to-right and right-to-left.
 */
.kit{--k-ink:#0f172a;--k-muted:#64748b;--k-line:#e2e8f0;--k-surface:#fff;--k-soft:#f8fafc;--k-accent:var(--app-primary,#e11d48);--k-accent-rgb:var(--app-primary-rgb,225,29,72);--k-ok:#15803d;--k-bad:#dc2626;--k-warn:#b45309;--k-star:#f59e0b;--k-r:14px;color:var(--k-ink);font-size:1rem;line-height:1.55;text-align:start}
[data-bs-theme="dark"] .kit{--k-ink:#f1f5f9;--k-muted:#94a3b8;--k-line:#263041;--k-surface:#111827;--k-soft:#0b1220;--k-ok:#4ade80;--k-bad:#f87171;--k-warn:#fbbf24}
.kit *,.kit *::before,.kit *::after{box-sizing:border-box}
.kit a{color:var(--k-accent)}
.kit h2,.kit h3{color:var(--k-ink);line-height:1.25;margin:0 0 .5rem}
.kit h2{font-size:1.35rem}
.kit h3{font-size:1.08rem}
.kit p{margin:0 0 .8rem}
.k-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.k-muted{color:var(--k-muted)}
.k-card{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r);padding:1.15rem 1.25rem}
.k-card + .k-card{margin-top:1rem}
.k-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}

/* buttons */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.6rem;padding:.5rem 1rem;border:1px solid var(--k-line);border-radius:999px;background:var(--k-surface);color:var(--k-ink)!important;font:inherit;font-weight:600;font-size:.94rem;line-height:1.2;text-decoration:none!important;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}
.k-btn:hover{border-color:var(--k-accent);background:rgba(var(--k-accent-rgb),.07)}
.k-btn:active{transform:translateY(1px)}
.k-btn:focus-visible,.k-input:focus-visible,.k-select:focus-visible,.k-textarea:focus-visible{outline:3px solid rgba(var(--k-accent-rgb),.35);outline-offset:2px}
.k-btn[disabled],.k-btn.is-off{opacity:.55;cursor:not-allowed;pointer-events:none}
.k-btn-primary{background:var(--k-accent);border-color:var(--k-accent);color:#fff!important}
.k-btn-primary:hover{background:var(--k-accent);filter:brightness(1.08)}
.k-btn-ghost{background:transparent}
.k-btn-danger{color:var(--k-bad)!important}
.k-btn-danger:hover{border-color:var(--k-bad);background:rgba(220,38,38,.08)}
.k-btn-sm{min-height:2.1rem;padding:.3rem .8rem;font-size:.85rem}
.k-btn-block{display:flex;width:100%}

/* fields */
.k-field{display:block;margin:0 0 1rem}
.k-field > span,.k-label{display:block;margin:0 0 .3rem;font-weight:600;font-size:.92rem}
.k-field small,.k-help{display:block;margin-top:.3rem;color:var(--k-muted);font-size:.84rem}
.k-input,.k-select,.k-textarea{display:block;width:100%;min-height:2.7rem;padding:.55rem .8rem;border:1px solid var(--k-line);border-radius:10px;background:var(--k-surface);color:var(--k-ink);font:inherit;font-size:.97rem}
.k-textarea{min-height:7rem;resize:vertical}
.k-select{appearance:auto}
.k-trap{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.k-row{display:grid;gap:0 1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

/* notes and messages */
.k-note,.k-alert{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 1rem;padding:.75rem 1rem;border:1px solid var(--k-line);border-radius:12px;background:var(--k-soft);font-size:.94rem}
.k-alert-ok{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.09);color:var(--k-ok)}
.k-alert-bad{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.08);color:var(--k-bad)}
.k-alert-warn{border-color:rgba(217,119,6,.4);background:rgba(217,119,6,.1);color:var(--k-warn)}
.k-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.14rem .6rem;border-radius:999px;background:rgba(var(--k-accent-rgb),.12);color:var(--k-accent);font-size:.76rem;font-weight:700;white-space:nowrap}
.k-badge-ok{background:rgba(22,163,74,.14);color:var(--k-ok)}
.k-badge-muted{background:var(--k-soft);color:var(--k-muted);border:1px solid var(--k-line)}
.k-badge-warn{background:rgba(217,119,6,.14);color:var(--k-warn)}
.k-empty{padding:2.2rem 1rem;border:1px dashed var(--k-line);border-radius:var(--k-r);color:var(--k-muted);text-align:center}
.k-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.4rem}
.k-pager .is-on{background:var(--k-accent);border-color:var(--k-accent);color:#fff!important}

/* stars */
.k-stars{display:inline-flex;gap:.1rem;color:var(--k-line);font-size:1rem;line-height:1;vertical-align:-.1em}
.k-stars .on{color:var(--k-star)}

/* code */
.kit code{padding:.1rem .35rem;border-radius:6px;background:var(--k-soft);border:1px solid var(--k-line);font-size:.86em;color:var(--k-ink);word-break:break-word}
.k-code{position:relative;margin:0 0 1rem;padding:.9rem 1rem;border-radius:12px;background:#0b1220;color:#e2e8f0;font:500 .84rem/1.6 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;overflow-x:auto;white-space:pre;direction:ltr;text-align:left;tab-size:2}
.k-code-copy{position:absolute;top:.5rem;inset-inline-end:.5rem;min-height:1.9rem;padding:.2rem .6rem;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.08);color:#e2e8f0;font:600 .76rem/1 inherit;cursor:pointer}
.k-code-copy:hover{background:rgba(255,255,255,.18)}
.k-table-wrap{overflow-x:auto;margin:0 0 1rem;border:1px solid var(--k-line);border-radius:12px}
.k-table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--k-surface)}
.k-table th,.k-table td{padding:.6rem .8rem;border-bottom:1px solid var(--k-line);text-align:start;vertical-align:top}
.k-table tr:last-child td{border-bottom:0}
.k-table th{background:var(--k-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--k-muted);white-space:nowrap}

/* ---- the page of a playlist */
.pl-head{display:flex;gap:1rem;align-items:center;margin:0 0 1rem}
.pl-cover{flex:0 0 auto;width:160px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--k-soft)}
.pl-kicker{margin:0 0 .35rem!important;color:var(--k-accent);font-weight:700;font-size:.88rem}
.pl-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:0!important;color:var(--k-muted);font-size:.93rem}
.pl-meta a{font-weight:600;text-decoration:none}
.pl-bar{position:sticky;top:4.75rem;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin:0 0 .8rem;padding:.7rem .9rem;border:1px solid var(--k-line);border-radius:var(--k-r);background:var(--k-surface);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.pl-all{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-weight:600;cursor:pointer}
.pl-all input,.pl-check input{width:1.15rem;height:1.15rem;accent-color:var(--k-accent);cursor:pointer}
.pl-count{color:var(--k-muted);font-size:.9rem}
.pl-quality{display:inline-flex;align-items:center;gap:.5rem;margin:0;margin-inline-start:auto;font-size:.9rem;font-weight:600}
.pl-quality select{min-height:2.4rem;padding:.3rem .6rem;border:1px solid var(--k-line);border-radius:10px;background:var(--k-surface);color:var(--k-ink);font:inherit}
.pl-progress{margin:0 0 .8rem}
.pl-progress-track{height:.5rem;border-radius:999px;background:var(--k-soft);border:1px solid var(--k-line);overflow:hidden}
.pl-progress-track span{display:block;width:0;height:100%;background:var(--k-accent);transition:width .3s}
.pl-progress p{margin:.35rem 0 0;color:var(--k-muted);font-size:.88rem}
.pl-tip{margin:0 0 .8rem!important;color:var(--k-muted);font-size:.86rem}
.pl-list{list-style:none;margin:0;padding:0;border:1px solid var(--k-line);border-radius:var(--k-r);background:var(--k-surface);overflow:hidden}
.pl-row{display:grid;grid-template-columns:auto 2rem 7.5rem minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.6rem .9rem;border-bottom:1px solid var(--k-line)}
.pl-row:last-child{border-bottom:0}
.pl-row[data-state="done"]{background:rgba(22,163,74,.06)}
.pl-row[data-state="failed"]{background:rgba(220,38,38,.05)}
.pl-check{display:flex;margin:0}
.pl-num{color:var(--k-muted);font-size:.85rem;text-align:center;font-variant-numeric:tabular-nums}
.pl-thumb{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--k-soft);aspect-ratio:16/9}
.pl-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pl-dur{position:absolute;inset-inline-end:.25rem;bottom:.25rem;padding:.05rem .3rem;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;font-size:.7rem;font-weight:600}
.pl-text{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.pl-name{font-weight:600;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pl-text small{color:var(--k-muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-state:empty{display:none}
.pl-text .pl-state{white-space:normal;font-weight:600}
.pl-row[data-state="done"] .pl-state{color:var(--k-ok)}
.pl-row[data-state="failed"] .pl-state{color:var(--k-bad)}
.pl-row[data-state="busy"] .pl-state{color:var(--k-accent)}
.pl-acts{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
@media (max-width:640px){
    .pl-cover{width:104px}
    .pl-quality{margin-inline-start:0}
    .pl-bar .k-btn{flex:1 1 100%}
    .pl-row{grid-template-columns:auto 5.6rem minmax(0,1fr);gap:.55rem .65rem;padding:.6rem .7rem}
    .pl-num{display:none}
    .pl-acts{grid-column:1/-1;justify-content:stretch}
    .pl-acts .k-btn{flex:1 1 0}
}

/* ---- developer pages (API) */
.dv-key{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--k-line)}
.dv-key:last-child{border-bottom:0}
.dv-key-name{font-weight:700}
.dv-key-meta{flex:1 1 12rem;min-width:0;color:var(--k-muted);font-size:.86rem}
.dv-secret{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.8rem 1rem;border:1px dashed var(--k-accent);border-radius:12px;background:rgba(var(--k-accent-rgb),.06);margin:0 0 1rem}
.dv-secret code{flex:1 1 14rem;font-size:.92rem;padding:.4rem .6rem;user-select:all}
.dv-method{display:inline-block;min-width:3.2rem;padding:.12rem .45rem;border-radius:6px;background:rgba(22,163,74,.14);color:var(--k-ok);font:700 .76rem/1.4 ui-monospace,Consolas,monospace;text-align:center}
.dv-method.post{background:rgba(var(--k-accent-rgb),.14);color:var(--k-accent)}
.dv-end{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .6rem;font:600 .95rem/1.4 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.dv-meter{display:block;max-width:18rem;height:.45rem;border-radius:999px;background:var(--k-soft);border:1px solid var(--k-line);overflow:hidden;margin-top:.3rem}
.dv-meter span{display:block;height:100%;background:var(--k-accent)}
.dv-toc{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem;padding:0;list-style:none}