/**
 * Kalos TV Drama Downloader — styles
 * Matches the Suspended Starter theme (neo-brutalist, cream/cyan) but self-contained.
 */

.kld-wrap {
    --kld-ink: #1c1a27;
    --kld-bg: #ffffff;
    --kld-cream: #fbfbf9;
    --kld-primary: #00e5ff;
    --kld-primary-dark: #00b3cc;
    --kld-accent: #facc15;
    --kld-error: #f472b6;
    --kld-muted: #6b7280;
    --kld-border: 3px solid var(--kld-ink);
    --kld-shadow: 4px 4px 0px var(--kld-ink);
    --kld-radius: 0px;

    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--kld-ink);
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}

.kld-wrap * { box-sizing: border-box; }

/* ---------- Input card ---------- */
.kld-input-card {
    background: var(--kld-bg);
    border: var(--kld-border);
    box-shadow: var(--kld-shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.kld-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.kld-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    font: 700 .9rem/1 'Manrope', sans-serif;
    padding: .6rem 1rem;
    background: var(--kld-cream);
    border: 2px solid var(--kld-ink);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    min-height: 44px;
}
.kld-tab:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--kld-ink); }
.kld-tab.active { background: var(--kld-primary); }

.kld-tab-content { display: none; }
.kld-tab-content.active { display: block; }

.kld-input-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.kld-input {
    flex: 1 1 220px;
    min-height: 48px;
    padding: .65rem .9rem;
    font: 500 1rem/1.4 'Manrope', sans-serif;
    border: 2px solid var(--kld-ink);
    background: var(--kld-cream);
    color: var(--kld-ink);
    outline: none;
}
.kld-input:focus { background: #fff; box-shadow: 3px 3px 0 var(--kld-primary-dark); }

.kld-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 48px;
    padding: .65rem 1.2rem;
    font: 800 .95rem/1 'Manrope', sans-serif;
    border: 2px solid var(--kld-ink);
    background: var(--kld-primary);
    color: var(--kld-ink);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.kld-btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--kld-ink); }
.kld-btn:active { transform: translate(0, 0); box-shadow: none; }
.kld-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.kld-hint { font-size: .8rem; color: var(--kld-muted); margin: .55rem 0 0; }

.kld-res-row {
    display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
    font: 700 .85rem/1 'Manrope', sans-serif;
}
.kld-res-row select { max-width: 240px; min-height: 44px; }

/* ---------- Hot chips ---------- */
.kld-hot-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.kld-hot-chip {
    font: 700 .78rem/1 'Manrope', sans-serif;
    padding: .45rem .7rem;
    background: var(--kld-cream);
    border: 2px solid var(--kld-ink);
    cursor: pointer;
    transition: background .15s ease;
    min-height: 34px;
}
.kld-hot-chip:hover { background: var(--kld-accent); }

/* ---------- Error / loader ---------- */
.kld-alert-error {
    display: none;
    background: #ffe9f3;
    border: var(--kld-border);
    box-shadow: var(--kld-shadow);
    border-left: 8px solid var(--kld-error);
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
}
.kld-alert-error.show { display: block; }

.kld-loader { display: none; text-align: center; padding: 1.4rem; font-weight: 700; }
.kld-loader.show { display: block; }
.kld-spinner {
    width: 34px; height: 34px; margin: 0 auto .6rem;
    border: 4px solid var(--kld-ink);
    border-top-color: var(--kld-primary);
    border-radius: 50%;
    animation: kld-spin .8s linear infinite;
}
@keyframes kld-spin { to { transform: rotate(360deg); } }

/* ---------- Search results grid ---------- */
.kld-search-results { margin-bottom: 1.25rem; }
.kld-results-title { font: 800 1.05rem/1.3 'Space Grotesk', sans-serif; margin: 0 0 .8rem; }

.kld-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}
@media (min-width: 640px) { .kld-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .kld-grid { grid-template-columns: repeat(4, 1fr); } }

.kld-card {
    background: var(--kld-bg);
    border: var(--kld-border);
    box-shadow: var(--kld-shadow);
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    text-align: left;
    padding: 0;
    font-family: inherit;
}
.kld-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--kld-ink); }

