/* NoAdsDL V2 Platform Pages — shared design system
 * Loaded together with core.css (header/nav/hero/input/footer base).
 * This file adds only the components core.css doesn't already provide:
 * breadcrumb, lawful-use notice, trust strip, extract/download flow,
 * capability/limitation/troubleshooting sections, FAQ, related cards,
 * supporter CTA. Calmer than the legacy pages: flat surfaces, minimal
 * blur, no animated gradient orbs.
 */

:root{
  --v2-radius-sm:10px;
  --v2-radius-md:14px;
  --v2-radius-lg:20px;
  --v2-space-1:0.5rem;
  --v2-space-2:0.85rem;
  --v2-space-3:1.25rem;
  --v2-space-4:2rem;
  --v2-surface:rgba(255,255,255,0.03);
  --v2-surface-border:rgba(255,255,255,0.08);
  --v2-success:#22c55e;
  --v2-warn:#f59e0b;
  --v2-danger:#ef4444;
  --v2-max-width:760px;
}

/* Breadcrumb */
.v2-breadcrumb{max-width:var(--v2-max-width);margin:0.75rem auto 0;padding:0 1.5rem;font-size:0.78rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center}
.v2-breadcrumb a{color:var(--text-secondary);text-decoration:none}
.v2-breadcrumb a:hover{color:var(--accent-primary)}
.v2-breadcrumb .sep{color:var(--text-muted)}
.v2-breadcrumb .current{color:var(--text-primary)}

/* Hero */
.v2-hero{max-width:var(--v2-max-width);margin:0 auto;padding:1.5rem 1.5rem 0.5rem;text-align:center}
.v2-hero .v2-badge{display:inline-flex;align-items:center;gap:0.4rem;background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:100px;padding:0.35rem 0.9rem;font-size:0.75rem;color:var(--text-secondary);margin-bottom:1rem}
.v2-hero h1{font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:800;letter-spacing:-0.02em;color:var(--text-primary);margin-bottom:0.6rem;line-height:1.2}
.v2-hero p{font-size:0.94rem;color:var(--text-secondary);max-width:560px;margin:0 auto;line-height:1.55}

/* Downloader form + extract/download flow */
.v2-form-card{max-width:var(--v2-max-width);margin:1.25rem auto;background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-lg);padding:1.25rem}
.v2-form-card input[type="text"],.v2-form-card input[type="url"]{width:100%;background:rgba(0,0,0,0.28);border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-md);padding:0.85rem 1rem;color:var(--text-primary);font-size:16px;font-family:inherit;margin-bottom:0.85rem;min-height:44px}
.v2-form-card input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.18)}
.v2-extract-btn{width:100%;min-height:44px;padding:0.85rem;background:var(--accent-primary);color:#fff;border:none;border-radius:var(--v2-radius-md);font-weight:700;font-size:0.95rem;cursor:pointer;transition:filter 0.15s ease,transform 0.15s ease}
.v2-extract-btn:hover{filter:brightness(1.08)}
.v2-extract-btn:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}
.v2-loading{display:none;text-align:center;padding:1.25rem 0;color:var(--text-secondary);font-size:0.88rem}
.v2-loading .v2-spinner{width:22px;height:22px;border:3px solid var(--v2-surface-border);border-top-color:var(--accent-primary);border-radius:50%;margin:0 auto 0.6rem;animation:v2spin 0.8s linear infinite}
@media (prefers-reduced-motion: reduce){.v2-loading .v2-spinner{animation-duration:2.4s}}
@keyframes v2spin{to{transform:rotate(360deg)}}
.v2-info-section{display:none;margin-top:1rem}
.v2-media-meta{display:flex;gap:0.85rem;align-items:center;margin-bottom:1rem}
.v2-media-meta img{width:96px;height:54px;object-fit:cover;border-radius:var(--v2-radius-sm);background:rgba(0,0,0,0.3);flex:0 0 auto}
.v2-media-meta img.v2-audio-art{width:54px;height:54px;border-radius:50%}
.v2-media-meta .v2-media-text{min-width:0}
.v2-media-meta .v2-media-title{font-size:0.92rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-media-meta .v2-media-sub{font-size:0.78rem;color:var(--text-muted)}
.v2-format-group{border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-md);overflow:hidden;margin-bottom:0.85rem}
.v2-format-group-label{padding:0.6rem 0.9rem;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--v2-surface-border)}
.v2-format-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.85rem 0.9rem;min-height:44px;background:transparent;border:none;border-bottom:1px solid var(--v2-surface-border);color:var(--text-primary);font-size:0.88rem;font-weight:600;cursor:pointer;text-align:left}
.v2-format-btn:last-child{border-bottom:none}
.v2-format-btn:hover,.v2-format-btn:focus-visible{background:rgba(99,102,241,0.08)}
.v2-format-btn .v2-format-size{color:var(--text-muted);font-weight:500;font-size:0.78rem;white-space:nowrap}
.v2-progress{display:none;max-width:var(--v2-max-width);margin:0 auto 1rem;background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-lg);padding:1.1rem 1.25rem}
.v2-progress-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.6rem}
.v2-progress-icon{font-size:1.3rem;line-height:1}
.v2-progress-title{font-size:0.88rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-progress-format{font-size:0.74rem;color:var(--accent-primary)}
.v2-progress-track{height:8px;background:rgba(0,0,0,0.3);border-radius:100px;overflow:hidden;margin-bottom:0.5rem}
.v2-progress-bar{height:100%;width:0%;background:var(--accent-primary);border-radius:100px;transition:width 0.3s ease}
.v2-progress-text{color:var(--text-muted);font-size:0.76rem;text-align:center}

/* Lawful-use notice (compact, not a wall of text) */
.v2-lawful-notice{max-width:var(--v2-max-width);margin:0 auto 1rem;padding:0.75rem 1rem;border-radius:var(--v2-radius-md);background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.18);font-size:0.78rem;line-height:1.5;color:var(--text-secondary)}
.v2-lawful-notice strong{color:var(--text-primary)}

