/* ============================================================
   Downloader "studio" format layout - downloader-formats.js
   (DownloaderPage.init({ layout: "studio" })) and the studio
   variant of the progress dialog (.dlj-overlay.dlj-studio).
   Shared, so any downloader page can opt in by loading this file.
   ============================================================ */

.dfs { --dfs-ink: #121a33; --dfs-ink-2: #4a5470; --dfs-ink-3: #7c86a2; --dfs-line: #e3e7f1; --dfs-accent: #5b4cf0; --dfs-accent-2: #ff4f79; }
.dfs, .dfs * { box-sizing: border-box; }

/* ---------- best quality ---------- */
.dfs-best {
    position: relative; display: flex; align-items: center; gap: 16px; width: 100%;
    margin: 0 0 18px; padding: 16px 22px; border: 0; border-radius: 18px; cursor: pointer; text-align: left;
    color: #fff; overflow: hidden; isolation: isolate;
    background: linear-gradient(120deg, #5b4cf0 0%, #8b3cf0 50%, #ff4f79 100%);
    box-shadow: 0 14px 30px rgba(91, 76, 240, .32);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dfs-best::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-100%); animation: dfs-shine 3.2s ease-in-out infinite;
}
.dfs-best:hover, .dfs-best:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(91, 76, 240, .4); }
.dfs-best:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.dfs-best[disabled] { opacity: .7; cursor: progress; }
.dfs-best-icon {
    flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M5 21h14'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.dfs-best-text { display: flex; flex-direction: column; gap: 2px; }
.dfs-best-text strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.dfs-best-text small { font-size: .86rem; opacity: .88; }

/* ---------- tabs ---------- */
.dfs-tabs { display: flex; gap: 8px; margin: 0 0 14px; padding: 5px; border-radius: 16px; background: #f1f3f9; overflow-x: auto; }
.dfs-tab {
    flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
    color: var(--dfs-ink-2); font-weight: 700; font-size: .95rem; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dfs-tab-hint { font-weight: 500; font-size: .8rem; color: var(--dfs-ink-3); }
.dfs-tab-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #e2e6f2; font-size: .75rem; line-height: 20px; color: var(--dfs-ink-2); }
.dfs-tab[aria-selected="true"] { background: #fff; color: var(--dfs-ink); box-shadow: 0 2px 8px rgba(18, 26, 51, .08); }
.dfs-tab[aria-selected="true"] .dfs-tab-count { background: var(--dfs-accent); color: #fff; }
.dfs-tab:focus-visible { outline: 3px solid var(--dfs-accent); outline-offset: 2px; }

/* ---------- toolbar ---------- */
.dfs-note { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #fff7e6; color: #8a5a00; font-size: .88rem; }
.dfs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.dfs-convert { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.dfs-convert label { margin: 0; font-size: .88rem; font-weight: 600; color: var(--dfs-ink-2); white-space: nowrap; }
.dfs-convert select {
    min-width: 210px; height: 38px; padding: 0 12px; border: 1px solid var(--dfs-line); border-radius: 10px;
    background: #fff; color: var(--dfs-ink); font-size: .9rem;
}
.dfs-sort { display: inline-flex; padding: 3px; border-radius: 10px; background: #f1f3f9; margin-left: auto; }
.dfs-convert + .dfs-sort { margin-left: 0; }
.dfs-sort-btn { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--dfs-ink-2); font-size: .85rem; font-weight: 600; cursor: pointer; }
.dfs-sort-btn.is-on { background: #fff; color: var(--dfs-ink); box-shadow: 0 1px 4px rgba(18,26,51,.08); }
.dfs-showall { padding: 6px 12px; border: 1px solid var(--dfs-line); border-radius: 10px; background: #fff; color: var(--dfs-accent); font-size: .85rem; font-weight: 700; cursor: pointer; }

/* ---------- cards ---------- */
.dfs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.dfs-card {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px;
    border: 1px solid var(--dfs-line); border-radius: 16px; background: #fff;
    animation: dfs-in .35s ease both; animation-delay: calc(var(--i, 0) * 35ms);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dfs-card:hover { border-color: #cfd6f6; box-shadow: 0 10px 24px rgba(40, 60, 160, .1); transform: translateY(-2px); }
.dfs-card.is-top { border-color: #c9c2ff; background: linear-gradient(180deg, #fbfaff, #fff); }
.dfs-card.is-top::before {
    content: "Top pick"; position: absolute; top: -9px; left: 14px; padding: 1px 8px; border-radius: 999px;
    background: var(--dfs-accent); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.dfs-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dfs-q { font-size: 1.25rem; font-weight: 800; color: var(--dfs-ink); letter-spacing: -.02em; margin-right: auto; }
.dfs-tag { padding: 1px 7px; border-radius: 6px; font-size: .7rem; font-weight: 800; color: #fff; background: #64748b; }
.dfs-tag-4k { background: linear-gradient(135deg, #ff4f79, #b5179e); }
.dfs-tag-fhd { background: linear-gradient(135deg, #5b4cf0, #3d6ff0); }
.dfs-tag-hd { background: #16a34a; }
.dfs-tag-sd { background: #d97706; }
.dfs-ext { padding: 1px 7px; border-radius: 6px; font-size: .7rem; font-weight: 700; color: var(--dfs-ink-2); background: #eef1f7; }
.dfs-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .84rem; color: var(--dfs-ink-3); }
.dfs-meta-size { color: var(--dfs-ink-2); font-weight: 600; }

.dfs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto;
    padding: 9px 12px; border: 1px solid transparent; border-radius: 11px; cursor: pointer;
    background: #eef0ff; color: #3a2fd0; font-weight: 700; font-size: .92rem;
    transition: background-color .15s ease, color .15s ease;
}
.dfs-btn:hover, .dfs-btn:focus-visible { background: var(--dfs-accent); color: #fff; }
.dfs-btn:focus-visible { outline: 3px solid #c9c2ff; outline-offset: 2px; }
.dfs-btn[disabled] { background: #f1f3f9; color: var(--dfs-ink-3); cursor: not-allowed; }
.dfs-btn-icon {
    width: 16px; height: 16px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dfs-empty { margin: 8px 0 0; color: var(--dfs-ink-3); }

/* summary chips (rendered into the page's summary element) */
.dfs-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #f1f3f9; font-size: .84rem; }
.dfs-chip-label { color: #7c86a2; }
.dfs-chip-value { color: #121a33; font-weight: 700; }

@keyframes dfs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dfs-shine { 0%, 45% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }

@media (max-width: 560px) {
    .dfs-best { padding: 14px 16px; gap: 12px; }
    .dfs-best-icon { width: 40px; height: 40px; }
    .dfs-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dfs-card { padding: 12px; }
    .dfs-q { font-size: 1.08rem; }
    .dfs-tab-hint { display: none; }
    .dfs-convert { width: 100%; }
    .dfs-convert select { flex: 1; min-width: 0; }
    .dfs-sort { margin-left: 0; }
}
@media (max-width: 380px) { .dfs-grid { grid-template-columns: 1fr; } }

/* ---------- progress on the page (DownloadJob mount mode) ----------
   The studio pages show the progress card inside the result panel instead of
   a full-screen dialog, with an advertisement ABOVE it (never inside the card,
   never next to Download file / Cancel at the card's bottom). */
.vds-progress-dock { margin: 22px 0 26px; }
.vds-progress-dock[hidden] { display: none; }
/* Below the card: 44px of clear air plus the label between Download file /
   Cancel and the advertisement. */
.downloader-ad.downloader-ad--progress { margin: 44px auto 0; max-width: 728px; }
.dlj-overlay.dlj-studio.dlj-inline {
    position: static; inset: auto; z-index: auto; display: block;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
}
.dlj-overlay.dlj-studio.dlj-inline[hidden] { display: none; }
.dlj-overlay.dlj-studio.dlj-inline .dlj-card {
    width: auto; max-width: 640px; margin: 0 auto;
    box-shadow: 0 14px 36px rgba(10, 12, 40, .14); border: 1px solid #e6e8f4;
}

/* ---------- studio progress dialog ---------- */
.dlj-overlay.dlj-studio { background: rgba(10, 12, 32, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dlj-overlay.dlj-studio .dlj-card {
    --dlj-bg: #fff; --dlj-fg: #121a33;
    max-width: 500px; padding: 26px 26px 22px; border-radius: 24px;
    box-shadow: 0 30px 70px rgba(10, 12, 40, .35);
}
.dlj-overlay.dlj-studio .dlj-title { font-size: 1.12rem; font-weight: 800; }
.dlj-overlay.dlj-studio .dlj-percent { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg, #5b4cf0, #ff4f79); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dlj-overlay.dlj-studio .dlj-bar-track { height: 12px; background: #eceef8; }
.dlj-overlay.dlj-studio .dlj-bar-fill { background: linear-gradient(90deg, #5b4cf0, #b43cf0, #ff4f79); }
.dlj-overlay.dlj-studio.dlj-complete .dlj-bar-fill { background: linear-gradient(90deg, #22a55b, #4ade80); }
.dlj-overlay.dlj-studio .dlj-stats { padding: 10px 12px; border-radius: 12px; background: #f6f7fc; color: #4a5470; }
.dlj-overlay.dlj-studio .dlj-btn { border-radius: 12px; font-weight: 700; padding: 11px 20px; }
.dlj-overlay.dlj-studio .dlj-btn-primary { background: linear-gradient(120deg, #22a55b, #16a34a); box-shadow: 0 8px 20px rgba(34, 165, 91, .3); }
.dlj-overlay.dlj-studio .dlj-btn-primary:hover { filter: brightness(1.05); }
.dlj-overlay.dlj-studio.dlj-complete .dlj-download-btn { flex: 1 1 100%; font-size: 1.05rem; padding: 13px 20px; }
@media (prefers-color-scheme: dark) {
    .dlj-overlay.dlj-studio .dlj-card { --dlj-bg: #fff; --dlj-fg: #121a33; }
    .dlj-overlay.dlj-studio .dlj-stage { color: #4a5470; }
}
@media (prefers-reduced-motion: reduce) {
    .dfs-best::after, .dfs-card { animation: none; }
    .dfs-card, .dfs-best { transition: none; }
}