.kld-card-img { position: relative; aspect-ratio: 3 / 4.2; background: var(--kld-cream); display: block; width: 100%; }
.kld-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kld-card-score {
    position: absolute; top: .45rem; right: .45rem;
    background: var(--kld-accent); border: 2px solid var(--kld-ink);
    font: 800 .72rem/1 'Manrope', sans-serif; padding: .3rem .4rem;
}
.kld-card-body { padding: .6rem .7rem .8rem; }
.kld-card-name {
    font: 800 .88rem/1.3 'Manrope', sans-serif;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.3em;
}
.kld-card-meta { font-size: .72rem; color: var(--kld-muted); margin-top: .3rem; }

/* ---------- Series card ---------- */
.kld-series-card { display: none; margin-bottom: 1.25rem; }
.kld-series-card.show { display: block; }

.kld-series-top {
    display: flex; gap: 1rem;
    background: var(--kld-bg);
    border: var(--kld-border);
    box-shadow: var(--kld-shadow);
    padding: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.kld-series-poster { flex: 0 0 110px; aspect-ratio: 3/4.2; border: 2px solid var(--kld-ink); object-fit: cover; }
.kld-series-info { flex: 1 1 240px; min-width: 0; }
.kld-series-name { font: 800 1.25rem/1.25 'Space Grotesk', sans-serif; margin: 0 0 .35rem; }
.kld-series-author { font-size: .8rem; color: var(--kld-muted); margin-bottom: .4rem; }
.kld-series-desc { font-size: .85rem; line-height: 1.55; }
.kld-series-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.kld-tag {
    font: 700 .7rem/1 'Manrope', sans-serif;
    background: var(--kld-primary-light, #e0fbff);
    border: 2px solid var(--kld-ink);
    padding: .3rem .5rem;
}

.kld-ep-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    flex-wrap: wrap; margin-bottom: .8rem;
}
.kld-ep-count { font: 800 .95rem/1.3 'Space Grotesk', sans-serif; }

.kld-btn-all {
    background: var(--kld-accent);
}
.kld-group-title {
    font: 800 .85rem/1 'Manrope', sans-serif;
    margin: 1rem 0 .5rem;
    text-transform: uppercase; letter-spacing: .04em;
}

.kld-eps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}
@media (min-width: 640px) { .kld-eps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .kld-eps { grid-template-columns: repeat(4, 1fr); } }

.kld-eps::-webkit-scrollbar { width: 10px; }
.kld-eps::-webkit-scrollbar-track { background: var(--kld-cream); }
.kld-eps::-webkit-scrollbar-thumb { background: var(--kld-ink); border: 2px solid var(--kld-cream); }

