/* NoBsDL shared stylesheet — SEO soft launch (2026-09-08)
   Used by the 15 launch pages: /, /youtube-downloader, /youtube-to-mp3,
   /youtube-playlist-downloader, /how-it-works, /about, /contact, the five
   /guides/* pages, /privacy, /terms, /dmca. Keeps the app's existing dark
   glass visual language but drops the legacy inline duplication,
   fabricated trust signals, and legacy-brand-specific styling. */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-primary:#0a0c12;--bg-secondary:#0f1117;--bg-tertiary:#151821;
  --surface-glass:rgba(21,24,33,0.65);--surface-glass-hover:rgba(31,35,48,0.8);
  --border-glass:rgba(66,71,94,0.35);
  --accent-primary:#6366f1;--accent-secondary:#06b6d4;
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;
  --shadow-glow:0 0 20px rgba(99,102,241,0.3);
  --glass-blur:blur(12px);--transition-base:0.25s ease;
}
html{color-scheme:dark}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.55;min-height:100vh;overflow-x:hidden}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}

/* Header / nav */
header{position:sticky;top:0;z-index:100;background:rgba(10,12,18,0.9);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-glass);padding:0.9rem 0}
.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.logo{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;text-decoration:none;background:linear-gradient(135deg,var(--text-primary),var(--accent-primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
nav#mainNav{display:flex;gap:0.25rem;flex-wrap:wrap}
nav#mainNav a{color:var(--text-secondary);text-decoration:none;padding:0.5rem 0.85rem;font-size:0.88rem;font-weight:500;border-radius:10px;transition:all var(--transition-base);white-space:nowrap}
nav#mainNav a:hover,nav#mainNav a.current{color:var(--text-primary);background:var(--surface-glass)}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.6rem;color:var(--text-primary);cursor:pointer;padding:0.25rem;line-height:1}
.mobile-nav{display:none;flex-direction:column;gap:0;padding:0.5rem 0;border-top:1px solid var(--border-glass);background:rgba(10,12,18,0.98);position:absolute;top:100%;left:0;right:0;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.mobile-nav a{color:var(--text-secondary);text-decoration:none;font-size:0.95rem;padding:0.9rem 1.25rem;border-bottom:1px solid var(--border-glass);display:block;transition:all 0.2s}
.mobile-nav a:hover{color:var(--text-primary);background:var(--surface-glass)}
.breadcrumb{font-size:0.78rem;color:var(--text-muted);margin:0.9rem 0 0;display:flex;flex-wrap:wrap;gap:0.3rem;align-items:center}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-primary)}
.breadcrumb span{opacity:0.5}
@media(max-width:768px){
  nav#mainNav{display:none}
  .mobile-menu-btn{display:block}
}

/* Hero */
.hero{text-align:center;padding:2.25rem 0 1.5rem}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;background:var(--surface-glass);border:1px solid var(--border-glass);border-radius:100px;padding:0.35rem 1rem;font-size:0.76rem;font-weight:500;color:var(--text-secondary);margin-bottom:1.1rem}
h1{font-size:clamp(1.7rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-0.02em;line-height:1.18;margin-bottom:0.7rem}
.tagline{font-size:1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}

/* Tool: input box shared by all tool pages */
.tool-box{background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:24px;padding:1.35rem;max-width:640px;margin:1.5rem auto 1rem;transition:border-color var(--transition-base)}
.tool-box:focus-within{border-color:var(--accent-primary)}
.tool-input{width:100%;background:rgba(0,0,0,0.3);border:1px solid var(--border-glass);border-radius:16px;padding:0.9rem 1.1rem;color:var(--text-primary);font-size:0.98rem;font-family:inherit;margin-bottom:0.9rem}
.tool-input:focus{outline:none;border-color:var(--accent-primary);background:rgba(0,0,0,0.45)}
.tool-input::placeholder{color:var(--text-muted)}
.format-row{display:flex;gap:0.65rem;margin-bottom:0.9rem;align-items:center;flex-wrap:wrap;justify-content:center}
.format-toggle{display:flex;background:rgba(0,0,0,0.3);border:1px solid var(--border-glass);border-radius:14px;overflow:hidden}
.format-toggle button{padding:0.6rem 1.1rem;background:transparent;border:none;color:var(--text-secondary);font-size:0.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);font-family:inherit}
.format-toggle button.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff}
.quality-select{background:rgba(0,0,0,0.3);border:1px solid var(--border-glass);border-radius:14px;padding:0.6rem 1rem;color:var(--text-primary);font-size:0.85rem;font-family:inherit;cursor:pointer}
.quality-select:focus{outline:none;border-color:var(--accent-primary)}
.cta-btn{width:100%;padding:0.9rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;border-radius:16px;font-weight:700;font-size:0.98rem;cursor:pointer;transition:all 0.25s;font-family:inherit}
.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.cta-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}

