/* v236: image, SNS, name, 150-char introduction, channel address in ONE themed hero.
   Only the Melo channel hero is affected: no player, gallery or artist-page overrides. */
#container .mm28-shell .mm236-melo-hero{
 min-height:218px;padding:clamp(18px,2.8vw,32px);
 background:var(--mm-site-gradient,#f4f0fa);
 color:var(--mm-site-text,#25212b);
 border-color:var(--mm-site-line,#e1ddeb);
 margin-bottom:23px;
}
/* Keep the creator-selected palette: darken dark themes for bright text
   while retaining custom banner images at a subtle, readable opacity. */
#container .mm28-shell .mm236-melo-hero.is-dark-skin{
 background-image:linear-gradient(rgba(0,0,0,.27),rgba(0,0,0,.27)),var(--mm-site-gradient,linear-gradient(135deg,#20242c,#11151b));
 color:var(--mm-site-text,#eef0f6);
}
#container .mm236-melo-hero.has-banner .mm28-hero-bg{opacity:.17}
#container .mm236-melo-hero.is-dark-skin.has-banner .mm28-hero-bg{opacity:.12}
#container .mm236-melo-hero .mm28-hero-identity{
 display:grid;grid-template-columns:158px minmax(0,1fr);
 align-items:center;gap:clamp(17px,2.2vw,30px);min-width:0;
}
#container .mm236-melo-hero .mm236-hero-media{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:100%;min-width:0;gap:4px;
}
#container .mm236-melo-hero .mm236-hero-media .mm28-avatar{
 display:block;width:116px;height:116px;max-width:100%;aspect-ratio:1;
 object-fit:cover;margin:0;flex:none;
 border:4px solid var(--mm-site-surface,#fff);border-radius:50%;
 background:var(--mm-site-surface,#fff);
}
#container .mm236-melo-hero .mm236-hero-media .mm232-social-icons{
 display:flex;justify-content:center;align-items:center;gap:3px;flex-wrap:nowrap;
 width:auto;max-width:100%;margin:7px auto 0;min-width:0;
}
#container .mm236-melo-hero .mm236-hero-media .mm232-sns-icon{
 flex:0 0 27px;width:27px;height:24px;min-width:0;
 display:grid;place-items:center;border-radius:7px;
 font-size:13px;line-height:1;margin:0;
 box-shadow:0 1px 2px rgba(20,25,36,.07);
}
#container .mm236-melo-hero .mm236-hero-media .mm232-sns-icon span{line-height:1}
#container .mm236-melo-hero .mm236-hero-copy{min-width:0}
#container .mm236-melo-hero .mm236-hero-copy .mm28-kicker{
 color:var(--mm-site-muted,#726882);margin-bottom:7px;
}
#container .mm236-melo-hero .mm236-hero-copy h1{
 color:var(--mm-site-text,#25212b);
 font-size:clamp(25px,3.35vw,45px);line-height:1.13;
 margin:0 0 13px;letter-spacing:-.04em;overflow-wrap:anywhere;
}
#container .mm236-melo-hero .mm236-hero-copy .mm236-hero-bio{
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
 max-height:5.1em;overflow:hidden;white-space:pre-line;
 color:var(--mm-site-text,#35313d);
 font-size:clamp(12px,1.15vw,15px);line-height:1.7;
 margin:0;overflow-wrap:anywhere;word-break:break-word;
}
#container .mm236-melo-hero .mm236-hero-address{
 padding-top:11px;margin-top:12px;
 border-top:1px solid var(--mm-site-line,rgba(118,102,134,.23));
 display:flex;flex-direction:column;gap:5px;min-width:0;
}
#container .mm236-melo-hero .mm236-hero-address>small{
 font-size:11px;font-weight:740;line-height:1.4;color:var(--mm-site-muted,#767080);
}
#container .mm236-melo-hero .mm236-hero-address-row{
 display:flex;gap:10px;align-items:center;min-width:0;
}
#container .mm236-melo-hero .mm236-hero-address-row>a{
 color:var(--mm-site-text,#302b38);font-size:clamp(11px,1.1vw,13px);
 font-weight:700;line-height:1.55;text-decoration:none;
 overflow-wrap:anywhere;word-break:break-word;min-width:0;flex:1;
}
#container .mm236-melo-hero .mm236-hero-address-row>a:hover{text-decoration:underline}
#container .mm236-melo-hero .mm236-hero-address-row .mm28-pill{
 flex:none;background:var(--mm-site-surface,#fff);
 border-color:var(--mm-site-line,#e0dbea);
 color:var(--mm-site-text,#484153);min-height:30px;padding:4px 9px;font-size:11px;
}
#container .mm236-melo-hero :is(a,button):focus-visible{
 outline:2px solid var(--mm-site-accent,#7564aa);outline-offset:3px;
}
#container .mm236-melo-hero .mm236-address-unavailable{
 color:var(--mm-site-muted,#777);font-size:11px;
}
#container .mm236-bio-caption{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;
 font-size:11px;font-weight:500;color:var(--mm-site-muted,#747985);
}
#container .mm236-bio-caption output{
 font-variant-numeric:tabular-nums;white-space:nowrap;
}
#container .mm236-bio-caption output.is-over{color:#b34156;font-weight:740}
@media(max-width:760px){
 #container .mm28-shell .mm236-melo-hero{padding:22px 18px}
 #container .mm236-melo-hero .mm28-hero-identity{
   grid-template-columns:142px minmax(0,1fr);gap:15px;align-items:center;
 }
 #container .mm236-melo-hero .mm236-hero-media .mm28-avatar{width:98px;height:98px;border-width:3px}
 #container .mm236-melo-hero .mm236-hero-media .mm232-sns-icon{width:24px;height:22px;flex-basis:24px;font-size:12px}
 #container .mm236-melo-hero .mm236-hero-copy h1{font-size:clamp(23px,4.2vw,32px)}
}
@media(max-width:480px){
 #container .mm28-shell .mm236-melo-hero{min-height:195px;padding:17px 13px;border-radius:18px}
 #container .mm236-melo-hero .mm28-hero-identity{
   grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;
 }
 #container .mm236-melo-hero .mm236-hero-media .mm28-avatar{width:77px;height:77px;border-width:3px}
 #container .mm236-melo-hero .mm236-hero-media .mm232-social-icons{gap:2px;margin-top:5px}
 #container .mm236-melo-hero .mm236-hero-media .mm232-sns-icon{
   flex-basis:20px;width:20px;height:20px;font-size:10px;border-radius:5px
 }
 #container .mm236-melo-hero .mm236-hero-copy .mm28-kicker{font-size:9px;margin-bottom:4px}
 #container .mm236-melo-hero .mm236-hero-copy h1{font-size:23px;margin:0 0 8px}
 #container .mm236-melo-hero .mm236-hero-copy .mm236-hero-bio{
   font-size:12px;line-height:1.55;max-height:4.65em;
 }
 #container .mm236-melo-hero .mm236-hero-address{margin-top:9px;padding-top:8px}
 #container .mm236-melo-hero .mm236-hero-address-row{flex-wrap:wrap;gap:7px}
 #container .mm236-melo-hero .mm236-hero-address-row>a{flex-basis:100%;font-size:11px}
}