.kld-ep {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem;
    min-height: 48px;
    padding: .45rem .6rem;
    background: var(--kld-bg);
    border: 2px solid var(--kld-ink);
    cursor: pointer;
    font: 700 .8rem/1.2 'Manrope', sans-serif;
    text-align: left;
    transition: transform .12s ease, background .12s ease;
}
.kld-ep:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--kld-ink); }
.kld-ep .kld-ep-crown { flex: none; }
.kld-ep.locked { background: #fff7e0; color: #8a6d00; cursor: help; }
.kld-ep.busy { background: var(--kld-primary); }
.kld-ep.done { background: #d9f7e2; }

/* ---------- Download overlay ---------- */
.kld-dl-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(28, 26, 39, .62);
    align-items: center; justify-content: center;
    padding: 1rem;
}
.kld-dl-overlay.show { display: flex; }
.kld-dl-box {
    width: min(420px, 100%);
    background: var(--kld-bg);
    border: var(--kld-border);
    box-shadow: 8px 8px 0 var(--kld-ink);
    padding: 1.4rem;
    text-align: center;
}
.kld-dl-box h3 { font: 800 1.1rem/1.3 'Space Grotesk', sans-serif; margin: 0 0 .6rem; }
.kld-dl-ep { font: 700 .85rem/1.4 'Manrope', sans-serif; margin-bottom: .5rem; word-break: break-word; }
.kld-dl-percent { font: 800 2rem/1 'Space Grotesk', sans-serif; margin-bottom: .6rem; }
.kld-dl-bar {
    height: 18px;
    border: 2px solid var(--kld-ink);
    background: var(--kld-cream);
    overflow: hidden;
    margin-bottom: .6rem;
}
.kld-dl-fill { height: 100%; width: 0%; background: repeating-linear-gradient(45deg, var(--kld-primary), var(--kld-primary) 8px, #7deeff 8px, #7deeff 16px); transition: width .2s ease; }
.kld-dl-status { font-size: .78rem; color: var(--kld-muted); margin-bottom: .9rem; word-break: break-all; }

/* ---------- Toast ---------- */
.kld-toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: var(--kld-ink); color: #fff;
    border: 2px solid var(--kld-ink);
    box-shadow: 3px 3px 0 rgba(28,26,39,.35);
    padding: .7rem 1.1rem;
    font: 700 .85rem/1.3 'Manrope', sans-serif;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 100000;
    max-width: min(90vw, 480px);
    text-align: center;
}
.kld-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kld-toast.err { background: var(--kld-error); color: var(--kld-ink); }

/* ========================================================================
   v2 SERIES PAGES — single + archive (plugin-rendered, theme-agnostic)
   ======================================================================== */
.kld-series-page {
    --kld-ink: #1c1a27;
    --kld-cream: #fbfbf9;
    --kld-primary: #00e5ff;
    --kld-accent: #facc15;
    --kld-muted: #6b7280;
    --kld-border: 3px solid var(--kld-ink);
    --kld-shadow: 4px 4px 0px var(--kld-ink);

    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--kld-ink);
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}
.kld-series-page *, .kld-series-page *::before, .kld-series-page *::after { box-sizing: border-box; }

.kld-breadcrumb {
    font-size: .82rem;
    color: var(--kld-muted);
    display: flex; gap: .5rem; align-items: center;
    padding: 1.25rem 0 .75rem;
    flex-wrap: wrap;
}
.kld-breadcrumb a { color: var(--kld-muted); text-decoration: none; }
.kld-breadcrumb a:hover { color: var(--kld-ink); text-decoration: underline; }
.kld-breadcrumb-current { font-weight: 700; color: var(--kld-ink); }

/* Hero */
.kld-sp-hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    background: #fff;
    border: var(--kld-border);
    box-shadow: var(--kld-shadow);
    padding: 1.25rem;
}
.kld-sp-poster { aspect-ratio: 3 / 4.2; background: var(--kld-cream); border: var(--kld-border); overflow: hidden; }
.kld-sp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kld-sp-info h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 .6rem; font-weight: 800; letter-spacing: -.02em; }
.kld-sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.kld-chip {
    display: inline-block; font-size: .75rem; font-weight: 700;
    background: var(--kld-cream); border: 2px solid var(--kld-ink);
    padding: .18rem .55rem;
}
.kld-chip-accent { background: var(--kld-primary); }
.kld-sp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.kld-tag {
    font-size: .72rem; font-weight: 700;
    background: #ffe9f3; border: 2px solid var(--kld-ink); padding: .15rem .5rem;
}
.kld-sp-author { font-size: .85rem; color: var(--kld-muted); margin: 0 0 .7rem; }
.kld-sp-desc { font-size: .92rem; line-height: 1.6; margin: 0 0 1rem; }
.kld-sp-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.kld-series-page .kld-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 800; font-size: .9rem; cursor: pointer;
    padding: .6rem 1.1rem; border: var(--kld-border);
    box-shadow: 3px 3px 0 var(--kld-ink);
    text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.kld-series-page .kld-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--kld-ink); }
.kld-series-page .kld-btn-primary { background: var(--kld-primary); color: var(--kld-ink); }
.kld-series-page .kld-btn-ghost { background: var(--kld-cream); color: var(--kld-ink); }

/* Sections */
.kld-sp-section { margin-top: 2rem; }
.kld-sp-section h2 {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
    border-bottom: 3px solid var(--kld-ink); padding-bottom: .4rem; margin: 0 0 .9rem;
}
.kld-sp-prose { font-size: .95rem; line-height: 1.7; }
.kld-sp-prose p { margin: 0 0 .8rem; }
.kld-sp-note { font-size: .88rem; color: var(--kld-muted); margin: -.4rem 0 .9rem; }