#loadingDiv,#uniLoadingDiv{text-align:center;padding:1.75rem;display:none}
.spinner{border:2px solid var(--border-glass);border-top:2px solid var(--accent-primary);border-radius:50%;width:34px;height:34px;animation:nobsdl-spin 1s linear infinite;margin:0 auto 0.9rem}
@keyframes nobsdl-spin{to{transform:rotate(360deg)}}
#dlProgressIcon.progress-icon-active{display:inline-block;animation:nobsdl-spin 0.9s linear infinite}

/* Format-list result cards */
#videoInfoSection,#uniInfoSection{display:none;background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:24px;padding:1.35rem;max-width:640px;margin:1rem auto}
#videoDLThumbnail,#uniThumbnail{width:100%;max-width:340px;border-radius:14px;margin-bottom:0.9rem;border:1px solid var(--border-glass);display:block}
#videoDLTitle,#uniTitle{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:0.3rem;word-break:break-word}
#videoDLMeta,#uniMeta{font-size:0.78rem;color:var(--text-muted);margin-bottom:1.1rem}
#videoInfoSection h3,#uniInfoSection h3{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent-primary);margin-bottom:0.65rem}
.format-list{display:flex;flex-direction:column;gap:0.5rem}
.format-download-btn{background:rgba(0,0,0,0.25);border:1px solid var(--border-glass);border-radius:12px;padding:0.75rem 0.9rem;color:var(--text-primary);cursor:pointer;font-weight:600;font-size:0.86rem;text-align:left;transition:all var(--transition-base);font-family:inherit;width:100%}
.format-download-btn:hover{border-color:var(--accent-primary);background:rgba(99,102,241,0.1)}
.format-download-btn small{display:block;color:var(--text-muted);font-size:0.72rem;font-weight:400;margin-top:0.15rem}
#audioFormatsBtns,#uniAudioFormats{display:flex;align-items:stretch;border:1px solid var(--border-glass);border-radius:14px;overflow:hidden}
#audioFormatsBtns .format-download-btn,#uniAudioFormats .format-download-btn{flex:1;border:none;border-radius:0;text-align:center;background:transparent}
#audioFormatsBtns .format-download-btn:hover,#uniAudioFormats .format-download-btn:hover{background:rgba(99,102,241,0.1)}

/* Download progress overlay */
#dlProgress{display:none;max-width:640px;margin:0 auto 1.25rem;background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:18px;padding:1.15rem 1.3rem}
#dlProgress .dl-row{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.7rem}
#dlProgressIcon{font-size:1.3rem;line-height:1}
#downloadTitle{font-size:0.88rem;font-weight:700;color:var(--text-primary);word-break:break-word}
#downloadFormat{font-size:0.74rem;color:var(--accent-primary)}
.progress-track{background:rgba(255,255,255,0.1);border-radius:100px;height:6px;margin-bottom:0.5rem;overflow:hidden}
#progressBar{height:100%;width:0%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:100px;transition:width 0.3s ease}
#progressText{color:var(--text-secondary);font-size:0.76rem;text-align:center}
#progressExtra{color:var(--text-muted);font-size:0.7rem;text-align:center;margin-top:0.35rem}
#dlThankYou{display:none;max-width:640px;margin:0 auto 1.25rem}