/* Trust strip */
.v2-trust-strip{max-width:var(--v2-max-width);margin:0 auto 1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}
.v2-trust-item{display:flex;align-items:center;gap:0.4rem;background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:100px;padding:0.4rem 0.9rem;font-size:0.76rem;color:var(--text-secondary)}

/* Section blocks: capabilities, limitations, troubleshooting, privacy, how-it-works */
.v2-section{max-width:var(--v2-max-width);margin:0 auto 1.25rem;padding:0 1.5rem}
.v2-section h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin-bottom:0.75rem;letter-spacing:-0.01em}
.v2-section p{font-size:0.88rem;line-height:1.65;color:var(--text-secondary);margin-bottom:0.6rem}
.v2-card-list{display:grid;gap:0.6rem}
.v2-card{background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-md);padding:0.95rem 1.1rem}
.v2-card h3{font-size:0.9rem;font-weight:700;color:var(--text-primary);margin-bottom:0.3rem}
.v2-card p{font-size:0.84rem;color:var(--text-secondary);margin-bottom:0}
.v2-limitation-list{list-style:none}
.v2-limitation-list li{display:flex;gap:0.6rem;padding:0.55rem 0;border-bottom:1px solid var(--v2-surface-border);font-size:0.86rem;color:var(--text-secondary)}
.v2-limitation-list li:last-child{border-bottom:none}
.v2-limitation-list li::before{content:'—';color:var(--text-muted);flex:0 0 auto}
.v2-steps{counter-reset:v2step;display:grid;gap:0.6rem}
.v2-steps li{list-style:none;counter-increment:v2step;display:flex;gap:0.75rem;align-items:flex-start;font-size:0.88rem;color:var(--text-secondary)}
.v2-steps li::before{content:counter(v2step);flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.35);color:var(--accent-primary);font-weight:700;font-size:0.78rem;display:flex;align-items:center;justify-content:center}

/* FAQ */
.v2-faq-item{max-width:var(--v2-max-width);margin:0 auto 0.6rem;border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-md);background:var(--v2-surface);overflow:hidden}
.v2-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.9rem 1.1rem;min-height:44px;background:none;border:none;color:var(--text-primary);font-size:0.88rem;font-weight:600;text-align:left;cursor:pointer}
.v2-faq-q:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:-2px}
.v2-faq-toggle{transition:transform 0.2s ease;color:var(--text-muted);flex:0 0 auto}
.v2-faq-item.active .v2-faq-toggle{transform:rotate(180deg)}
.v2-faq-a{display:none;padding:0 1.1rem 1rem;font-size:0.84rem;line-height:1.6;color:var(--text-secondary)}
.v2-faq-item.active .v2-faq-a{display:block}

/* Related tools / guides */
.v2-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0.75rem}
.v2-related-card{display:block;background:var(--v2-surface);border:1px solid var(--v2-surface-border);border-radius:var(--v2-radius-md);padding:0.9rem 1rem;text-decoration:none;transition:border-color 0.15s ease}
.v2-related-card:hover{border-color:rgba(99,102,241,0.4)}
.v2-related-card h3{font-size:0.86rem;font-weight:700;color:var(--text-primary);margin-bottom:0.2rem}
.v2-related-card p{font-size:0.78rem;color:var(--text-muted);margin:0}

/* Supporter CTA (non-intrusive, single strip) */
.v2-supporter-cta{max-width:var(--v2-max-width);margin:0 auto 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.85rem;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.25);border-radius:var(--v2-radius-md);padding:0.9rem 1.1rem}
.v2-supporter-cta p{font-size:0.84rem;color:var(--text-secondary);margin:0}
.v2-supporter-cta strong{color:var(--text-primary)}
.v2-supporter-cta a{flex:0 0 auto;min-height:44px;display:flex;align-items:center;padding:0.6rem 1.1rem;border-radius:var(--v2-radius-sm);background:var(--v2-warn);color:#111827;text-decoration:none;font-weight:700;font-size:0.84rem}

@media (max-width:600px){
  .v2-supporter-cta{flex-direction:column;align-items:stretch;text-align:center}
  .v2-supporter-cta a{justify-content:center}
  .v2-media-meta img{width:72px;height:44px}
}