.kld-sp-steps { font-size: .93rem; line-height: 1.7; padding-left: 1.3rem; margin: 0; }
.kld-sp-steps li { margin-bottom: .45rem; }

/* FAQ */
.kld-faq {
    background: #fff; border: 2px solid var(--kld-ink);
    margin-bottom: .6rem;
}
.kld-faq summary {
    font-weight: 700; font-size: .92rem; cursor: pointer;
    padding: .7rem .9rem; list-style-position: inside;
}
.kld-faq summary:hover { background: var(--kld-cream); }
.kld-faq p { padding: 0 .9rem .8rem 1.6rem; margin: 0; font-size: .88rem; line-height: 1.6; color: #333; }

/* Related / archive grid */
.kld-sp-related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.kld-sp-rel-card {
    background: #fff; border: var(--kld-border);
    box-shadow: 3px 3px 0 var(--kld-ink);
    text-decoration: none; color: var(--kld-ink);
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex; flex-direction: column;
}
.kld-sp-rel-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--kld-ink); }
.kld-sp-rel-img { aspect-ratio: 3 / 4.2; background: var(--kld-cream); display: block; overflow: hidden; border-bottom: var(--kld-border); }
.kld-sp-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kld-sp-rel-name {
    font-weight: 800; font-size: .84rem; line-height: 1.3;
    padding: .55rem .6rem .15rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kld-sp-rel-meta { font-size: .72rem; color: var(--kld-muted); padding: 0 .6rem .6rem; }

/* Archive head */
.kld-arch-head { padding: 1.5rem 0 1rem; }
.kld-arch-head h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; }
.kld-arch-head p { color: var(--kld-muted); font-size: .92rem; margin: 0; }
.kld-arch-grid { grid-template-columns: repeat(4, 1fr); }
.kld-arch-nav { margin-top: 1.5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.kld-arch-nav .page-numbers {
    display: inline-block; padding: .45rem .8rem;
    border: 2px solid var(--kld-ink); background: #fff;
    font-weight: 700; font-size: .85rem; text-decoration: none; color: var(--kld-ink);
}
.kld-arch-nav .page-numbers.current { background: var(--kld-primary); }
.kld-arch-nav .page-numbers:hover { background: var(--kld-cream); }
.kld-arch-empty {
    background: #fff; border: var(--kld-border); box-shadow: var(--kld-shadow);
    padding: 1.5rem; font-size: .95rem; margin-top: 1rem;
}

/* Episodes embed inside series page: hide duplicated header card,
   inherit widget vars */
.kld-series-embed .kld-series-top { display: none; }
.kld-series-embed { margin-top: 1rem; }

/* Responsive */
@media (max-width: 720px) {
    .kld-sp-hero { grid-template-columns: 130px 1fr; gap: 1rem; padding: 1rem; }
    .kld-sp-info h1 { font-size: 1.3rem; }
    .kld-sp-related, .kld-arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .kld-sp-related, .kld-arch-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .kld-breadcrumb { font-size: .76rem; }
}

/* ========================================================================
   v3 MULTI-APP — provider switcher tabs
   ======================================================================== */
.kld-app-tabs {
    display: flex; flex-wrap: wrap; gap: .45rem;
    margin-bottom: 1rem;
}
.kld-app-tab {
    position: relative;
    display: inline-block;
    font-size: .8rem; font-weight: 800;
    padding: .38rem .75rem;
    background: var(--kld-cream, #fbfbf9);
    border: 2px solid var(--kld-ink, #1c1a27);
    color: var(--kld-ink, #1c1a27);
    cursor: pointer; text-decoration: none;
    transition: transform .1s ease, background .1s ease;
    user-select: none;
}
.kld-app-tab:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--kld-ink, #1c1a27); }
.kld-app-tab.active { background: var(--kld-primary, #00e5ff); }
.kld-app-dot {
    position: absolute; top: -5px; right: -5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; border: 2px solid #fff;
}