/* Playlist-specific */
#playlistInfoSection{display:none;max-width:760px;margin:1.25rem auto}
.playlist-header{background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:22px;padding:1.25rem;margin-bottom:0.9rem}
.playlist-meta{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.playlist-thumb{width:112px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--border-glass);flex-shrink:0}
.playlist-info h2{font-size:1.05rem;font-weight:700;margin-bottom:0.25rem}
.playlist-info p{font-size:0.8rem;color:var(--text-muted)}
.playlist-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.65rem;margin-top:0.9rem;padding-top:0.9rem;border-top:1px solid var(--border-glass)}
.select-all-btn{background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.3);border-radius:10px;padding:0.45rem 0.9rem;color:var(--accent-primary);font-size:0.8rem;font-weight:600;cursor:pointer}
.select-all-btn:hover{background:rgba(99,102,241,0.2)}
.selected-count{font-size:0.8rem;color:var(--text-muted)}
.download-zip-btn{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:14px;padding:0.7rem 1.35rem;color:#fff;font-size:0.88rem;font-weight:700;cursor:pointer}
.download-zip-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.download-zip-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.track-list{display:flex;flex-direction:column;gap:0.45rem}
.track-item{background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:14px;padding:0.75rem 0.9rem;display:flex;align-items:center;gap:0.75rem;transition:all var(--transition-base);cursor:pointer}
.track-item:hover{border-color:rgba(99,102,241,0.4)}
.track-item.selected{border-color:var(--accent-primary);background:rgba(99,102,241,0.08)}
.track-checkbox{width:17px;height:17px;accent-color:var(--accent-primary);flex-shrink:0;cursor:pointer}
.track-num{font-size:0.72rem;color:var(--text-muted);width:20px;text-align:center;flex-shrink:0}
.track-thumb{width:52px;height:30px;object-fit:cover;border-radius:6px;border:1px solid var(--border-glass);flex-shrink:0}
.track-title{flex:1;font-size:0.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-duration{font-size:0.72rem;color:var(--text-muted);flex-shrink:0}
.tier-gate-note{max-width:640px;margin:0.9rem auto;padding:0.9rem 1rem;border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.07);border-radius:16px;text-align:left;color:var(--text-secondary);font-size:0.84rem;line-height:1.5}
.tier-gate-note strong{display:block;color:var(--text-primary);font-size:0.92rem;margin-bottom:0.3rem}

/* Content sections / articles */
.content-section{background:var(--surface-glass);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:22px;padding:1.6rem;margin:1.5rem 0}
.content-section h2{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.85rem;color:var(--text-primary)}
.content-section h3{font-size:1.02rem;font-weight:700;margin:1.1rem 0 0.5rem;color:var(--text-primary)}
.content-section p{color:var(--text-secondary);margin-bottom:0.9rem}
.content-section strong{color:var(--text-primary);font-weight:600}
.content-section ul,.content-section ol{padding-left:1.2rem;color:var(--text-secondary);margin-bottom:0.9rem}
.content-section li{margin-bottom:0.55rem}
.content-section a{color:var(--accent-primary);text-decoration:none}
.content-section a:hover{text-decoration:underline}
.tier-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.86rem}
.tier-table th,.tier-table td{padding:0.6rem 0.5rem;text-align:left;border-bottom:1px solid var(--border-glass)}
.tier-table th{color:var(--accent-primary);font-weight:600}
.tier-table td{color:var(--text-secondary)}
.tool-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem;margin:1rem 0}
.tool-shortcut-card{background:rgba(0,0,0,0.2);border:1px solid var(--border-glass);border-radius:14px;padding:0.9rem 1rem;text-decoration:none;color:var(--text-primary);transition:all var(--transition-base);display:block}
.tool-shortcut-card:hover{border-color:var(--accent-primary);background:rgba(99,102,241,0.08)}
.tool-shortcut-card strong{display:block;font-size:0.92rem;margin-bottom:0.2rem}
.tool-shortcut-card span{font-size:0.78rem;color:var(--text-muted)}
.platform-row{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin:1rem 0}
.platform-chip{background:rgba(0,0,0,0.25);border:1px solid var(--border-glass);border-radius:100px;padding:0.4rem 0.9rem;font-size:0.8rem;color:var(--text-secondary);text-decoration:none}
.platform-chip:hover{border-color:var(--accent-primary);color:var(--text-primary)}

/* FAQ accordion */
.faq{margin:1rem 0}
.faq-item{background:rgba(0,0,0,0.2);border:1px solid var(--border-glass);border-radius:16px;margin-bottom:0.75rem}
.faq-item.active{border-color:var(--accent-primary);background:rgba(99,102,241,0.05)}
.faq-question{padding:1rem 1.25rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:0.75rem;font-weight:600;color:var(--text-primary);font-size:0.94rem}
.faq-question:hover{color:var(--accent-primary)}
.faq-answer{padding:0 1.25rem 1.15rem;color:var(--text-secondary);font-size:0.9rem;line-height:1.6;display:none}
.faq-item.active .faq-answer{display:block}
.faq-toggle{color:var(--accent-primary);transition:transform var(--transition-base);font-size:0.75rem;flex-shrink:0}
.faq-item.active .faq-toggle{transform:rotate(180deg)}

/* Trust / legal notes */
.nobsdl-legal-note{max-width:900px;margin:1.1rem auto;padding:0.85rem 1rem;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.5);border-radius:14px;color:#cbd5e1;font-size:0.78rem;line-height:1.55}
.nobsdl-legal-note strong{color:#f8fafc}
.nobsdl-legal-note a{color:#a5b4fc;text-decoration:none;font-weight:700}
.nobsdl-legal-note a:hover{text-decoration:underline}

/* Footer */
footer{border-top:1px solid var(--border-glass);padding:2.25rem 0 1.5rem;margin-top:2.5rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-bottom:1.75rem}
.footer-col{display:flex;flex-direction:column;gap:0.5rem;min-width:0}
.footer-col-title{font-size:0.72rem;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.2rem;padding-bottom:0.45rem;border-bottom:1px solid var(--border-glass)}
.footer-col a{color:var(--text-muted);font-size:0.78rem;text-decoration:none;line-height:1.5}
.footer-col a:hover{color:var(--accent-primary)}
.footer-bottom{border-top:1px solid var(--border-glass);padding-top:1.1rem;text-align:center}
.footer-bottom p{color:var(--text-muted);font-size:0.74rem}

/* Simple page wrapper (guides / trust / legal, no tool) */
.page-copy h2{margin-top:1.5rem}

@media(max-width:768px){
  .container{padding:0 1rem}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .content-section{padding:1.25rem;border-radius:18px}
  .content-section h2{font-size:1.1rem}
  .playlist-meta{flex-direction:column}
  .playlist-thumb{width:100%;height:auto;max-height:120px}
  .track-thumb{display:none}
  .hero{padding:1.25rem 0 1rem}
}
@media(max-width:400px){
  .format-row{flex-direction:column;align-items:stretch}
  .format-toggle button{flex:1}
}