/* Band keeps its native left-hand logo, red form action and compact reading width.
   These rules style owned UI only, never ad elements or provider frames. */
.ym-band {
  --ym-surface:#fff; --ym-soft:#f5f5f5; --ym-text:#494949; --ym-heading:#292929;
  --ym-muted:#626262; --ym-border:#dfdfdf; --ym-red:#c62222; --ym-red-hover:#a91919;
  --ym-tint:#fff5f5; --ym-focus:#b21b1b; --ym-mark:#b51d1d;
}
html[data-ym-theme="dark"] .ym-band {
  --canvas:#141414; --surface:#202020; --text:#d7d7d7; --heading:#f0f0f0; --muted:#b8b8b8; --line:#414141;
  --ym-surface:#202020; --ym-soft:#282828; --ym-text:#d7d7d7; --ym-heading:#f0f0f0;
  --ym-muted:#b8b8b8; --ym-border:#414141; --ym-tint:#342121; --ym-focus:#ff9b9b; --ym-mark:#ff9b9b;
  color-scheme:dark;
}
.ym-band .ym-icon { width:20px; height:20px; display:block; flex:none; }
.ym-band #header { height:auto; background:#121212; position:relative; z-index:10; }
.ym-band .header-inner { width:calc(100% - 32px); max-width:600px; padding:16px 0 8px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 16px; }
.ym-band #logo { justify-self:start; min-width:0; }
.ym-band #logo img { width:184px; max-height:44px; }
.ym-band .primary-nav { grid-column:1/-1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; white-space:normal; border-top:1px solid #333; padding-top:6px; }
.ym-band .primary-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:4px; color:#d3d3d3; font-size:13px; line-height:18px; text-align:center; border-radius:5px; }
.ym-band .primary-nav a:hover,.ym-band .primary-nav a:focus-visible { background:#272727; color:#fff; }
.ym-header-actions { display:flex; align-items:center; gap:8px; min-width:0; position:relative; z-index:30; }
.ym-language { position:relative; font-size:13px; color:#f5f5f5; }
.ym-language summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 10px; border:1px solid #4d4d4d; border-radius:6px; background:#202020; cursor:pointer; list-style:none; }
.ym-language summary::-webkit-details-marker { display:none; }
.ym-language summary>span { max-width:146px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ym-language summary::after { content:""; width:6px; height:6px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.ym-language[open] summary::after { transform:translateY(2px) rotate(225deg); }
.ym-language-menu { position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; width:244px; max-width:calc(100vw - 24px); max-height:360px; max-height:min(60vh,420px); overflow:auto; overscroll-behavior:contain; padding:6px; border:1px solid var(--ym-border); border-radius:8px; background:var(--ym-surface); box-shadow:0 14px 32px #0003; }
.ym-language-menu a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:6px 10px; color:var(--ym-heading); border-radius:5px; text-decoration:none; }
.ym-language-menu a:hover,.ym-language-menu a[aria-current="page"] { background:var(--ym-tint); }
.ym-language-menu a[aria-current="page"] { font-weight:700; box-shadow:inset 3px 0 #d62828; }
.ym-language-code { color:var(--ym-muted); font-size:10px; letter-spacing:.04em; }
.ym-theme-toggle { display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0; color:#f5f5f5; background:#202020; border:1px solid #4d4d4d; border-radius:6px; cursor:pointer; }
.ym-language summary:hover,.ym-theme-toggle:hover { background:#303030; }
.ym-sun { display:none!important; }
html[data-ym-theme="dark"] .ym-sun { display:block!important; }
html[data-ym-theme="dark"] .ym-moon { display:none!important; }
.ym-band .ym-search { width:calc(100% - 32px); max-width:600px; margin:24px auto 0; }
.ym-band .ym-search .form__title label { white-space:normal; overflow:visible; line-height:1.45; }
.ym-band .ym-search input[type="text"] { padding-inline:44px 48px; color:var(--ym-heading); background:var(--ym-soft); }
.ym-band .ym-search input[type="text"]::placeholder { color:var(--ym-muted); opacity:1; }
.ym-band .ym-search .input__icon { left:auto; inset-inline-start:14px; }
.ym-band .ym-search .suggest-results { background:var(--ym-surface); color:var(--ym-text); }
.ym-band .ym-search .suggest-results li:hover,.ym-band .ym-search .suggest-results li.active { background:var(--ym-soft); }
.ym-band .ym-search input[type="submit"] { max-width:65%; white-space:normal; line-height:18px; }
.ym-band .ym-search .format-support { color:var(--ym-muted); }
.ym-band .format-support::before { margin-right:0; margin-inline-end:9px; }
.ym-paste { position:absolute; inset-inline-end:3px; top:3px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ym-muted); cursor:pointer; }
.ym-paste:hover { color:var(--ym-mark); background:var(--ym-tint); }
.ym-paste:disabled { cursor:wait; opacity:.5; }
.ym-band .ym-search .ym-form-status { margin:0; color:var(--ym-muted); font-size:13px; line-height:20px; }
.ym-form-status:empty { display:none; }
.ym-band #text.ym-content,.ym-band.route-blog #text { width:calc(100% - 32px); max-width:600px; margin:40px auto; }
.ym-band #text.ym-content { color:var(--ym-text); }
.ym-band #text .ym-intro h1 { text-align:center; font-size:28px; line-height:1.3; margin:0 0 18px; }
.ym-band #text.ym-content p { text-align:start; font-size:15px; line-height:1.75; }
.ym-intro p a { font-weight:700; color:var(--ym-heading); text-decoration-color:#d62828; }
.ym-section,.ym-article { margin-top:36px; }
.ym-band #text .ym-section>h2,.ym-band #text .ym-article>h2 { margin:0 0 14px; font-size:22px; line-height:1.35; }
.ym-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ym-band #text .ym-section-heading h2 { margin:0; font-size:22px; line-height:1.35; }
.ym-section-heading>.ym-icon { color:#d62828; }
.ym-section-heading>a { color:var(--ym-heading); font-size:13px; line-height:1.5; flex:none; }
.ym-trending { border-top:2px solid #d62828; padding-top:20px; }
.ym-band #text .ym-song-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ym-band #text .ym-song { margin:0; display:flex; align-items:center; gap:12px; padding:12px; min-width:0; border:1px solid var(--ym-border); border-radius:7px; background:var(--ym-surface); }
.ym-song-image { width:52px; height:52px; display:block; object-fit:cover; flex:none; border-radius:5px; background:var(--ym-soft); }
.ym-song-copy { flex:1; min-width:0; }
.ym-song-title { display:block; color:var(--ym-heading); font-weight:700; font-size:14px; line-height:1.45; text-decoration:none; overflow-wrap:anywhere; }
a.ym-song-title:hover { text-decoration:underline; }
.ym-song-artist { display:block; margin-top:3px; color:var(--ym-muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.ym-download,.ym-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border:1px solid transparent; border-radius:5px; background:var(--ym-red); color:#fff; font:700 12px/1.4 Arial,Helvetica,sans-serif; text-decoration:none; cursor:pointer; }
.ym-download { flex:none; max-width:45%; }
.ym-download .ym-icon { width:17px; height:17px; }
.ym-download:hover,.ym-button:hover { background:var(--ym-red-hover); }
.ym-download:active,.ym-button:active { background:#921313; }
.ym-button--secondary { margin-top:12px; color:var(--ym-heading); border-color:var(--ym-border); background:var(--ym-surface); }
.ym-button--secondary:hover { background:var(--ym-soft); }
.ym-button[hidden] { display:none; }
.ym-band #text .ym-chart-status,.ym-band #text .ym-related-status { margin:0 0 14px; color:var(--ym-muted); font-size:14px; line-height:1.6; }
.ym-related { border-top:2px solid #d62828; padding-top:20px; }
.ym-related-form { flex:none; max-width:45%; margin:0; }
.ym-related-form .ym-download { max-width:100%; }
.ym-howto { padding:22px; background:var(--ym-surface); border:1px solid var(--ym-border); border-radius:8px; }
.ym-band #text .ym-steps { list-style:none; counter-reset:ym-step; padding:0; margin:20px 0 0; }
.ym-band #text .ym-step { counter-increment:ym-step; position:relative; margin:0; padding:0 0 22px; }
.ym-band #text .ym-step+.ym-step { border-top:1px solid var(--ym-border); padding-top:22px; }
.ym-band #text .ym-step:last-child { padding-bottom:0; }
.ym-step-copy { padding-inline-start:42px; }
.ym-step-copy::before { content:counter(ym-step,decimal-leading-zero); position:absolute; inset-inline-start:0; color:var(--ym-mark); font-size:15px; font-weight:700; line-height:24px; font-variant-numeric:tabular-nums; }
.ym-band #text .ym-step h3 { margin:0; font-size:16px; line-height:24px; }
.ym-band #text .ym-step p { margin:7px 0 0; font-size:14px; line-height:1.65; }
.ym-step-preview { margin:16px 0 0; padding:10px; border:1px solid #e0e0e0; border-radius:6px; background:#fff; }
.ym-step-preview img { display:block; max-width:100%; width:auto; height:auto; margin:0 auto; border-radius:3px; }
.ym-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.ym-feature { min-width:0; padding:18px 14px; border-top:3px solid #d62828; background:var(--ym-surface); box-shadow:0 3px 12px #00000008; }
.ym-feature-icon { display:inline-flex; padding:9px; color:var(--ym-mark); background:var(--ym-tint); border-radius:5px; }
.ym-band #text .ym-feature h3 { margin:13px 0 0; font-size:15px; line-height:1.5; }
.ym-band #text .ym-feature p { margin:8px 0 0; font-size:14px; line-height:1.65; }
.ym-faq { border-bottom:1px solid var(--ym-border); }
.ym-faq summary { position:relative; min-height:48px; padding:15px 30px 15px 0; padding-inline:0 30px; font-size:15px; line-height:1.5; font-weight:700; color:var(--ym-heading); cursor:pointer; list-style:none; }
.ym-faq summary::-webkit-details-marker { display:none; }
.ym-faq summary::after { content:"+"; position:absolute; inset-inline-end:3px; top:13px; color:var(--ym-mark); font-size:21px; font-weight:400; }
.ym-faq[open] summary::after { content:"−"; }
.ym-band #text .ym-faq p { margin:0; padding:0 0 18px; }
.ym-band #text .ym-service-links { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; }
.ym-band #text .ym-service-links li { margin:0; }
.ym-service-links a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:12px; border:1px solid var(--ym-border); border-radius:6px; background:var(--ym-surface); color:var(--ym-heading); font-size:14px; font-weight:700; text-decoration:none; }
.ym-service-links a:hover { border-color:#d62828; }
.ym-service-links .ym-icon { width:16px; height:16px; color:#d62828; }
.ym-latest { padding-top:22px; border-top:2px solid var(--ym-border); }
.ym-blog-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.ym-blog-card { overflow:hidden; border:1px solid var(--ym-border); border-radius:8px; background:var(--ym-surface); }
.ym-blog-link { display:grid; grid-template-columns:minmax(0,43%) minmax(0,1fr); color:var(--ym-heading); text-decoration:none; }
.ym-blog-link>img { width:100%; height:100%; min-height:156px; object-fit:cover; aspect-ratio:16/9; background:var(--ym-soft); }
.ym-blog-card-body { padding:18px; min-width:0; }
.ym-read-time { color:var(--ym-muted); font-size:12px; line-height:1.5; }
.ym-band #text .ym-blog-card h3 { color:var(--ym-heading); font-size:17px; line-height:1.45; margin:9px 0 16px; }
.ym-blog-read { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ym-heading); }
.ym-blog-read .ym-icon { width:16px; height:16px; color:#d62828; }
.ym-blog-link:hover h3 { text-decoration:underline; text-decoration-color:#d62828; }
.ym-band .ym-blog-shell .topic-card,.ym-band .ym-blog-shell .article-card,.ym-band .article-toc,.ym-band .article-faq details { background:var(--ym-surface); }
.ym-band .ym-blog-shell .blog-hero h1 { font-size:34px!important; }
.ym-band .eyebrow { color:var(--ym-mark)!important; }
.ym-band .ym-blog-shell .topic-grid { grid-template-columns:1fr; }
.ym-band .ym-blog-shell .breadcrumbs { flex-wrap:wrap; overflow:visible; }
.ym-band .ym-blog-shell .breadcrumbs [aria-current="page"] { white-space:normal; overflow-wrap:anywhere; }
.ym-band #text .ym-article-featured { margin:24px 0; }
.ym-article-featured img { display:block; width:100%; height:auto; border-radius:8px; }
.ym-band #text .article-body h1 { font-size:32px; line-height:1.25; margin:0 0 22px; }
.ym-band .article-responsibility { color:var(--ym-text); background:var(--ym-tint); border-color:var(--ym-border); }
.ym-band .site-footer { background:var(--ym-surface); }
.ym-tool-label { display:inline-block; margin-bottom:12px; padding:5px 9px; font-size:11px; line-height:18px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--ym-border); border-radius:4px; color:var(--ym-muted); }
.ym-tool-page .ym-intro { border-top:3px solid #d62828; padding-top:22px; }
.ym-tool-page--mp3juice .ym-intro { border-top-style:double; border-top-width:6px; }
.ym-tool-page--mp3juice .ym-feature { border-top:0; border-inline-start:3px solid #d62828; }
.ym-tool-page--ytmp3 .ym-intro { padding:22px; background:var(--ym-surface); border:1px solid var(--ym-border); border-inline-start:4px solid #d62828; border-radius:7px; }
.ym-tool-page--ytmp3 .ym-features { grid-template-columns:1fr; }
.ym-tool-page--tubidy .ym-intro { border:0; border-bottom:2px solid #d62828; padding-bottom:20px; }
.ym-tool-page--tubidy .ym-song { border-inline-start:3px solid #d62828!important; }
.ym-tool-page--youtube-to-mp3 .ym-howto { border-radius:0; border-inline-start:3px solid #d62828; }
.ym-tool-page--youtube-to-mp4 .ym-intro { border-radius:8px; padding:22px; background:var(--ym-tint); }
.ym-tool-page--youtube-downloader .ym-feature { border-top:0; border-bottom:3px solid #d62828; }
.ym-language summary:focus-visible,.ym-language-menu a:focus-visible,.ym-theme-toggle:focus-visible,.ym-paste:focus-visible,.ym-search input:focus-visible,.ym-band .primary-nav a:focus-visible,.ym-content a:focus-visible,.ym-content summary:focus-visible,.ym-download:focus-visible,.ym-button:focus-visible,.ym-blog-link:focus-visible { outline:2px solid var(--ym-focus); outline-offset:3px; }
.ym-language summary:focus-visible,.ym-theme-toggle:focus-visible,.ym-band .primary-nav a:focus-visible { outline-color:#ff9b9b; }
[dir="rtl"] .ym-step { text-align:right; }
[dir="rtl"] .ym-language-menu a[aria-current="page"] { box-shadow:inset -3px 0 #d62828; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .ym-download,.ym-button,.ym-theme-toggle,.ym-language summary { transition:background-color .15s ease; }
  .ym-blog-card,.ym-service-links a { transition:border-color .15s ease; }
}
@media (max-width:520px) {
  .ym-band #logo img { width:144px; }
  .ym-language summary>span { max-width:90px; }
  .ym-band .primary-nav { gap:4px; }
  .ym-band .primary-nav a { font-size:12px; line-height:16px; }
  .ym-features { grid-template-columns:1fr; }
  .ym-feature { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; padding:16px; border-top:0; border-inline-start:3px solid #d62828; }
  .ym-feature-icon { grid-row:1/3; align-self:start; }
  .ym-band #text .ym-feature h3 { margin:0; }
  .ym-blog-link { grid-template-columns:1fr; }
  .ym-blog-link>img { height:auto; min-height:0; }
  .ym-related .ym-song { flex-wrap:wrap; }
  .ym-related .ym-song-copy { flex-basis:calc(100% - 64px); }
  .ym-related-form { width:100%; max-width:none; padding-inline-start:64px; }
  .ym-related-form .ym-download { width:100%; }
}
@media (max-width:380px) {
  .ym-band #logo img { width:116px; }
  .ym-band .header-inner { column-gap:8px; }
  .ym-language summary { gap:7px; padding:0 8px; }
  .ym-language summary>span { max-width:70px; }
  .ym-band .ym-search { padding:18px; }
  .ym-band .ym-search input[type="text"] { padding-inline-start:36px; }
  .ym-band .ym-search .input__icon { inset-inline-start:11px; width:16px; }
  .ym-band #text .ym-song { gap:8px; padding:10px; }
  .ym-song-image { width:42px; height:42px; }
  .ym-download { gap:5px; padding:9px 8px; font-size:11px; }
  .ym-download .ym-icon { width:15px; height:15px; }
  .ym-howto { padding:18px; }
  .ym-section-heading { align-items:flex-start; }
  .ym-section-heading>a { max-width:35%; }
  .ym-service-links { grid-template-columns:1fr!important; }
}