/* Stage 1 finishing pass (2026-10-14): consistent banner spacing and narrow-screen layout.
   Scoped strictly to Melo channel hero; playback, playlists and other pages untouched. */
#container .mm236-melo-hero .mm28-hero-identity{position:relative;z-index:1}
#container .mm236-melo-hero .mm236-hero-copy{
 display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;
}
#container .mm236-melo-hero .mm236-hero-media .mm232-social-icons{
 row-gap:5px;flex-wrap:wrap;max-width:100%;justify-content:center;
}
#container .mm236-melo-hero .mm236-hero-copy h1{
 max-width:100%;text-wrap:pretty;
}
#container .mm236-melo-hero .mm236-hero-address-row>a{
 overflow-wrap:anywhere;word-break:break-word;
}
#container .mm236-melo-hero .mm236-hero-address-row .mm28-pill{
 white-space:nowrap;min-width:44px;
}
@media(max-width:480px){
 #container .mm28-shell .mm236-melo-hero{
  padding:20px 17px;min-height:0;
 }
 #container .mm236-melo-hero .mm28-hero-identity{
  grid-template-columns:minmax(0,1fr);gap:15px;justify-items:stretch;
 }
 #container .mm236-melo-hero .mm236-hero-media{
  gap:4px;align-items:center;
 }
 #container .mm236-melo-hero .mm236-hero-media .mm28-avatar{
  width:88px;height:88px;
 }
 #container .mm236-melo-hero .mm236-hero-media .mm232-social-icons{
  margin-top:6px;gap:5px;max-width:100%;
 }
 #container .mm236-melo-hero .mm236-hero-media .mm232-sns-icon{
  flex-basis:25px;width:25px;height:24px;font-size:12px;
 }
 #container .mm236-melo-hero .mm236-hero-copy{
  width:100%;align-items:center;text-align:center;
 }
 #container .mm236-melo-hero .mm236-hero-copy .mm28-kicker{
  margin-bottom:5px;
 }
 #container .mm236-melo-hero .mm236-hero-copy h1{
  font-size:clamp(22px,6vw,28px);line-height:1.24;margin-bottom:9px;
 }
 #container .mm236-melo-hero .mm236-hero-copy .mm236-hero-bio{
  width:100%;font-size:12px;line-height:1.6;
  max-height:4.8em;overflow-wrap:anywhere;
 }
 #container .mm236-melo-hero .mm236-hero-address{
  width:100%;align-items:stretch;text-align:left;margin-top:13px;padding-top:12px;
 }
 #container .mm236-melo-hero .mm236-hero-address-row{
  flex-wrap:nowrap;align-items:center;gap:7px;
 }
 #container .mm236-melo-hero .mm236-hero-address-row>a{
  flex:1 1 auto;min-width:0;font-size:11px;
 }
 #container .mm236-melo-hero .mm236-hero-address-row .mm28-pill{
  flex:0 0 auto;min-height:30px;
 }
}

/* v245 channel totals and playlist likes */
#container .mm236-melo-hero .mm245-channel-total{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px;font-size:17px;font-weight:780;color:var(--mm-site-text,#30353e)}
#container .mm236-melo-hero .mm245-channel-total small{font-size:11px;font-weight:560;color:var(--mm-site-muted,#727985)}
#container .mm28-list-heading .mm245-list-like{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;margin-left:auto;min-width:52px;min-height:34px;padding:6px 9px;border:1px solid var(--mm-site-line,#dce0e7);border-radius:10px;background:transparent;color:var(--mm-site-muted,#657083);font:700 12px/1.2 system-ui,sans-serif;cursor:pointer}
#container .mm28-list-heading .mm245-list-like.is-liked{color:#b83d63;background:#fff0f4;border-color:#f0c4d1}

/* v250: only the aggregate heart uses the existing liked-heart pink. */
#container .mm236-melo-hero .mm250-like-heart{color:#b83d63}
