@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@500;700&display=swap');

:root {
  color-scheme: dark;
  --ink:#0b0d0c;
  --lime:#c4d96e;
  --lime-logo:#d4f944;
  --scrollbar-size:6px;
  --scrollbar-track:transparent;
  --scrollbar-thumb:rgba(242,244,237,.18);
  --scrollbar-thumb-hover:rgba(196,217,110,.42);
  --modal-border:1px solid rgba(255,255,255,.18);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; max-width:100%; overflow-x:hidden; overflow-x:clip; }
body { margin:0; background:#0b0d0c; color:#f2f4ed; font-family:'DM Sans',sans-serif; max-width:100%; overflow-x:hidden; overflow-x:clip; }
html, body, * {
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width:var(--scrollbar-size); height:var(--scrollbar-size); }
*::-webkit-scrollbar-track { background:var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border-radius:999px;
  border:1px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); background-clip:padding-box; }
*::-webkit-scrollbar-corner { background:transparent; }
.site-logo-img { display:block; object-fit:cover; background:#d4f944; flex-shrink:0; border-radius:8px; overflow:hidden; }
.site-logo-mark { background:#d4f944; color:#151515; }
.site-logo-word { color:#d4f944; }
i[data-lucide] { display:inline-block; width:1em; height:1em; vertical-align:middle; }
button, input { font:inherit; }
button { cursor:pointer; }
.font-mono { font-family:'IBM Plex Mono',monospace !important; }
.text-stroke { color:transparent; -webkit-text-stroke:1.5px rgba(242,244,237,.7); }
.gemboard-expand { color:#6f746d; }
.gemboard-expand [data-acronym] { font-size:1.12em; }
.gemboard-expand [data-acronym="g"] { color:#ff4d6d; }
.gemboard-expand [data-acronym="e"] { color:#ff8c3a; }
.gemboard-expand [data-acronym="m"] { color:#ffd400; }
.gemboard-expand [data-acronym="b"] { color:#5ee06a; }
.gemboard-expand [data-acronym="o"] { color:#2ee0d0; }
.gemboard-expand [data-acronym="a"] { color:#3d9fff; }
.gemboard-expand [data-acronym="r"] { color:#7b6cff; }
.gemboard-expand [data-acronym="d"] { color:#e056fd; }
.hero-shade { background:linear-gradient(90deg,rgba(5,6,5,.9) 0%,rgba(5,6,5,.45) 48%,rgba(5,6,5,.08) 100%),linear-gradient(0deg,rgba(5,6,5,.88) 0%,transparent 60%); }
.hero-rank { color:rgba(255,255,255,.03); -webkit-text-stroke:1.5px rgba(255,255,255,.8); }
.main-chart-shade { background:linear-gradient(0deg,rgba(7,9,7,.78) 0%,rgba(7,9,7,.16) 38%,transparent 62%); }
.rank-mark { display:inline-flex; align-items:center; gap:5px; line-height:1; color:#f0c85a; }
.rank-mark em { font-style:normal; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:900; letter-spacing:-.06em; line-height:1; }
.rank-mark svg { display:block; flex-shrink:0; filter:drop-shadow(0 0 8px color-mix(in srgb, currentColor 65%, transparent)); }
.rank-mark.is-gold { color:#f0c85a; }
.rank-mark.is-silver { color:#d7dde8; }
.rank-mark.is-bronze { color:#e0a36a; }
.rank-mark.is-lead { gap:8px; }
.rank-mark.is-lead svg { width:38px; height:38px; }
.rank-mark.is-lead em { font-size:2.6rem; letter-spacing:-.08em; }
.rank-mark.is-lg { flex-direction:column; align-items:flex-start; gap:2px; }
.rank-mark.is-lg svg { width:22px; height:22px; }
.rank-mark.is-lg em { font-size:1.15rem; }
.rank-mark.is-md { flex-direction:column; align-items:flex-start; gap:1px; }
.rank-mark.is-md svg { width:16px; height:16px; }
.rank-mark.is-md em { font-size:11px; }
.rank-mark.is-sm { flex-direction:column; align-items:flex-start; gap:1px; }
.rank-mark.is-sm svg { width:14px; height:14px; }
.rank-mark.is-sm em { font-size:10px; }
.rank-mark.is-inline { gap:4px; }
.rank-mark.is-inline svg { width:14px; height:14px; }
.rank-mark.is-inline em { font-size:11px; }
.featured-shade { background:linear-gradient(0deg,rgba(7,9,7,.72) 0%,rgba(7,9,7,.18) 42%,transparent 68%); }
[data-featured-slider] { min-width:0; max-width:100%; overflow:hidden; }
.featured-slider { overflow:hidden; width:100%; max-width:100%; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-drag:none; }
.featured-slider.is-dragging { cursor:grabbing; touch-action:none; }
.featured-slider img, .featured-slider a { -webkit-user-drag:none; user-select:none; }
.featured-slider img { pointer-events:none; }
.featured-slider .track-trigger { cursor:grab; }
.featured-slider.is-dragging .track-trigger { cursor:grabbing; }
.featured-track { display:flex; width:100%; max-width:100%; min-width:0; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.featured-track.is-dragging { transition:none; }
.featured-page { flex:0 0 100%; width:100%; max-width:100%; min-width:0; }
.featured-card-title .track-link,
.home-newest-grid .track-link {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.featured-arrow { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(11,13,12,.62); color:#fff; backdrop-filter:blur(8px); transform:translateY(-50%); }
.featured-arrow:hover { border-color:rgba(196,217,110,.45); color:#c4d96e; }
.featured-arrow.is-prev { left:10px; }
.featured-arrow.is-next { right:10px; }
.featured-dots { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; }
.featured-dot { width:7px; height:7px; border:0; border-radius:999px; background:rgba(255,255,255,.22); transition:width .2s ease,background .2s ease; }
.featured-dot.is-active { width:22px; background:#c4d96e; }
.chart-hint { position:relative; display:inline-flex; align-items:center; }
.chart-hint-button { display:grid; place-items:center; width:18px; height:18px; border:0; border-radius:999px; color:#7f847c; background:transparent; }
.chart-hint-button:hover, .chart-hint.is-open .chart-hint-button { color:#c4d96e; }
.chart-hint-layer { position:absolute; left:0; top:calc(100% + 8px); z-index:30; width:max-content; max-width:228px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#151815; box-shadow:0 14px 36px rgba(0,0,0,.48); color:#d8ddd4; font-size:12px; font-weight:600; line-height:1.55; letter-spacing:-.01em; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .15s ease,transform .15s ease; }
.chart-hint-layer.is-wide { max-width:320px; }
.chart-hint-layer.is-wide > span + span { margin-top:8px; }
.chart-hint:hover .chart-hint-layer, .chart-hint.is-open .chart-hint-layer { opacity:1; pointer-events:auto; transform:none; }
.home-hero { display:flex; flex-direction:column; justify-content:space-between; gap:0.75rem; }
.home-charts-split { display:grid; align-items:stretch; gap:1rem; }
.home-category-grid { display:grid; gap:1.25rem; }
.home-newest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:0.75rem; row-gap:1.75rem; }
.home-newest-more { display:flex; width:100%; align-items:center; justify-content:center; gap:0.5rem; margin-top:1.75rem; padding:0.7rem 1rem; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:#121512; color:#a9ada5; font-size:10px; font-weight:900; letter-spacing:.14em; cursor:pointer; }
.home-newest-more:hover { border-color:#c4d96e; color:#c4d96e; }
.home-newest-more:disabled { opacity:.55; cursor:wait; }
.home-newest-more[hidden] { display:none; }
.channel-tracks-more { display:flex; width:100%; align-items:center; justify-content:center; gap:0.5rem; margin-top:1.25rem; padding:0.7rem 1rem; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:#121412; color:#a9ada5; font-size:10px; font-weight:900; letter-spacing:.14em; cursor:pointer; }
.channel-tracks-more:hover { border-color:#ff9ac1; color:#ff9ac1; }
.channel-tracks-more:disabled { opacity:.55; cursor:wait; }
.channel-tracks-more[hidden] { display:none; }
.channel-tracks-more em { padding:2px 6px; border-radius:6px; background:rgba(255,154,193,.12); color:#ff9ac1; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:8px; font-style:normal; letter-spacing:0; }
.home-featured-grid { row-gap:8px; column-gap:1rem; }
.home-featured-grid #featured-title > div,
.home-featured-grid #channel-title > div { margin-bottom:0; }
.home-sponsor-rotator { position:relative; flex:0 0 auto; overflow:hidden; aspect-ratio:5 / 1; background:#101210; }
.home-sponsor-banner { position:absolute; inset:0; display:block; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.home-sponsor-banner.is-active { z-index:1; opacity:1; pointer-events:auto; }
.home-sponsor-banner img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (prefers-reduced-motion:reduce) {
  .home-sponsor-banner { transition:none; }
}
.channel-verify-banner { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; margin:0 0 14px; padding:0; border:0; background:transparent; color:#e8ece4; text-align:left; appearance:none; cursor:pointer; }
.channel-verify-banner[hidden] { display:none !important; }
.channel-verify-banner:hover { color:#fff; }
.channel-verify-banner-kicker { color:#ff9ac1; font-size:13px; font-weight:800; letter-spacing:-.02em; line-height:1.35; }
.channel-verify-banner-line { display:inline-flex; align-items:center; gap:8px; }
.channel-verify-banner-text { font-size:13px; font-weight:700; letter-spacing:-.02em; line-height:1.35; }
.channel-verify-banner-go { display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; }
.channel-verify-lead { margin:14px 0 0; color:#d7ddd4; font-size:14px; font-weight:600; line-height:1.7; }
.channel-verify-points { display:flex; flex-direction:column; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.channel-verify-points li { display:flex; align-items:flex-start; gap:10px; color:#c5cac0; font-size:13px; font-weight:600; line-height:1.6; }
.channel-verify-points svg { flex:none; margin-top:2px; color:#c4d96e; }
.channel-verify-cta-copy { margin:18px 0 0; color:#f2f4ed; font-size:14px; font-weight:800; letter-spacing:-.02em; }
.channel-verify-actions { margin-top:18px; }
.channel-verify-actions .member-submit,
.google-signin-btn { width:100%; }
.channel-registration-modal { z-index:120; }
.channel-verification-confirm-modal { z-index:130; }
.channel-verification-notice-modal { z-index:130; }
.channel-verification-confirm-target { display:flex; align-items:center; gap:10px; min-height:58px; margin:16px 0; padding:10px; border-radius:14px; background:rgba(255,255,255,.05); }
.channel-verification-confirm-target img { width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover; background:#0c0f0d; }
.channel-verification-confirm-fallback { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; background:#0c0f0d; color:#c4d96e; }
.channel-verification-confirm-target > div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.channel-verification-confirm-target strong { overflow:hidden; color:#f2f4ed; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.channel-verification-confirm-target span { overflow:hidden; color:#8a8f87; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.channel-verification-confirm-copy { margin:0; color:#cbd0c7; font-size:13px; font-weight:600; line-height:1.7; }
.channel-verification-confirm-question { margin:16px 0 0; color:#f2f4ed; font-size:14px; font-weight:800; }
.channel-verification-confirm-actions { display:flex; gap:8px; margin-top:18px; }
.channel-verification-confirm-actions .member-submit { flex:1; }
.channel-verification-notice-copy { margin:16px 0; color:#cbd0c7; font-size:14px; font-weight:600; line-height:1.65; }
.channel-registration-dialog { overflow:hidden; }
.channel-registration-lead { margin:14px 0 0; color:#cbd0c7; font-size:13px; font-weight:600; line-height:1.65; }
.channel-registration-progress { position:relative; height:8px; margin-top:18px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.channel-registration-progress > span { display:block; width:8%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#c4d96e,#ff9ac1); box-shadow:0 0 18px rgba(196,217,110,.28); transition:width .35s ease; }
.channel-registration-progress.is-checking > span { width:42% !important; animation:channel-registration-scan 1.35s ease-in-out infinite; }
@keyframes channel-registration-scan { 0% { transform:translateX(-115%); } 55%,100% { transform:translateX(240%); } }
@media (prefers-reduced-motion:reduce) { .channel-registration-progress.is-checking > span { width:58% !important; animation:none; transform:none; } }
.channel-registration-progress-text { margin:9px 0 0; color:#858b82; font-size:11px; font-weight:700; line-height:1.5; }
.channel-registration-results { display:grid; gap:10px; margin-top:18px; max-height:min(42vh,360px); overflow:auto; }
.channel-registration-results:empty { display:none; }
.channel-registration-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; padding:13px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:#0d100e; }
.channel-registration-card.is-success { border-color:rgba(196,217,110,.28); background:linear-gradient(135deg,rgba(196,217,110,.08),rgba(13,16,14,.96) 58%); }
.channel-registration-card.is-pending { border-color:rgba(255,184,107,.3); background:linear-gradient(135deg,rgba(255,184,107,.08),rgba(13,16,14,.96) 58%); }
.channel-registration-card.is-error { border-color:rgba(255,140,140,.3); background:linear-gradient(135deg,rgba(255,140,140,.08),rgba(13,16,14,.96) 58%); }
.channel-registration-thumb { display:grid; place-items:center; width:44px; height:44px; overflow:hidden; border-radius:50%; background:#202420; color:#c4d96e; }
.channel-registration-thumb img { width:100%; height:100%; object-fit:cover; }
.channel-registration-card h3 { margin:0; overflow:hidden; color:#fff; font-size:14px; font-weight:900; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.channel-registration-card strong { display:block; margin-top:4px; color:#c4d96e; font-size:11px; font-weight:900; }
.channel-registration-card.is-pending strong { color:#ffb86b; }
.channel-registration-card.is-error strong { color:#ff9b9b; }
.channel-registration-card p { margin:5px 0 0; color:#959b92; font-size:11px; font-weight:600; line-height:1.55; word-break:keep-all; }
.channel-registration-dialog #channelRegistrationDone { width:100%; margin-top:18px; }
.google-signin-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#fff; color:#1f1f1f; font-size:14px; font-weight:700; cursor:pointer; }
.google-signin-btn:hover { filter:brightness(.97); }
.google-signin-btn[hidden] { display:none !important; }
.google-signin-mark { display:block; width:18px; height:18px; }
@media (min-width:640px) {
  .home-newest-grid { column-gap:1rem; row-gap:2.25rem; }
}
@media (max-width:939px) {
  .home-featured-grid #channel-title { margin-top:28px; }
  .home-newest-extra { display:none; }
  #new-music.is-expanded .home-newest-extra { display:block; }
}
@media (min-width:940px) {
  .home-hero { flex-direction:row; align-items:flex-end; }
  .home-charts-split { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .home-charts-split #overall-chart { grid-column:span 8; }
  .home-charts-split #new-music-chart { grid-column:span 4; }
  .home-overall-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr; }
  .home-overall-split > :first-child { border-right:1px solid rgba(255,255,255,.1); }
  .home-lead { min-height:0; flex:1; }
  .home-featured-grid { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
  .home-featured-grid #featured-title { grid-column:1 / span 8; grid-row:1; align-self:end; }
  .home-featured-grid [data-featured-slider] { grid-column:1 / span 8; grid-row:2; min-width:0; align-self:stretch; }
  .home-featured-grid #channel-title { grid-column:9 / span 4; grid-row:1; align-self:end; }
  .home-featured-grid #channel-chart { grid-column:9 / span 4; grid-row:2; min-width:0; align-self:stretch; }
  .home-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-newest-grid { grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:1.25rem; }
}
.chart-panel,.category-panel { scroll-margin-top:96px; }
.chart-panel.is-loading,.category-panel.is-loading { opacity:.55; pointer-events:none; }
.category-panel.category-focus,.chart-panel.category-focus { animation:categoryfocus .9s ease-out; }
.chart-row { border-radius:12px; }
.chart-track-row,
.channel-chart-row { padding:16px 12px; }
@media (max-width:767px) {
  .chart-track-row { grid-template-columns:28px 48px minmax(0,1fr); gap:8px; padding:14px 10px; }
  .chart-track-row .chart-thumb { width:48px; aspect-ratio:1 / 1; }
  .channel-chart-row { grid-template-columns:28px 40px minmax(0,1fr); gap:8px; padding:14px 10px; }
  .chart-rank .rank-mark.is-lg { gap:1px; }
  .chart-rank .rank-mark.is-lg svg { width:14px; height:14px; }
  .chart-rank .rank-mark.is-lg em { font-size:11px; }
  .chart-rank > .font-mono { font-size:13px; }
  .chart-rank small { margin-top:2px; font-size:8px; }
}
.track-trigger { cursor:pointer; position:relative; }
.channel-chart-row { position:relative; }
.track-link { color:inherit; text-decoration:none; }
.track-link:hover { color:inherit; }
.track-trigger.is-playing,
.track-trigger.is-focus,
.channel-chart-row.is-focus { border-color:transparent; }
.track-trigger.is-playing::after,
.track-trigger.is-focus::after,
.channel-chart-row.is-focus::after {
  content:"";
  position:absolute;
  inset:5px 6px;
  border-radius:12px;
  pointer-events:none;
  background:rgba(196,217,110,.07);
  box-shadow:inset 0 0 0 1px rgba(196,217,110,.48);
}
.chart-track-row.is-playing::after,
.chart-track-row.is-focus::after,
.channel-chart-row.is-focus::after {
  inset:3px 4px;
}
.featured-slider .track-trigger.is-playing::after,
.featured-slider .track-trigger.is-focus::after {
  inset:0;
  border-radius:inherit;
}
.home-newest-grid .track-trigger.is-playing::after,
.home-newest-grid .track-trigger.is-focus::after {
  inset:auto;
  top:0;
  right:0;
  left:0;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:16px;
}
@media (min-width:640px) {
  .home-newest-grid .track-trigger.is-playing::after,
  .home-newest-grid .track-trigger.is-focus::after {
    border-radius:20px;
  }
}
.track-trigger.is-focus,
.channel-chart-row.is-focus { scroll-margin:120px 0 110px; }
.pulse-bar { animation:pulsebars 2.4s ease-in-out infinite alternate; transform-origin:bottom; }
.pulse-bar:nth-child(3n) { animation-delay:-.8s; }
.pulse-bar:nth-child(4n) { animation-delay:-1.4s; }
#progressFill { transition:width .35s linear; }
.panel-meta-stat { color:#777c75; font-size:10px; font-family:'IBM Plex Mono',monospace; }
.panel-meta-stat i, .panel-meta-stat svg { width:10px; height:10px; flex:0 0 10px; }
.panel-meta-stat span { line-height:10px; }
.panel-landing-link { display:inline-flex; align-items:center; flex-shrink:0; height:16px; padding:0 6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); font-size:8px; font-weight:800; line-height:1; color:#c4d96e; }
.panel-landing-link:hover { border-color:rgba(196,217,110,.45); background:rgba(196,217,110,.1); }
.panel-like-action { display:inline-flex; align-items:center; flex-shrink:0; gap:3px; height:16px; padding:0 6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); font-size:8px; font-weight:800; line-height:1; color:#8c9189; }
.panel-like-action i, .panel-like-action svg { display:block; width:10px; height:10px; }
.panel-like-action:hover { border-color:rgba(196,217,110,.45); color:#c4d96e; }
.panel-like-action.is-on { border-color:rgba(196,217,110,.45); background:rgba(196,217,110,.12); color:#c4d96e; }
.panel-like-action.is-on svg { fill:currentColor; }
.panel-share-action { display:inline-flex; align-items:center; flex-shrink:0; gap:3px; height:16px; padding:0 6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); font-size:8px; font-weight:800; line-height:1; color:#8c9189; cursor:pointer; }
.panel-share-action i, .panel-share-action svg { display:block; width:10px; height:10px; }
.panel-share-action:hover { border-color:rgba(196,217,110,.45); background:rgba(196,217,110,.1); color:#c4d96e; }
.metric-card { min-height:0; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:#181b19; padding:10px 10px 8px; }
.playlist-play { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; padding:0; border:0; border-radius:999px; background:#161916; color:#c4d96e; box-shadow:inset 0 0 0 1.5px #c4d96e; transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease; }
.playlist-play.hidden { display:none; }
.playlist-play:hover { background:#c4d96e; color:#0b0d0c; box-shadow:none; transform:scale(1.06); }
.playlist-play-mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:1; }
.playlist-play-all { font-size:6px; font-weight:900; letter-spacing:.07em; line-height:1; }
.playlist-play-tri { display:block; width:0; height:0; margin:1px 0 0 2px; border-style:solid; border-width:5px 0 5px 9px; border-color:transparent transparent transparent currentColor; }
#toggleQueue.is-on { color:#c4d96e; }
#musicPlayer .player-actions #toggleQueue { display:grid; place-items:center; width:36px; height:36px; }
#musicPlayer .player-actions #toggleQueue i,
#musicPlayer .player-actions #toggleQueue svg { display:block; width:20px; height:20px; }
#nowPlayingQueuePane { display:none; }
#nowPlayingPanel.is-queue #nowPlayingMetricsPane,
#nowPlayingPanel.is-recent #nowPlayingMetricsPane { display:none; }
#nowPlayingPanel.is-queue #nowPlayingQueuePane,
#nowPlayingPanel.is-recent #nowPlayingQueuePane { display:flex; }
#nowPlayingPanel.is-list-only.is-queue:not(.is-closed) #nowPlayingQueuePane,
#nowPlayingPanel.is-list-only.is-recent:not(.is-closed) #nowPlayingQueuePane { display:flex; }
.overlay-tabs { display:inline-flex; align-items:center; align-self:flex-start; gap:2px; max-width:calc(100% - 36px); padding:2px; border-radius:9px; background:rgba(0,0,0,.38); }
#nowPlayingPanel.is-content-landing .queue-tab[data-overlay-tab="info"] { display:none; }
.queue-tab em { margin-left:3px; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-style:normal; font-weight:700; }
#nowPlayingPanel.is-list-only { height:min(560px, calc(100dvh - var(--player-bar-h, 7.75rem) - 24px)); }
@media (min-width:640px) {
  #nowPlayingPanel {
    width:min(1080px, calc(100vw - 40px));
    height:min(400px, calc(100dvh - var(--player-bar-h, 5.25rem) - 32px));
    bottom:calc(var(--player-bar-h, 90px) + 8px);
  }
  #nowPlayingPanel.is-list-only {
    width:min(420px, calc(100vw - 40px));
    height:min(400px, calc(100dvh - var(--player-bar-h, 5.25rem) - 32px));
  }
}
.queue-jump { display:inline-flex; align-items:center; gap:6px; margin-bottom:2px; padding:0; border:0; background:transparent; color:#c4d96e; font-size:11px; font-weight:800; letter-spacing:.04em; }
.queue-jump.is-empty { display:none; }
.queue-jump:hover { color:#fff; }
.queue-jump i, .queue-jump svg { width:14px; height:14px; flex:0 0 14px; }
.queue-jump-count { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; color:#c4d96e; }
.queue-jump:hover .queue-jump-count { color:#fff; }
.queue-tabs { display:flex; align-items:center; gap:2px; min-width:0; padding:2px; border-radius:9px; background:rgba(0,0,0,.38); }
.queue-tab { padding:5px 8px; border:0; border-radius:7px; background:transparent; color:#8a8f87; font-size:11px; font-weight:800; line-height:1; }
.queue-tab:hover { color:#fff; }
.queue-tab.is-active { color:#0b0d0c; background:#c4d96e; }
.queue-back { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border:0; border-radius:999px; color:#c4d96e; background:rgba(255,255,255,.06); }
.queue-back:hover { color:#fff; background:rgba(196,217,110,.16); }
.now-playing-queue-item { position:relative; display:grid; grid-template-columns:28px 40px minmax(0,1fr); align-items:center; gap:10px; width:100%; padding:8px 8px 8px 4px; border:0; border-radius:10px; background:transparent; color:inherit; text-align:left; }
.now-playing-queue-item:hover { background:rgba(255,255,255,.04); }
.now-playing-queue-item.is-playing { background:rgba(196,217,110,.1); }
.now-playing-queue-item.is-playing::after {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:8px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(196,217,110,.45);
}
.now-playing-queue-rank { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; color:#8a8f87; }
.now-playing-queue-item.is-playing .now-playing-queue-rank { color:#c4d96e; }
.now-playing-queue-item img { width:40px; height:40px; border-radius:8px; object-fit:cover; background:#202420; }
.now-playing-queue-item strong { display:block; overflow:hidden; color:#fff; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.now-playing-queue-item em { display:block; margin-top:2px; overflow:hidden; color:#8a8f87; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.chart-periods { display:flex; flex-shrink:0; gap:2px; padding:2px; border-radius:9px; background:rgba(0,0,0,.38); }
.chart-period { display:inline-flex; align-items:center; justify-content:center; min-width:46px; padding:5px 8px; border:0; border-radius:7px; font-family:inherit; font-size:10px; font-weight:800; line-height:1; color:#8a8f87; text-decoration:none; background:transparent; cursor:pointer; transition:color .15s ease,background .15s ease; }
.chart-period:hover { color:#fff; }
.chart-period.is-active { color:#0b0d0c; background:#c4d96e; }
.chart-kind-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid rgba(255,255,255,.1); }
.chart-kind-tab { display:inline-flex; align-items:center; padding:10px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:13px; font-weight:800; letter-spacing:.04em; color:#7e837b; text-decoration:none; transition:color .15s ease,border-color .15s ease; }
.chart-kind-tab:hover { color:#fff; }
.chart-kind-tab.is-active { color:#c4d96e; border-bottom-color:#c4d96e; }
@media (max-width:639px) {
  .chart-kind-tabs { flex-wrap:nowrap; gap:0; width:100%; }
  .chart-kind-tab { flex:1 1 0; justify-content:center; min-width:0; padding:8px 2px; font-size:10px; letter-spacing:0; white-space:nowrap; }
}
.header-favorite { display:grid; place-items:center; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:#fff; text-decoration:none; transition:color .15s ease,border-color .15s ease; }
.header-favorite i, .header-favorite svg { display:block; width:16px; height:16px; fill:currentColor; }
.header-favorite:hover, .header-favorite.is-active { border-color:#c4d96e; color:#c4d96e; }
.header-inbox { position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:#fff; text-decoration:none; transition:color .15s ease,border-color .15s ease; }
.header-inbox i, .header-inbox svg { display:block; width:16px; height:16px; }
.header-inbox:hover, .header-inbox.is-active { border-color:#c4d96e; color:#c4d96e; }
.header-inbox-count { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#c4d96e; color:#10130f; font-size:9px; font-style:normal; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px #0b0d0c; }
.header-inbox-count[hidden] { display:none; }
.header-login { display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:transparent; appearance:none; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.header-login svg, .header-google { display:block; width:18px; height:18px; }
.header-login:hover { border-color:#c4d96e; background:rgba(255,255,255,.04); }
.header-login[hidden] { display:none !important; }
.member-account { position:relative; }
.member-account[hidden] { display:none; }
.member-avatar { display:grid; place-items:center; width:36px; height:36px; padding:0; overflow:hidden; border-radius:999px; border:1px solid rgba(196,217,110,.45); background:#c4d96e; color:#10130f; font-size:13px; font-weight:800; letter-spacing:-.04em; cursor:pointer; }
.member-avatar.has-photo { background:#1a1d19; border-color:rgba(255,255,255,.14); }
.member-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.member-avatar:hover, .member-avatar[aria-expanded="true"] { filter:brightness(1.05); }
.member-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:220px; max-width:min(280px, calc(100vw - 24px)); padding:10px; border:var(--modal-border); border-radius:16px; background:#151715; box-shadow:0 16px 40px rgba(0,0,0,.4); }
.member-menu[hidden] { display:none; }
.member-menu-name { margin:2px 8px 0; color:#fff; font-size:13px; font-weight:800; }
.member-menu-email { margin:2px 8px 8px; color:#7f847c; font-size:11px; word-break:break-all; }
.member-menu-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 8px; border:0; border-radius:10px; background:transparent; color:#e8ebe3; font-size:13px; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; }
.member-menu-item i, .member-menu-item svg { width:16px; height:16px; color:#c4d96e; }
.member-menu-item:hover { background:rgba(255,255,255,.05); }
.member-menu-channels { display:flex; flex-direction:column; gap:2px; margin-top:6px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); }
.member-menu-channel { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 8px; border-radius:10px; color:#e8ebe3; font-size:12px; font-weight:700; text-decoration:none; }
.member-menu-channel:hover { background:rgba(255,255,255,.05); color:#c4d96e; }
.member-menu-channel img { width:22px; height:22px; flex:none; border-radius:999px; object-fit:cover; background:#0c0f0d; }
.member-menu-channel span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-menu-channel em { flex:none; margin-left:auto; color:#8a8f87; font-size:11px; font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }
.member-menu-channel:hover em { color:#b7bcb3; }
.member-modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px 12px; }
.member-modal[hidden] { display:none; }
.member-modal-backdrop { position:absolute; inset:0; background:rgba(5,6,5,.72); }
.member-dialog { position:relative; z-index:1; width:min(420px,100%); max-height:min(88vh,760px); overflow:auto; padding:22px 22px 24px; border:var(--modal-border); border-radius:22px; background:#121512; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.member-dialog-wide { width:min(520px,100%); }
.extension-guide-lead { margin:12px 0 0; color:#858a82; font-size:13px; font-weight:600; line-height:1.55; }
.extension-guide { margin:16px 0 18px; padding:0 0 0 1.2rem; color:#d7ddd4; font-size:13px; font-weight:600; line-height:1.65; }
.extension-guide li { margin:0 0 8px; }
.extension-guide code { display:inline; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.06); color:#c4d96e; font-size:12px; }
.extension-guide strong { color:#fff; font-weight:800; }
#downloadExtension { width:100%; text-decoration:none; }
.member-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.member-dialog-head h2 { margin:0; color:#fff; font-size:22px; font-weight:800; letter-spacing:-.04em; }
.member-dialog-close { display:grid; place-items:center; width:36px; height:36px; flex:none; border:0; border-radius:12px; color:#8a8f87; background:rgba(255,255,255,.04); cursor:pointer; }
.member-dialog-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.member-auth-tabs { display:flex; gap:4px; margin-top:16px; padding:3px; border-radius:12px; background:rgba(0,0,0,.35); }
.member-auth-tab { flex:1; height:36px; border:0; border-radius:10px; background:transparent; color:#8a8f87; font-size:13px; font-weight:800; cursor:pointer; }
.member-auth-tab.is-active { background:#c4d96e; color:#10130f; }
.member-form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.member-form-split { padding-top:16px; border-top:1px solid rgba(255,255,255,.06); }
.member-form-kicker { margin:0; color:#c4d96e; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.member-form-kicker.is-danger { color:#ff9b9b; }
.member-field { display:flex; flex-direction:column; gap:6px; color:#d7ddd4; font-size:13px; font-weight:700; }
.member-field input, .member-field textarea { width:100%; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#0c0f0d; color:#f2f4ed; font-size:14px; font-weight:600; }
.member-field input { height:42px; }
.member-field textarea { min-height:132px; padding:12px; resize:vertical; line-height:1.55; }
.member-field input:focus, .member-field textarea:focus { outline:none; border-color:#c4d96e; }
.member-field-hint { margin:-4px 0 0; color:#858a82; font-size:12px; font-weight:600; }
.member-password-hints { display:flex; flex-direction:column; gap:4px; margin:-4px 0 0; padding:0; list-style:none; }
.member-password-hints[hidden] { display:none; }
.member-password-hints li { color:#ff9b9b; font-size:12px; font-weight:700; line-height:1.4; }
.member-password-hints li::before { content:"· "; }
.member-password-hints li[hidden] { display:none; }
.member-form-error { margin:0; padding:10px 12px; border-radius:12px; background:rgba(255,140,140,.1); color:#ff9b9b; font-size:13px; font-weight:700; }
.member-form-error[hidden] { display:none; }
.member-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; border:0; border-radius:12px; background:#c4d96e; color:#10130f; font-size:14px; font-weight:800; cursor:pointer; }
.member-submit:hover { filter:brightness(1.05); }
.member-submit.is-ghost { background:rgba(255,255,255,.06); color:#fff; }
.member-submit.is-danger { background:rgba(255,140,140,.16); color:#ff9b9b; }
.member-submit:disabled { opacity:.45; cursor:not-allowed; }
.member-submit.is-busy:disabled { cursor:wait; }
.member-owned-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.member-owned-list:empty { display:none; }
.member-owned-item { display:flex; align-items:center; gap:10px; min-width:0; }
.member-owned-item img { width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover; background:#0c0f0d; }
.member-owned-meta { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.member-owned-meta a,
.member-owned-title { overflow:hidden; color:#f2f4ed; font-size:13px; font-weight:700; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.member-owned-meta a:hover { color:#c4d96e; }
.member-owned-handle { color:#8a8f87; font-size:11px; font-weight:600; }
.member-owned-remove { display:grid; place-items:center; width:28px; height:28px; flex:none; border:0; border-radius:8px; color:#8a8f87; background:transparent; cursor:pointer; }
.member-owned-remove:hover { color:#ff9b9b; background:rgba(255,140,140,.1); }
.member-profile-foot { display:flex; justify-content:flex-end; margin-top:18px; }
.member-withdraw-link { border:0; padding:0; background:transparent; color:#6f746d; font-size:11px; font-weight:600; cursor:pointer; }
.member-withdraw-link:hover { color:#c4a39d; }
.member-withdraw-lead { margin:14px 0 0; color:#b7bcb3; font-size:14px; font-weight:500; line-height:1.75; }
.member-withdraw-list { margin:12px 0 0; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); list-style:none; }
.member-withdraw-list li { position:relative; padding:0 0 0 14px; color:#e4e7df; font-size:13px; font-weight:600; line-height:1.65; }
.member-withdraw-list li + li { margin-top:6px; }
.member-withdraw-list li::before { content:"·"; position:absolute; left:2px; color:#c4d96e; }
.member-withdraw-note { margin:10px 0 0; color:#858a82; font-size:12px; font-weight:600; line-height:1.55; }
.member-withdraw-actions { display:flex; gap:8px; }
.member-withdraw-actions .member-submit { flex:1; }
#memberWithdrawModal { z-index:91; }
header { max-width:100%; transition:transform .28s ease; }
header.is-away { transform:translateY(-100%); }
.header-bar { grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; min-width:0; max-width:100%; }
.header-logo { min-width:0; }
.header-actions { min-width:0; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; min-width:0; }
.site-nav-item { display:inline-flex; align-items:center; padding:4px 0; border-bottom:1px solid transparent; font-size:13px; font-weight:700; letter-spacing:.01em; line-height:1; color:#8a8f87; text-decoration:none; transition:color .15s ease,border-color .15s ease; }
.site-nav-item:hover { color:#fff; }
.site-nav-item.is-active { color:#c4d96e; border-bottom-color:#c4d96e; }
@media (max-width:639px) {
  .header-bar {
    height:auto;
    grid-template-columns:1fr auto;
    grid-template-areas:"logo actions" "nav nav";
    column-gap:8px;
    row-gap:0;
    padding:8px 12px 0;
  }
  .header-logo { grid-area:logo; }
  .header-actions { grid-area:actions; gap:3px; }
  .site-nav { grid-area:nav; gap:18px; padding:8px 0 10px; }
  .site-nav-item { font-size:12px; letter-spacing:0; }
  .header-favorite,
  .header-inbox,
  .header-login,
  .member-avatar,
  .header-actions #openSearch { width:32px; height:32px; }
  .header-favorite i, .header-favorite svg,
  .header-inbox i, .header-inbox svg,
  .header-login svg, .header-google,
  .header-actions #openSearch i, .header-actions #openSearch svg { width:15px; height:15px; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.trend-hero { display:block; }
.trend-updated { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:700; letter-spacing:.14em; color:#72776f; }
.trend-month { display:flex; flex:0 0 auto; }
.trend-month select { appearance:none; min-width:0; height:28px; padding:0 28px 0 10px; border:0; border-radius:8px; background:#121512 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8f87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; color:#f2f4ed; font-size:11px; font-weight:800; letter-spacing:-.02em; }
.trend-month select:focus { outline:1px solid #c4d96e; }
.trend-card { background:#121512; border-radius:22px; padding:22px 22px 20px; }
@media (min-width:640px) {
  .trend-card { padding:26px 26px 22px; }
}
.trend-chip { background:rgba(255,255,255,.035); border-radius:16px; }
.trend-chip:hover { background:rgba(255,255,255,.055); }
.trend-archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:1024px) {
  .trend-archive-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.trend-archive-card { display:flex; min-height:118px; flex-direction:column; justify-content:space-between; border-radius:18px; background:#121512; padding:16px 16px 14px; transition:background .15s ease, outline-color .15s ease; }
.trend-archive-card:hover { background:#171a16; }
.trend-archive-card.is-current { outline:1px solid #c4d96e; outline-offset:0; }
.trend-archive-kicker { font-size:9px; font-weight:800; letter-spacing:.14em; color:#c4d96e; }
.trend-archive-card strong { margin-top:10px; font-size:15px; font-weight:800; letter-spacing:-.03em; line-height:1.25; color:#f4f6ef; }
.trend-archive-range { margin-top:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#7f847c; }
.trend-pair { display:grid; gap:1.25rem; align-items:stretch; }
@media (min-width:1280px) {
  .trend-pair { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
}
.trend-pair-panel { display:flex; flex-direction:column; height:100%; background:#121512; border-radius:22px; padding:22px 22px 16px; }
@media (min-width:640px) {
  .trend-pair-panel { padding:26px 26px 18px; }
}
.trend-pair-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-height:6.75rem; margin-bottom:16px; }
@media (max-width:1279px) {
  .trend-pair-panel { height:auto; }
  .trend-pair-head:not(.is-hall) { align-items:flex-start; min-height:0; }
  .trend-pair-head:not(.is-hall) > div { min-width:0; flex:1 1 auto; }
}
@media (max-width:639px) {
  .trend-pair-head:not(.is-hall) { position:relative; display:block; }
  .trend-pair-head:not(.is-hall) > a { position:absolute; top:0; right:0; }
}
.trend-pair-head.is-hall { flex-direction:column; align-items:stretch; min-height:0; gap:16px; }
.trend-hall-periods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.trend-hall-period { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-height:72px; padding:14px 16px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(0,0,0,.28); color:#d8dcd4; font-family:inherit; text-align:left; cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease; }
.trend-hall-period:hover { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#fff; }
.trend-hall-period.is-active { border-color:transparent; background:#c4d96e; color:#0b0d0c; box-shadow:0 10px 24px rgba(196,217,110,.18); }
.trend-hall-period strong { font-size:18px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.trend-hall-period em { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-style:normal; font-weight:700; letter-spacing:.12em; opacity:.5; }
.trend-hall-period.is-active em { opacity:.62; }
.trend-pair-list { display:flex; flex:1 1 auto; flex-direction:column; gap:8px; min-height:0; }
.trend-channel-head { display:grid; grid-template-columns:28px minmax(0,1fr) 48px; gap:10px; align-items:center; flex:0 0 auto; min-height:22px; padding:0 6px 2px; font-size:9px; font-weight:800; letter-spacing:.12em; color:#666b64; }
.trend-hall-panel[hidden] { display:none; }
.trend-hall { display:flex; flex:1 1 auto; flex-direction:column; gap:14px; min-height:0; }
.trend-hall-kicker, .trend-hall-cat-label { font-size:9px; font-weight:800; letter-spacing:.12em; }
.trend-hall-kicker { color:#c4d96e; }
.trend-hall-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.trend-hall-podium-card { display:flex; flex-direction:column; min-width:0; padding:12px; border-radius:16px; background:rgba(255,255,255,.035); text-align:left; transition:background .15s ease; }
.trend-hall-podium-card:hover { background:rgba(255,255,255,.055); }
.trend-hall-podium-card.is-empty { align-items:center; justify-content:center; gap:8px; min-height:132px; font-size:11px; color:#6f746d; }
.trend-hall-cats { display:grid; grid-template-columns:1fr; gap:8px; flex:1 1 auto; min-height:0; }
.trend-hall-cat { display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px; border-radius:16px; background:rgba(255,255,255,.035); }
.trend-hall-mini { display:grid; grid-template-columns:22px 32px minmax(0,1fr); gap:8px; align-items:center; flex:1 1 auto; min-height:40px; min-width:0; padding:2px 0; border-radius:12px; text-align:left; }
.trend-hall-mini.is-empty { grid-template-columns:22px minmax(0,1fr); font-size:11px; color:#6f746d; }
.trend-hall-thumb { display:block; width:32px; height:32px; overflow:hidden; border-radius:10px; background:#202420; }
.trend-hall-thumb.is-wide { width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; margin:10px 0 8px; }
.trend-hall-thumb img { width:100%; height:100%; object-fit:cover; }
.trend-hall-thumb.is-channel { display:grid; place-items:center; border-radius:999px; }
.trend-channel-row { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-height:56px; padding:10px 12px; }
@media (max-width:1279px) {
  .trend-pair-list { flex:none; min-height:auto; }
  .trend-channel-row { flex:0 0 auto; width:100%; min-width:0; }
}
.trend-channel-groups { display:grid; grid-template-columns:1fr; gap:16px; }
.trend-channel-group { min-width:0; }
.trend-channel-group-label { font-size:10px; font-weight:800; letter-spacing:.12em; }
@media (min-width:1024px) {
  .trend-channel-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:640px) {
  .trend-hall-cats { grid-template-columns:1fr 1fr; }
}
.trend-bar { display:block; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.05); }
.trend-bar > i { display:block; height:100%; border-radius:inherit; }
.trend-timeline { display:flex; align-items:flex-end; gap:6px; height:112px; }
.trend-day { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; height:100%; }
.trend-day-bar { display:flex; flex-direction:column-reverse; width:100%; max-width:18px; overflow:hidden; border-radius:6px 6px 2px 2px; background:rgba(255,255,255,.06); }
.trend-day-bar > i { display:block; width:100%; flex-shrink:0; flex-basis:0; min-height:2px; }
.trend-day > em { margin-top:8px; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.02em; color:#6f746d; }
.trend-timeline-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; font-size:10px; font-weight:700; color:#7f847c; }
.trend-timeline-legend span { display:inline-flex; align-items:center; gap:6px; }
.trend-timeline-legend i { width:8px; height:8px; border-radius:2px; }
.trend-day:nth-child(even) > em { visibility:hidden; }
@media (min-width:640px) {
  .trend-day:nth-child(even) > em { visibility:visible; }
}
.trend-report-card { display:block; width:100%; text-align:left; background:#121512; border-radius:22px; padding:22px 22px 20px; transition:background .15s ease,transform .15s ease; }
@media (min-width:640px) {
  .trend-report-card { padding:26px 26px 22px; }
}
.trend-report-card:hover { background:#171a17; }
.trend-report-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.trend-report-mark { display:inline-flex; align-items:center; gap:8px; color:#c4d96e; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.trend-report-mark em { display:inline-grid; place-items:center; min-width:34px; height:18px; padding:0 6px; border-radius:6px; background:#c4d96e; color:#0b0d0c; font-style:normal; font-size:9px; letter-spacing:.08em; }
.trend-report-open { display:inline-flex; align-items:center; gap:6px; color:#c4d96e; font-size:11px; font-weight:800; letter-spacing:.04em; }
.trend-report-open i, .trend-report-open svg { display:block; width:14px; height:14px; }
.trend-report-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.trend-report-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); color:#d8dcd4; font-size:11px; font-weight:700; }
.trend-report-chip i { display:block; width:6px; height:6px; border-radius:50%; }
.trend-report-modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px 12px; }
.trend-report-modal[hidden] { display:none; }
.trend-report-backdrop { position:absolute; inset:0; background:rgba(5,6,5,.72); }
.trend-report-dialog { position:relative; z-index:1; display:flex; flex-direction:column; width:min(920px,100%); max-height:min(88vh,860px); overflow:hidden; border:var(--modal-border); border-radius:24px; background:#121512; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.trend-report-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 22px 0; }
.trend-report-tools { display:flex; align-items:center; gap:8px; flex:none; }
.trend-report-copy { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:12px; color:#c4d96e; background:rgba(196,217,110,.08); font-size:12px; font-weight:800; }
.trend-report-copy:hover, .trend-report-copy.is-on { background:rgba(196,217,110,.16); color:#fff; }
.trend-report-copy i, .trend-report-copy svg { display:block; width:16px; height:16px; }
.trend-report-close { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:12px; color:#8a8f87; background:rgba(255,255,255,.04); }
.trend-report-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.trend-report-body { min-height:0; overflow:auto; padding:18px 22px 24px; }
.trend-report-heading { margin:22px 0 8px; font-size:18px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.trend-report-p { margin-top:10px; font-size:14px; line-height:1.8; color:#c5c9c1; }
.trend-report-quote { margin:16px 0; padding:12px 14px; border-left:3px solid #c4d96e; background:rgba(196,217,110,.05); color:#e6e9e1; font-size:14px; line-height:1.7; }
.trend-report-list { margin:12px 0 0; padding-left:18px; color:#c5c9c1; font-size:14px; line-height:1.7; }
.trend-report-list li { margin:6px 0; }
.trend-report-credit { margin-top:28px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); color:#6f746d; font-size:11px; line-height:1.6; }
.trend-report-charts { display:grid; gap:16px; margin-top:22px; }
@media (min-width:768px) {
  .trend-report-charts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.trend-report-chart, .trend-report-table-wrap { padding:16px; border-radius:18px; background:rgba(255,255,255,.03); }
.trend-report-kicker { font-size:9px; font-weight:800; letter-spacing:.16em; color:#c4d96e; }
.trend-report-block-title { margin-top:6px; font-size:16px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.trend-report-hint { margin-top:6px; font-size:12px; line-height:1.5; color:#7f847c; }
.trend-report-bars { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.trend-report-bar { display:grid; grid-template-columns:72px minmax(0,1fr) 36px; align-items:center; gap:8px; }
.trend-report-bar-label { font-size:11px; font-weight:800; }
.trend-report-bar-value { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:800; color:#fff; text-align:right; }
.trend-report-table { width:100%; margin-top:14px; border-collapse:collapse; }
.trend-report-table th, .trend-report-table td { padding:8px 0; border-top:1px solid rgba(255,255,255,.06); font-size:12px; text-align:left; vertical-align:top; }
.trend-report-table thead th { border-top:0; color:#6f746d; font-size:10px; font-weight:800; letter-spacing:.08em; }
.trend-report-table tbody th { width:52px; color:#c4d96e; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:800; }
.trend-report-table td strong { display:block; color:#fff; }
.trend-report-table td span { display:block; margin-top:3px; color:#8d928a; }
.trend-report-section { margin-top:22px; }
.trend-report-section h3 { font-size:18px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.trend-report-section p { margin-top:8px; font-size:14px; line-height:1.75; color:#9aa194; }
.trend-report-sources { margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); }
.trend-report-sources p { font-size:10px; font-weight:800; letter-spacing:.14em; color:#6f746d; }
.trend-report-sources ul { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.trend-report-sources a { color:#c4d96e; font-size:11px; font-weight:700; }
body.has-trend-report { overflow:hidden; }
.metric-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.metric-periods { display:flex; flex:1 1 150px; gap:3px; padding:3px; border-radius:10px; background:rgba(0,0,0,.32); }
.metric-period, .channel-metric-period { flex:1; border:0; border-radius:7px; padding:5px 2px; font-size:10px; font-weight:700; line-height:1; color:#8a8f87; background:transparent; transition:color .15s ease,background .15s ease; }
.metric-period.is-active, .channel-metric-period.is-active { color:#fff; background:#2c302d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.metric-kinds { display:flex; flex:0 0 auto; margin-left:auto; gap:3px; padding:3px; border-radius:10px; background:rgba(0,0,0,.32); }
.metric-kind, .channel-metric-kind { border:0; border-radius:7px; padding:5px 7px; font-size:10px; font-weight:700; line-height:1; color:#8a8f87; background:transparent; transition:color .15s ease,background .15s ease; }
.metric-kind.is-active, .channel-metric-kind.is-active { color:#fff; background:#2c302d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.metric-legend { position:absolute; left:8px; bottom:20px; z-index:10; display:flex; gap:8px; pointer-events:none; font-size:10px; font-weight:600; line-height:1; color:#9aa19a; }
.metric-legend span { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:999px; background:rgba(8,10,9,.62); }
.metric-legend [hidden] { display:none; }
.metric-legend i { display:block; width:6px; height:6px; border-radius:50%; }
.metric-legend i.is-video { background:#3ea6ff; }
.metric-legend i.is-average { background:#8b9189; }
.metric-hover { position:absolute; z-index:16; pointer-events:none; min-width:110px; padding:7px 8px; border:1px solid rgba(62,166,255,.35); border-radius:10px; background:rgba(12,14,13,.92); box-shadow:0 10px 28px rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.metric-hover[hidden] { display:none; }
.metric-hover span { display:block; font-size:9px; font-weight:700; letter-spacing:.04em; color:#8a8f87; }
.metric-hover strong { display:block; margin-top:3px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:800; color:#fff; }
.metric-hover strong:empty { display:none; }
.metric-hover b { display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; font-style:normal; color:#3ea6ff; }
.metric-hover b:empty { display:none; }
.metric-hover em { display:block; margin-top:2px; font-size:9px; font-style:normal; font-weight:600; color:#9aa19a; }
.metric-hover em:empty { display:none; }
main.mx-auto.w-full { padding-bottom:0; min-width:0; max-width:min(1540px, 100%); overflow-x:clip; }
@media (max-width:639px) {
  #musicLanding { padding-left:0; padding-right:0; }
  #musicLanding > nav,
  #musicLanding > article > section,
  #musicLanding > footer,
  #musicLanding .landing-info { padding-left:16px; padding-right:16px; }
  #landingVideo { border-radius:0; }
  .home-main { padding-left:0; padding-right:0; }
  .home-main > section > :first-child,
  .home-main > .channel-verify-banner,
  .home-main > footer { padding-left:16px; padding-right:16px; }
  .home-main .home-featured > :first-child { padding-left:0; padding-right:0; }
  .home-main .home-pad,
  .home-main [data-featured-slider],
  .home-main [data-playlist="newest"] { padding-left:16px; padding-right:16px; }
  .home-main .chart-panel,
  .home-main .category-panel { border-radius:0; border-left:0; border-right:0; }
  .home-main .chart-panel > :first-child { border-radius:0; }
}
footer { padding-bottom:2rem; }
body.has-player footer { padding-bottom:calc(var(--player-bar-h, 5.25rem) + 12px); }
#musicPlayer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  max-width:100%;
  overflow-x:hidden;
  padding-bottom:calc(0.625rem + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
.favorite-star { display:grid; place-items:center; width:36px; height:36px; color:#8c9189; transition:color .15s ease,transform .15s ease; }
.favorite-star i, .favorite-star svg { display:block; width:20px; height:20px; }
.favorite-star:hover { color:#c4d96e; }
.favorite-star.is-on { color:#c4d96e; }
.favorite-star.is-on svg { fill:currentColor; }
.player-landing-link { display:grid; place-items:center; width:36px; height:36px; color:#8c9189; transition:color .15s ease; }
.player-landing-link i, .player-landing-link svg { display:block; width:20px; height:20px; }
.player-landing-link:hover { color:#c4d96e; }
.player-close { display:grid; place-items:center; width:36px; height:36px; color:#8c9189; transition:color .15s ease; }
.player-close i, .player-close svg { display:block; width:20px; height:20px; }
.player-close:hover { color:#fff; }
.player-stats { font-size:11px; }
.player-stat { display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1; }
.player-stat i,.player-stat svg { display:block; width:12px; height:12px; flex:0 0 12px; }
.player-stat span { display:block; font-size:11px; line-height:12px; }
#nowPlayingPanel {
  position:fixed;
  left:50%;
  bottom:calc(var(--player-bar-h, 82px) + 8px);
  width:min(1080px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  height:auto;
  max-height:calc(100dvh - var(--player-bar-h, 82px) - 16px - env(safe-area-inset-top, 0px));
  display:flex;
  flex-direction:column;
  transform:translateX(-50%);
  transform-origin:bottom center;
  border:1px solid rgba(255,255,255,.28);
}
#nowPlayingPanel.is-closed { opacity:0; pointer-events:none; }
#nowPlayingPanel.is-opening { animation:panelin .2s ease-out; }
#nowPlayingPanel.is-dragging { animation:none; transition:none; }
#nowPlayingPanel.is-dismissing { animation:none; transition:transform .18s ease,opacity .18s ease; }
.now-playing-handle {
  position:relative; z-index:5;
  flex:0 0 18px;
  display:flex; align-items:flex-end; justify-content:center;
  height:18px; padding-bottom:5px;
  background:#151715;
  cursor:grab; touch-action:none;
}
.now-playing-handle::after { content:""; width:36px; height:4px; border-radius:999px; background:rgba(255,255,255,.28); }
#nowPlayingPanel > .grid { flex:1 1 auto; min-height:0; height:auto; overflow:hidden; }
#nowPlayingPanel .now-playing-video { min-width:0; z-index:0; }
#nowPlayingPanel .now-playing-side { position:relative; z-index:2; min-width:0; }
#nowPlayingPanel .now-playing-video iframe { max-width:100%; max-height:100%; }
@media (min-width:640px) {
  #nowPlayingPanel:not(.is-list-only) {
    height:min(400px, calc(100dvh - var(--player-bar-h, 5.25rem) - 32px));
  }
}
#nowPlayingQueue { touch-action:pan-y; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width:none; }
@keyframes pulsebars { from { transform:scaleY(.62); } to { transform:scaleY(1); } }
@keyframes categoryfocus { 0% { box-shadow:0 0 0 0 rgba(196,217,110,.4); } 100% { box-shadow:0 0 0 12px rgba(196,217,110,0); } }
@keyframes panelin { from { opacity:0; transform:translateX(-50%) translateY(10px) scale(.985); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes panelin-mobile { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:639px) {
  .hero-shade { background:linear-gradient(0deg,rgba(5,6,5,.94) 0%,rgba(5,6,5,.35) 75%,rgba(5,6,5,.15) 100%); }
  body.has-player footer { padding-bottom:calc(var(--player-bar-h, 7.75rem) + 12px); }
  #nowPlayingPanel,
  #nowPlayingPanel.is-list-only {
    left:0;
    right:0;
    width:auto;
    max-width:100%;
    transform:none;
    border-radius:16px 16px 0 0;
    border:1px solid rgba(255,255,255,.28);
    bottom:var(--player-bar-h, 7.75rem);
  }
  #nowPlayingPanel {
    --np-info-h:7.25rem;
    height:auto;
    max-height:calc(100dvh - var(--player-bar-h, 7.75rem) - env(safe-area-inset-top, 0px));
  }
  #nowPlayingPanel.is-list-only {
    height:min(560px, calc(100dvh - var(--player-bar-h, 7.75rem) - env(safe-area-inset-top, 0px)));
  }
  #nowPlayingPanel:not(.is-list-only) > .grid {
    display:flex;
    flex-direction:column;
    position:relative;
    flex:0 1 auto;
    min-height:0;
    height:auto;
  }
  #nowPlayingPanel:not(.is-list-only) .now-playing-video {
    position:relative;
    flex:none;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
  }
  #nowPlayingPanel:not(.is-list-only) .now-playing-video iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  html.adminmode #nowPlayingPanel:not(.is-list-only) .now-playing-video.is-visualizer-on {
    aspect-ratio:auto;
  }
  html.adminmode #nowPlayingPanel:not(.is-list-only) .now-playing-video.is-visualizer-on iframe {
    position:relative;
    inset:auto;
    aspect-ratio:16 / 9;
    height:auto;
  }
  #nowPlayingPanel:not(.is-list-only) .now-playing-side {
    order:-1;
    flex:none;
    padding:10px 12px;
  }
  #nowPlayingPanel:not(.is-list-only) .metric-card { display:none; }
  #nowPlayingPanel.is-queue:not(.is-list-only) > .grid::after,
  #nowPlayingPanel.is-recent:not(.is-list-only) > .grid::after {
    content:"";
    display:block;
    flex:none;
    height:var(--np-info-h);
  }
  #nowPlayingPanel.is-queue:not(.is-list-only) .now-playing-side,
  #nowPlayingPanel.is-recent:not(.is-list-only) .now-playing-side {
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    flex-direction:column;
    background:#1c1f1d;
  }
  #nowPlayingPanel.is-opening { animation:panelin-mobile .2s ease-out; }
  #musicPlayer { left:0; right:0; width:auto; max-width:100%; padding-left:10px; padding-right:10px; }
  #musicPlayer .player-bar { flex-wrap:wrap; gap:8px; width:100%; min-width:0; max-width:100%; overflow:hidden; }
  #musicPlayer .player-channel { flex:1 1 0; min-width:0; max-width:calc(100% - 96px); overflow:hidden; }
  #musicPlayer .player-channel img,
  #musicPlayer #playerChannelFallback { width:40px; height:40px; }
  #musicPlayer .player-center { order:3; flex:1 1 100%; width:100%; min-width:0; max-width:100%; }
  #musicPlayer .player-actions { margin-left:0; flex:0 0 auto; }
  #musicPlayer .player-actions #toggleQueue,
  #musicPlayer .player-actions .favorite-star,
  #musicPlayer .player-actions .player-landing-link,
  #musicPlayer .player-actions .player-close { width:28px; height:28px; }
  #musicPlayer .player-toolbar { min-width:0; max-width:100%; gap:6px; justify-content:flex-start; }
  #musicPlayer .player-toolbar > button { flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center; }
  #musicPlayer #togglePlay { flex:0 0 20px; width:20px; height:20px; }
  #musicPlayer #playerDuration { width:auto; flex:0 0 auto; }
  #musicPlayer #progressTrack { width:auto !important; flex:1 1 auto; min-width:40px; max-width:none; }
}
.music-hero-shade { background:linear-gradient(180deg,rgba(7,9,7,.08) 40%,rgba(7,9,7,.42) 100%); }
.chart-seal-row { display:flex; align-items:center; gap:8px; width:100%; }
.chart-seal-row .chart-seal { flex:1 1 auto; min-width:0; }
.chart-standing-jump { display:grid; flex:0 0 44px; width:44px; height:44px; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:#141814; color:#c4d96e; box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05); transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.chart-standing-jump:hover { transform:translateY(-1px); border-color:rgba(196,217,110,.55); background:rgba(196,217,110,.1); }
.chart-standing-jump:focus-visible { outline:2px solid #c4d96e; outline-offset:3px; }
.chart-seal { position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 14px; overflow:hidden; border:1px solid rgba(196,217,110,.38); border-radius:999px; background:linear-gradient(90deg,rgba(196,217,110,.12),transparent 58%),#141814; box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06); color:#c4d96e; text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.chart-seal:hover { transform:translateY(-1px); border-color:currentColor; }
.chart-seal-orb { position:absolute; right:8%; top:-28px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle,currentColor 0%,transparent 68%); opacity:.16; pointer-events:none; }
.chart-seal-brand { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-size:9px; font-weight:900; letter-spacing:.16em; }
.chart-seal-rank { display:flex; align-items:baseline; gap:2px; flex-shrink:0; color:#fff; }
.chart-seal-rank em { font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:22px; font-weight:900; line-height:1; letter-spacing:-.05em; }
.chart-seal-rank span { font-size:11px; font-weight:800; color:currentColor; }
.chart-seal-chart { min-w-0; font-size:12px; font-weight:800; letter-spacing:.03em; color:#f2f4ed; }
.chart-seal-period { margin-left:auto; flex-shrink:0; font-size:10px; font-weight:700; color:#9aa194; }
.chart-seal.is-gold { color:#f0c85a; border-color:rgba(240,200,90,.5); }
.chart-seal.is-silver { color:#d7dde8; border-color:rgba(215,221,232,.42); }
.chart-seal.is-bronze { color:#e0a36a; border-color:rgba(224,163,106,.45); }
#landingVideo { width:100%; min-width:0; align-self:start; }
.landing-poster { z-index:2; }
.landing-poster.is-hidden { display:none; }
.music-metric-panel .metric-card { min-height:0; flex:1; background:#181b19; }
.music-metric-panel .metric-plot { height:240px; }
.music-meta { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; row-gap:6px; }
.music-meta > div { display:inline-flex; align-items:baseline; gap:5px; }
.music-meta dt { font-size:10px; font-weight:800; color:#6f746d; }
.music-meta dd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:800; color:#f2f4ed; }
.music-meta dd.is-gain { color:#c5d48a; }
.music-action { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); font-size:12px; font-weight:800; color:#f2f4ed; text-decoration:none; transition:border-color .15s ease,background .15s ease,color .15s ease; }
.music-action:hover { border-color:rgba(196,217,110,.4); color:#c4d96e; }
.music-action.is-play { border-color:transparent; background:#c4d96e; color:#0b0d0c; }
.music-action.is-play:hover { background:#d4e88a; color:#0b0d0c; }
.music-action.is-contact { border-color:rgba(196,217,110,.4); color:#c4d96e; }
.music-action.is-contact:hover { background:rgba(196,217,110,.12); }
.music-action.is-contact svg { fill:currentColor; }
.landing-channel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.landing-channel-row .is-contact { flex:none; }

/* Landing chart history */
.chart-standing { --standing-accent:#c4d96e; position:relative; isolation:isolate; overflow:hidden; scroll-margin-top:24px; margin-top:40px; padding:24px; border:1px solid rgba(255,255,255,.09); border-radius:26px; background:radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--standing-accent) 16%,transparent) 0,transparent 30%),linear-gradient(145deg,#151815 0%,#101210 52%,#0d0f0d 100%); box-shadow:0 22px 60px rgba(0,0,0,.2); }
.chart-standing:before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.28; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(120deg,#000,transparent 68%); }
.chart-standing-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:2px 2px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.chart-standing-eyebrow { display:flex; align-items:center; gap:8px; color:var(--standing-accent); font-size:10px; font-weight:900; letter-spacing:.18em; }
.chart-standing-eyebrow svg { width:15px; height:15px; }
.chart-standing-head h2 { margin:10px 0 0; color:#fff; font-size:clamp(1.45rem,3vw,2.05rem); font-weight:950; line-height:1.12; letter-spacing:-.045em; }
.chart-standing-head p { margin:8px 0 0; color:#858b82; font-size:13px; font-weight:600; line-height:1.55; }
.chart-standing-summary { display:grid; grid-template-columns:auto auto; align-items:end; flex:none; min-width:126px; padding:12px 14px 11px; border:1px solid color-mix(in srgb,var(--standing-accent) 28%,transparent); border-radius:16px; background:color-mix(in srgb,var(--standing-accent) 8%,#0d0f0d); }
.chart-standing-summary > span { align-self:center; color:var(--standing-accent); font-size:9px; font-weight:950; letter-spacing:.16em; }
.chart-standing-summary strong { grid-row:1 / span 2; grid-column:2; color:#fff; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:32px; font-weight:950; line-height:.95; text-align:right; letter-spacing:-.08em; }
.chart-standing-summary strong small { margin-left:3px; color:var(--standing-accent); font-family:inherit; font-size:11px; letter-spacing:0; }
.chart-standing-summary em { color:#71776f; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.standing-group { margin-top:24px; }
.standing-group + .standing-group { margin-top:30px; padding-top:24px; border-top:1px dashed rgba(255,255,255,.1); }
.standing-group-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:11px; }
.standing-group-head h3 { display:flex; align-items:center; gap:8px; margin:0; color:#f0f3ec; font-size:13px; font-weight:900; letter-spacing:-.015em; }
.standing-group-head h3 svg { width:14px; height:14px; color:#e2bd67; }
.standing-group-head > span { color:#6f756d; font-size:10px; font-weight:700; }
.standing-live-dot { width:7px; height:7px; border-radius:50%; background:var(--standing-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--standing-accent) 12%,transparent),0 0 14px color-mix(in srgb,var(--standing-accent) 50%,transparent); }
.standing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.standing-card-wrap { min-width:0; }
.standing-card { position:relative; display:grid; grid-template-columns:84px minmax(0,1fr) 20px; align-items:center; min-height:106px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(255,255,255,.028); color:inherit; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.standing-card:after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,var(--standing-accent),transparent 70%); opacity:0; transition:opacity .18s ease; }
.standing-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--standing-accent) 36%,transparent); background:rgba(255,255,255,.045); box-shadow:0 14px 30px rgba(0,0,0,.2); }
.standing-card:hover:after { opacity:1; }
.standing-card:focus-visible { outline:2px solid var(--standing-accent); outline-offset:3px; }
.standing-rank { position:relative; display:flex; align-items:baseline; justify-content:center; align-self:stretch; padding:24px 8px; border-right:1px solid rgba(255,255,255,.07); background:color-mix(in srgb,var(--standing-accent) 6%,transparent); }
.standing-rank-number { color:#fff; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:34px; font-weight:950; line-height:1; letter-spacing:-.09em; }
.standing-rank-unit { margin-left:4px; color:var(--standing-accent); font-size:10px; font-weight:900; }
.standing-card-body { display:block; min-width:0; padding:17px 14px; }
.standing-card-kicker { display:flex; align-items:center; gap:5px; color:var(--standing-accent); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:8px; font-weight:900; letter-spacing:.11em; }
.standing-trophy { width:11px; height:11px; }
.standing-card-title { display:block; overflow:hidden; margin-top:6px; color:#f4f6f0; font-size:14px; font-weight:900; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.standing-card-foot { display:flex; align-items:center; gap:10px; margin-top:10px; }
.standing-move { display:inline-flex; align-items:center; gap:5px; color:#858b82; font-size:10px; font-weight:750; }
.standing-move-value { display:inline-grid; place-items:center; min-width:29px; height:20px; padding:0 6px; border-radius:6px; background:rgba(255,255,255,.06); color:#a9afa6; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9px; font-weight:950; }
.standing-move.is-up { color:#c4d96e; }
.standing-move.is-up .standing-move-value { background:rgba(196,217,110,.14); color:#c4d96e; }
.standing-move.is-down { color:#d38d92; }
.standing-move.is-down .standing-move-value { background:rgba(211,141,146,.13); color:#e4a1a5; }
.standing-move.is-new { color:#ffb1ce; }
.standing-move.is-new .standing-move-value { background:rgba(255,154,193,.14); color:#ffb1ce; }
.standing-previous { padding-left:10px; border-left:1px solid rgba(255,255,255,.09); color:#70766e; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9px; font-weight:700; white-space:nowrap; }
.standing-card-arrow { width:15px; height:15px; color:#5f655e; transition:color .18s ease,transform .18s ease; }
.standing-card:hover .standing-card-arrow { color:var(--standing-accent); transform:translateX(2px); }
.standing-card.is-archive { --standing-accent:#e2bd67; background:linear-gradient(110deg,rgba(226,189,103,.065),rgba(255,255,255,.022)); }
.standing-card.is-archive .standing-rank { background:rgba(226,189,103,.08); }
.standing-archive-meta { display:block; margin-top:9px; color:#887d64; font-size:10px; font-weight:750; }
@media (max-width:700px) {
  .chart-standing { margin-top:32px; padding:18px 14px; border-radius:22px; }
  .chart-standing-head { align-items:stretch; gap:14px; padding:0 2px 18px; }
  .chart-standing-head p { max-width:250px; font-size:11px; }
  .chart-standing-summary { align-self:flex-end; min-width:96px; padding:10px; }
  .chart-standing-summary strong { font-size:26px; }
  .chart-standing-summary em { display:none; }
  .standing-group { margin-top:19px; }
  .standing-group + .standing-group { margin-top:23px; padding-top:20px; }
  .standing-group-head { align-items:flex-end; margin-bottom:9px; }
  .standing-group-head > span { max-width:150px; text-align:right; }
  .standing-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
  .standing-card { grid-template-columns:72px minmax(0,1fr) 18px; min-height:94px; border-radius:16px; }
  .standing-rank { padding:20px 6px; }
  .standing-rank-number { font-size:30px; }
  .standing-card-body { padding:14px 12px; }
  .standing-card-title { margin-top:5px; font-size:13px; }
  .standing-card-foot { margin-top:8px; }
}
@media (max-width:390px) {
  .chart-standing-head { display:block; }
  .chart-standing-summary { display:inline-grid; float:right; margin-top:-48px; }
  .chart-standing-head p { max-width:210px; padding-right:10px; }
  .standing-group-head > span,.standing-previous { display:none; }
}

/* Compact, continuous standing board */
.chart-standing { margin-top:32px; padding:18px 20px; border-radius:22px; background:radial-gradient(circle at 96% 0,color-mix(in srgb,var(--standing-accent) 10%,transparent),transparent 28%),#111311; box-shadow:none; }
.chart-standing-head { align-items:center; padding:0 0 14px; }
.chart-standing-head h2 { margin-top:6px; font-size:19px; }
.chart-standing-head p { display:none; }
.chart-standing-summary { display:flex; grid-template-columns:none; align-items:baseline; gap:5px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.chart-standing-summary > span { font-size:8px; }
.chart-standing-summary strong { display:inline-flex; grid-row:auto; grid-column:auto; align-items:baseline; font-size:18px; letter-spacing:-.05em; }
.chart-standing-summary strong small { font-size:9px; }
.chart-standing-summary em { padding-left:8px; border-left:1px solid rgba(255,255,255,.1); font-size:8px; }
.standing-group { margin-top:14px; }
.standing-group + .standing-group { margin-top:15px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); }
.standing-group-head { margin-bottom:7px; }
.standing-group-head h3 { font-size:11px; }
.standing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.standing-card-wrap { border-bottom:1px solid rgba(255,255,255,.06); }
.standing-card-wrap:nth-child(odd) { border-right:1px solid rgba(255,255,255,.06); }
.standing-card-wrap:last-child,.standing-card-wrap:nth-last-child(2):nth-child(odd) { border-bottom:0; }
.standing-card { grid-template-columns:54px minmax(0,1fr) 18px; min-height:68px; border:0; border-radius:0; background:transparent; }
.standing-card:after { display:none; }
.standing-card:hover { transform:none; border-color:transparent; background:color-mix(in srgb,var(--standing-accent) 5%,transparent); box-shadow:none; }
.standing-rank { padding:12px 5px; border-right:0; background:transparent; }
.standing-rank-number { font-size:25px; }
.standing-rank-unit { margin-left:3px; font-size:9px; }
.standing-card-body { padding:10px 8px 10px 2px; }
.standing-card-kicker { display:none; }
.standing-card-title { margin-top:0; font-size:12px; }
.standing-card-foot { gap:7px; margin-top:6px; }
.standing-move { gap:4px; font-size:9px; }
.standing-move-value { min-width:25px; height:17px; padding:0 4px; font-size:8px; }
.standing-previous { padding-left:7px; font-size:8px; }
.standing-card-arrow { width:13px; height:13px; }
.standing-card.is-archive { background:transparent; }
.standing-card.is-archive .standing-rank { background:transparent; }
.standing-archive-meta { margin-top:5px; font-size:9px; }
.standing-groups.has-both { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.standing-groups.has-both .standing-group + .standing-group { margin-top:14px; padding-top:0; padding-left:18px; border-top:0; border-left:1px solid rgba(255,255,255,.07); }
.standing-groups.has-both .standing-grid { grid-template-columns:minmax(0,1fr); }
.standing-groups.has-both .standing-card-wrap:nth-child(odd) { border-right:0; }
.standing-groups.has-both .standing-card-wrap:nth-last-child(2):nth-child(odd) { border-bottom:1px solid rgba(255,255,255,.06); }
@media (max-width:700px) {
  .chart-standing { margin-top:28px; padding:15px 14px; border-radius:18px; }
  .chart-standing-head { align-items:center; gap:10px; padding:0 0 12px; }
  .chart-standing-head h2 { font-size:17px; }
  .chart-standing-summary { display:flex; align-self:auto; min-width:0; padding:0; }
  .chart-standing-summary strong { font-size:17px; }
  .chart-standing-summary em { display:none; }
  .standing-group { margin-top:12px; }
  .standing-group + .standing-group { margin-top:13px; padding-top:12px; }
  .standing-group-head { align-items:center; }
  .standing-grid { grid-template-columns:minmax(0,1fr); }
  .standing-card-wrap:nth-child(odd) { border-right:0; }
  .standing-card-wrap:nth-last-child(2):nth-child(odd) { border-bottom:1px solid rgba(255,255,255,.06); }
  .standing-card-wrap:last-child { border-bottom:0; }
  .standing-card { grid-template-columns:50px minmax(0,1fr) 16px; min-height:64px; border-radius:0; }
  .standing-rank { padding:10px 4px; }
  .standing-rank-number { font-size:23px; }
  .standing-card-body { padding:9px 7px 9px 0; }
  .standing-card-title { font-size:12px; }
  .standing-card-foot { margin-top:5px; }
  .standing-groups.has-both { grid-template-columns:minmax(0,1fr); gap:0; }
  .standing-groups.has-both .standing-group + .standing-group { margin-top:13px; padding-top:12px; padding-left:0; border-top:1px solid rgba(255,255,255,.07); border-left:0; }
}
@media (max-width:390px) {
  .chart-standing-head { display:flex; }
  .chart-standing-summary { float:none; margin-top:0; }
  .standing-group-head > span { display:none; }
}
.standing-card-wrap[hidden] { display:none; }
.standing-more[hidden] { display:none; }
.standing-more { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:32px; margin-top:5px; border:0; border-radius:8px; background:transparent; color:#858b82; font-size:10px; font-weight:800; cursor:pointer; transition:background .15s ease,color .15s ease; }
.standing-more:hover { background:rgba(255,255,255,.04); color:var(--standing-accent); }
.standing-more:focus-visible { outline:2px solid var(--standing-accent); outline-offset:2px; }
.standing-more em { padding:2px 5px; border-radius:5px; background:color-mix(in srgb,var(--standing-accent) 10%,transparent); color:var(--standing-accent); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:8px; font-style:normal; }
.standing-more svg { width:13px; height:13px; transition:transform .18s ease; }
#landingFavorite.is-on { border-color:rgba(196,217,110,.45); background:rgba(196,217,110,.12); color:#c4d96e; }
#landingFavorite.is-on svg { fill:currentColor; }
.search-query-tags { display:flex; flex-wrap:wrap; gap:8px; }
.search-query-tag { max-width:100%; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); padding:7px 12px; color:#d8ddd4; font-size:12px; font-weight:700; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.search-query-tag:hover { border-color:rgba(196,217,110,.45); color:#c4d96e; }
#searchResults:empty { display:none; margin:0; }
.search-result { width:100%; min-width:0; overflow:hidden; color:inherit; text-decoration:none; }
.search-result strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; word-break:break-word; }
.music-desc-panel { display:flex; min-height:0; flex-direction:column; }
.music-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; min-height:0; max-height:240px; flex:1 1 auto; overflow:hidden; }
@media (min-width:1024px) {
  .music-desc-panel:not(.is-open) { height:0; min-height:100%; }
  .music-desc { max-height:none; -webkit-line-clamp:unset; }
}
.music-desc-panel.is-open .music-desc,
.music-desc.is-open { display:block; max-height:none; flex:none; overflow:visible; -webkit-line-clamp:unset; }
.description-dialog { width:min(640px,100%); }
.description-modal-body { margin-top:16px; max-height:min(62vh,560px); overflow:auto; color:#d7ddd4; font-size:14px; font-weight:600; line-height:1.75; white-space:pre-wrap; word-break:break-word; }
.register-form input { display:block; width:100%; height:46px; margin-top:8px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#0b0d0c; padding:0 14px; color:#f2f4ed; outline:none; }
.register-form input:focus { border-color:rgba(196,217,110,.45); }
.register-login-lead { margin:14px 0 0; color:#d7ddd4; font-size:14px; font-weight:600; line-height:1.7; }
.register-login-actions { margin-top:18px; }
.register-form button { display:inline-flex; align-items:center; justify-content:center; height:42px; margin-top:16px; border-radius:11px; background:#c4d96e; padding:0 18px; color:#0b0d0c; font-size:13px; font-weight:800; }
.register-hint { margin:8px 0 0; padding:0 0 0 16px; list-style:disc; color:#777c75; font-size:11px; line-height:1.4; }
.register-hint li { margin:0; }
.register-form button:disabled { cursor:wait; opacity:.55; }
.register-result { margin-top:18px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:#0b0d0c; padding:14px; }
.register-result[hidden] { display:none; }
.register-result.is-ok { border-color:rgba(196,217,110,.28); }
.register-result.is-error,.register-result.is-excluded { border-color:rgba(255,140,140,.28); }
.register-result > p { color:#d8ddd4; font-size:13px; font-weight:700; line-height:1.5; }
.register-result.is-error > p,.register-result.is-excluded > p { color:#ff9b9b; }
.register-exclusion-reason { margin-top:10px; border:1px solid rgba(255,140,140,.22); border-radius:10px; background:rgba(255,140,140,.08); padding:10px 12px; color:#ffb1b1; font-size:12px; font-weight:700; line-height:1.5; }
.register-result article { display:flex; align-items:center; gap:12px; margin-top:12px; }
.register-result-thumb { display:grid; place-items:center; overflow:hidden; width:72px; height:42px; border-radius:8px; background:#1a1f1b; flex:none; }
.register-result-thumb.is-channel { width:44px; height:44px; border-radius:50%; }
.register-result-thumb img { width:100%; height:100%; object-fit:cover; }
.register-result-fallback { color:#8a8f87; }
.register-result strong { display:block; color:#fff; font-size:13px; font-weight:800; }
.register-result small { display:block; margin-top:4px; color:#7f847c; font-size:11px; }
.register-result a { display:inline-block; margin-top:8px; color:#c4d96e; font-size:11px; font-weight:800; }
.register-channel-verify { margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.register-channel-verify.is-top { margin:0 0 28px; padding:0 0 24px; border-top:0; border-bottom:1px solid rgba(255,255,255,.08); }
.register-channel-verify-kicker { margin:0; color:#ff9ac1 !important; font-size:10px !important; font-weight:900 !important; letter-spacing:.18em; line-height:1.2 !important; }
.register-channel-verify h3 { margin:8px 0 0; color:#fff; font-size:18px; font-weight:900; letter-spacing:-.035em; }
.register-channel-verify > p:not(.register-channel-verify-kicker) { margin:10px 0 0; color:#93988f; font-size:13px; font-weight:600; line-height:1.7; word-break:keep-all; }
.register-channel-verify-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; margin-top:16px; border:1px solid rgba(255,154,193,.32); border-radius:11px; background:rgba(255,154,193,.1); padding:0 16px; color:#ffd1e3; font-size:13px; font-weight:800; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.register-channel-verify-button:hover { border-color:rgba(255,154,193,.62); background:rgba(255,154,193,.16); color:#fff; }
.register-channel-verify-button:focus-visible { outline:2px solid #ff9ac1; outline-offset:3px; }
.rss-open { background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; }
.rss-open:hover { color:#fff; }
.rss-modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px 12px; }
.rss-modal[hidden] { display:none; }
.rss-modal-backdrop { position:absolute; inset:0; background:rgba(5,6,5,.72); }
.rss-dialog { position:relative; z-index:1; width:min(440px,100%); padding:22px 22px 20px; border:var(--modal-border); border-radius:22px; background:#121512; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.rss-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rss-dialog-head h2 { display:flex; align-items:center; gap:8px; margin:0; color:#fff; font-size:20px; font-weight:800; letter-spacing:-.04em; }
.rss-dialog-head h2 svg { color:#c4d96e; }
.rss-dialog-close { display:grid; place-items:center; width:36px; height:36px; flex:none; border:0; border-radius:12px; color:#8a8f87; background:rgba(255,255,255,.04); cursor:pointer; }
.rss-dialog-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.rss-dialog-lead { margin:14px 0 0; color:#b7bcb3; font-size:13px; font-weight:600; line-height:1.55; }
.rss-url-row { display:flex; gap:8px; margin-top:16px; }
.rss-url-row input { flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#0c0f0d; color:#f2f4ed; font-size:13px; font-weight:600; }
.rss-url-row input:focus { outline:none; border-color:#c4d96e; }
.rss-copy { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:42px; padding:0 14px; border:0; border-radius:12px; background:#c4d96e; color:#10130f; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.rss-copy:hover { filter:brightness(1.05); }
.rss-copy.is-done { background:rgba(196,217,110,.22); color:#c4d96e; }
.rss-open-feed { display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:#c4d96e; font-size:12px; font-weight:800; }
.rss-open-feed:hover { color:#fff; }
.share-modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px 12px; }
.share-modal[hidden] { display:none; }
.share-modal-backdrop { position:absolute; inset:0; background:rgba(5,6,5,.72); }
.share-dialog { position:relative; z-index:1; width:min(440px,100%); padding:22px 22px 20px; border:var(--modal-border); border-radius:22px; background:#121512; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.share-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.share-dialog-head h2 { display:flex; align-items:center; gap:8px; margin:0; color:#fff; font-size:20px; font-weight:800; letter-spacing:-.04em; }
.share-dialog-head h2 svg { color:#c4d96e; }
.share-dialog-close { display:grid; place-items:center; width:36px; height:36px; flex:none; border:0; border-radius:12px; color:#8a8f87; background:rgba(255,255,255,.04); cursor:pointer; }
.share-dialog-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.share-dialog-lead { margin:14px 0 0; color:#b7bcb3; font-size:13px; font-weight:600; line-height:1.55; }
.share-url-row { margin-top:16px; }
.share-url-row input { width:100%; height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#0c0f0d; color:#f2f4ed; font-size:13px; font-weight:600; }
.share-url-row input:focus { outline:none; border-color:#c4d96e; }
.share-actions { display:flex; gap:8px; margin-top:12px; }
.share-copy, .share-native { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1; height:42px; padding:0 14px; border-radius:12px; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.share-copy { border:0; background:#c4d96e; color:#10130f; }
.share-copy:hover { filter:brightness(1.05); }
.share-copy.is-done { background:rgba(196,217,110,.22); color:#c4d96e; }
.share-native { border:1px solid rgba(196,217,110,.35); background:rgba(196,217,110,.08); color:#c4d96e; }
.share-native:hover { background:rgba(196,217,110,.16); color:#fff; }
@media (max-width:420px) {
  .rss-url-row { flex-direction:column; }
  .rss-copy { width:100%; }
  .share-actions { flex-direction:column; }
}
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); color:#8b9088; font-size:12px; font-weight:800; }
.footer-legal a { color:#c4d96e; }
.footer-legal a:hover { color:#fff; }
.footer-help-open { background:none; border:0; padding:0; color:#c4d96e; font:inherit; font-weight:800; cursor:pointer; }
.footer-help-open:hover { color:#fff; }
.help-done-copy { margin:16px 0 0; color:#cbd0c7; font-size:14px; font-weight:600; line-height:1.65; }
.help-done-note { margin:10px 0 0; color:#f2f4ed; font-size:14px; font-weight:800; line-height:1.6; }
.help-done-actions { display:flex; gap:8px; margin-top:18px; }
.help-done-actions .member-submit { flex:1; width:auto; min-width:0; text-decoration:none; }
.inbox-help-consent { margin:0 0 10px; color:#93988f; font-size:12px; font-weight:600; line-height:1.55; }
.inbox-help-consent[hidden], #inboxContactConsent[hidden] { display:none; }
.member-consent-lead { margin:14px 0 0; color:#93988f; font-size:13px; font-weight:600; line-height:1.6; }
.member-consent-email { margin:10px 0 0; color:#c4d96e; font-size:12px; font-weight:800; word-break:break-all; }
.member-consent-email[hidden] { display:none; }
.member-consent-check { display:flex; align-items:flex-start; gap:10px; color:#d7ddd4; font-size:13px; font-weight:700; line-height:1.5; cursor:pointer; }
.member-consent-check input { margin-top:3px; width:16px; height:16px; accent-color:#c4d96e; }
.member-consent-check a { color:#c4d96e; }
.member-consent-check a:hover { color:#fff; }
.legal-doc { margin-top:36px; }
.legal-toc { margin:0 0 8px; padding:0; border:0; background:transparent; }
.legal-toc p { margin:0 0 10px; color:#c4d96e; font-size:10px; font-weight:800; letter-spacing:.16em; }
.legal-toc ol { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; padding:0; list-style:none; }
.legal-toc a { color:#93988f; font-size:13px; font-weight:700; }
.legal-toc a:hover { color:#fff; }
.legal-section { margin:0; padding:28px 0 0; border:0; background:transparent; }
.legal-section + .legal-section { padding-top:32px; }
.legal-section h2 { margin:0 0 12px; color:#fff; font-size:1.12rem; font-weight:900; letter-spacing:-.03em; }
.legal-section h3 { margin:18px 0 8px; color:#e8ebe3; font-size:.95rem; font-weight:800; letter-spacing:-.02em; }
.legal-section p, .legal-section li { color:#b7bcb3; font-size:15px; font-weight:500; line-height:1.85; }
.legal-section p { margin:0 0 12px; }
.legal-section ul { margin:0 0 14px; padding-left:1.15rem; }
.legal-section li { margin:0 0 6px; }
.legal-section a { color:#c4d96e; word-break:break-all; }
.legal-section a:hover { color:#fff; }
.legal-section strong { color:#e8ebe3; font-weight:800; }
html.adminmode .now-playing-video { isolation:isolate; }
html.adminmode .now-playing-video iframe { position:relative; z-index:1; }
html.adminmode .player-visualizer-layer {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  transform:translateZ(1px);
}
html.adminmode .player-visualizer {
  position:absolute; left:0; right:0; bottom:0; display:block; width:100%; height:48%;
}
html.adminmode .now-playing-video.is-visualizer-on {
  display:grid; grid-template-rows:minmax(0,1fr) 68px;
}
html.adminmode .now-playing-video.is-visualizer-on iframe { grid-row:1; height:100%; }
html.adminmode .now-playing-video.is-visualizer-on .player-visualizer-layer {
  position:relative; inset:auto; grid-row:2; height:100%; transform:none;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
}
html.adminmode .now-playing-video.is-visualizer-on .player-visualizer {
  inset:0; height:100%;
}
html.adminmode .player-visualizer-btn.is-bar {
  display:grid; place-items:center; width:auto; height:auto; color:#8c9189;
  border:0; background:transparent; padding:0;
}
html.adminmode .player-visualizer-btn.is-bar:hover { color:#fff; }
html.adminmode .player-visualizer-btn.is-bar[aria-pressed="true"],
html.adminmode .now-playing-video.is-visualizer-on ~ * #toggleVisualizer,
html.adminmode #musicPlayer.is-visualizer-on #toggleVisualizer { color:#c4d96e; }
html.adminmode .player-visualizer-hint {
  position:absolute; top:8px; left:8px; z-index:4; max-width:calc(100% - 16px);
  margin:0; padding:5px 8px; border-radius:8px; background:rgba(0,0,0,.62);
  color:#e8eee4; font-size:10px; font-weight:700; line-height:1.4;
  transform:translateZ(1px);
}
html.adminmode .player-visualizer-hint.hidden { display:none; }
.player-visualizer-layer, .player-visualizer, .player-visualizer-btn, .player-visualizer-hint, .player-visualizer-settings { display:none; }
html.adminmode .player-visualizer-layer { display:block; }
html.adminmode .player-visualizer-btn { display:grid; }
html.adminmode .player-visualizer-hint:not(.hidden) { display:block; }
html.adminmode .player-visualizer-settings {
  position:absolute; top:4px; right:6px; z-index:7;
  display:none; place-items:center; width:24px; height:24px;
  border:0; border-radius:8px; background:rgba(0,0,0,.45); color:#c8cdc4;
  pointer-events:auto;
}
html.adminmode .now-playing-video .player-visualizer-settings { display:grid; }
html.adminmode .player-visualizer-settings:hover { color:#c4d96e; background:rgba(0,0,0,.7); }
.visualizer-display-switch {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#0c0f0d;
  color:#d7ddd4; font-size:13px; font-weight:700; cursor:pointer;
}
.visualizer-display-switch:has(input:checked) { border-color:rgba(196,217,110,.45); }
.visualizer-display-track { position:relative; flex:0 0 42px; width:42px; height:24px; }
.visualizer-display-switch input { position:absolute; opacity:0; width:0; height:0; }
.visualizer-display-track i {
  display:block; width:42px; height:24px; border-radius:999px; background:#3a4038; transition:background .18s;
}
.visualizer-display-track i:after {
  content:""; position:absolute; left:3px; top:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .18s;
}
.visualizer-display-switch input:checked + i { background:#c4d96e; }
.visualizer-display-switch input:checked + i:after { transform:translateX(18px); }
.visualizer-type-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.visualizer-type-card {
  display:flex; flex-direction:column; gap:8px; padding:10px;
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  background:#0c0f0d; color:inherit; text-align:left; cursor:pointer;
}
.visualizer-type-card:hover { border-color:rgba(196,217,110,.4); }
.visualizer-type-card.is-active { border-color:#c4d96e; background:rgba(196,217,110,.08); }
.visualizer-type-preview { display:block; width:100%; height:72px; border-radius:10px; background:#080a09; }
.visualizer-type-card strong { color:#fff; font-size:13px; font-weight:800; }
.visualizer-type-card span { color:#858a82; font-size:11px; font-weight:600; }
.contact-compose-target { margin:12px 0 0; color:#c4d96e; font-size:13px; font-weight:700; }
.contact-field { display:flex; flex-direction:column; gap:8px; color:#d7ddd4; font-size:13px; font-weight:700; }
.contact-chips { display:flex; flex-wrap:wrap; gap:8px; }
.contact-chip { height:34px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); color:#d8ddd4; font-size:12px; font-weight:800; cursor:pointer; }
.contact-chip:hover { border-color:rgba(196,217,110,.4); color:#c4d96e; }
.contact-chip.is-on { border-color:transparent; background:#c4d96e; color:#10130f; }
.contact-count { margin:-6px 0 0; color:#7f847c; font-size:11px; font-weight:700; text-align:right; }
.contact-count.is-short { color:#ff9b9b; }
.inbox-board { display:grid; gap:14px; margin-top:22px; min-height:520px; }
.inbox-list-pane, .inbox-detail-pane { min-width:0; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:#121412; }
.inbox-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 0; color:#fff; font-size:14px; font-weight:800; }
#inboxUnreadHint { color:#c4d96e; font-size:11px; font-weight:800; }
.inbox-list { display:flex; flex-direction:column; gap:4px; max-height:min(68vh,720px); overflow:auto; padding:12px; }
.inbox-item { display:flex; align-items:flex-start; gap:10px; width:100%; padding:10px; border:0; border-radius:14px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.inbox-item:hover, .inbox-item.is-on { background:rgba(255,255,255,.05); }
.inbox-item.is-unread .inbox-item-name { color:#fff; }
.inbox-item-thumb { width:36px; height:36px; flex:none; overflow:hidden; border-radius:999px; background:#2a2e2b; }
.inbox-item-thumb img { width:100%; height:100%; object-fit:cover; }
.inbox-item-thumb.is-empty { display:grid; place-items:center; color:#c4d96e; font-size:12px; font-weight:800; }
.inbox-item-body { min-width:0; flex:1; }
.inbox-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.inbox-item-name { overflow:hidden; color:#e8ebe3; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.inbox-item-time { flex:none; color:#6f746d; font-size:11px; font-weight:700; }
.inbox-item-preview { overflow:hidden; margin-top:3px; color:#8a8f87; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.inbox-item-tags { display:flex; flex-wrap:nowrap; gap:6px; min-width:0; margin-top:6px; }
.inbox-tag { display:inline-flex; flex:none; max-width:42%; overflow:hidden; padding:2px 7px; border-radius:999px; background:rgba(196,217,110,.12); color:#c4d96e; font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.inbox-tag.is-source { flex:0 1 auto; max-width:46%; background:#fff; color:#10130f; }
.inbox-empty, .inbox-detail-empty { display:grid; place-items:center; gap:10px; padding:48px 20px; color:#858a82; font-size:13px; font-weight:600; text-align:center; }
.inbox-detail-empty svg { width:32px; height:32px; color:#c4d96e; }
.inbox-login { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:28px; padding:48px 24px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:#121412; color:#858a82; text-align:center; }
.inbox-login-mark { display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:rgba(196,217,110,.1); color:#c4d96e; }
.inbox-login-mark svg { width:24px; height:24px; }
.inbox-login p { margin:0; max-width:22rem; font-size:14px; font-weight:600; line-height:1.6; }
.inbox-google { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 18px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#fff; color:#1f1f1f; font-size:14px; font-weight:700; cursor:pointer; }
.inbox-google:hover { filter:brightness(.97); }
.inbox-google svg { display:block; width:18px; height:18px; flex:none; }
.inbox-detail-pane { display:flex; flex-direction:column; min-height:520px; }
#inboxDetailBody { display:flex; flex:1; flex-direction:column; min-height:0; }
.inbox-detail-head { display:flex; align-items:flex-start; gap:10px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.inbox-back { display:none; place-items:center; width:32px; height:32px; flex:none; border:0; border-radius:10px; background:rgba(255,255,255,.05); color:#c4d96e; }
.inbox-detail-name { margin:0; color:#fff; font-size:16px; font-weight:800; }
.inbox-detail-meta { margin:4px 0 0; color:#8a8f87; font-size:12px; font-weight:600; }
.inbox-detail-meta a { color:#c4d96e; }
.inbox-detail-source { margin:6px 0 0; color:#d8ddd4; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-detail-source[hidden] { display:none; }
.inbox-detail-source a { color:#c4d96e; text-decoration:none; }
.inbox-detail-source a:hover { color:#fff; }
.inbox-messages { display:flex; flex:1; flex-direction:column; gap:12px; min-height:220px; max-height:min(46vh,480px); overflow:auto; padding:16px 18px; }
.inbox-official-hint { margin:0; padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.06); color:#93988f; font-size:12px; font-weight:600; line-height:1.55; }
.inbox-official-hint[hidden] { display:none; }
.inbox-bubble { max-width:min(92%,520px); padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.05); color:#e8ebe3; font-size:14px; font-weight:600; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.inbox-bubble.is-me { align-self:flex-end; background:rgba(196,217,110,.14); color:#f4f7ea; }
.inbox-bubble a { color:#c4d96e; text-decoration:underline; word-break:break-all; }
.inbox-bubble a:hover { color:#fff; }
.inbox-bubble.is-me a { color:#d4f944; }
.inbox-bubble-meta { margin-bottom:6px; color:#8a8f87; font-size:11px; font-weight:700; }
.inbox-reply { display:flex; flex-direction:column; gap:10px; padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.06); }
.inbox-reply[hidden] { display:none; }
@media (min-width:900px) {
  .inbox-board { grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr); }
}
.favorite-page { display:flex; flex-direction:column; gap:8px; }
.favorite-hero, .playlist-manager-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.favorite-playlists-link, .playlist-create-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none; min-height:42px; padding:0 15px; border:1px solid rgba(196,217,110,.42); border-radius:8px; background:rgba(196,217,110,.08); color:#c4d96e; font-size:13px; font-weight:850; text-decoration:none; cursor:pointer; }
.favorite-playlists-link:hover, .playlist-create-button:hover { border-color:#c4d96e; background:#c4d96e; color:#0d100c; }
.playlist-create-button:disabled { opacity:.45; cursor:not-allowed; }
.playlist-list-head { display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); }
.playlist-list-head h2 { margin:0; color:#fff; font-size:16px; font-weight:900; }
.playlist-list-head span { color:#8a8f87; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; font-weight:700; }
.playlist-manager-list { min-height:180px; }
.playlist-manager-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:stretch; border-bottom:1px solid rgba(255,255,255,.08); }
.playlist-manager-open { display:grid; grid-template-columns:48px minmax(0,1fr) 18px; align-items:center; gap:14px; min-width:0; padding:14px 4px; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.playlist-manager-row:hover { background:rgba(255,255,255,.025); }
.playlist-manager-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(196,217,110,.18); border-radius:8px; background:#171a16; color:#c4d96e; }
.playlist-manager-icon svg { width:20px; height:20px; }
.playlist-manager-open strong { display:block; overflow:hidden; color:#f4f6f0; font-size:14px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.playlist-manager-open em { display:block; margin-top:5px; color:#858a82; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-style:normal; font-weight:700; }
.playlist-manager-chevron { width:16px; height:16px; color:#666c64; }
.playlist-manager-delete { display:grid; place-items:center; align-self:center; width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:#6f746c; cursor:pointer; opacity:0; }
.playlist-manager-row:hover .playlist-manager-delete, .playlist-manager-delete:focus-visible { opacity:1; }
.playlist-manager-delete:hover { background:rgba(255,107,107,.1); color:#ff7f7f; }
.playlist-manager-delete svg { width:16px; height:16px; }
.playlist-manager-empty, .playlist-items-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; padding:30px 16px; color:#7f847c; text-align:center; }
.playlist-manager-empty > svg, .playlist-items-empty > svg { width:28px; height:28px; margin-bottom:12px; color:#c4d96e; }
.playlist-manager-empty strong, .playlist-items-empty strong { color:#dfe3db; font-size:14px; }
.playlist-manager-empty span, .playlist-items-empty span { margin-top:7px; font-size:12px; line-height:1.5; }
.playlist-manager-empty button { margin-top:16px; padding:9px 14px; border:1px solid rgba(196,217,110,.38); border-radius:8px; background:none; color:#c4d96e; font-weight:800; cursor:pointer; }
.playlist-create-dialog { width:min(440px,100%); }
.playlist-items-dialog { display:flex; flex-direction:column; max-height:min(82vh,760px); overflow:hidden; }
.playlist-dialog-count { margin:4px 0 0; color:#8a8f87; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:700; }
.playlist-items-list { min-height:140px; margin-top:14px; overflow:auto; border-top:1px solid rgba(255,255,255,.1); }
.playlist-item-row { display:grid; grid-template-columns:28px 52px minmax(0,1fr) 38px; align-items:center; gap:10px; min-height:72px; padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.08); background:#121512; cursor:grab; transition:opacity .15s,background .15s,border-color .15s; }
.playlist-item-row:active { cursor:grabbing; }
.playlist-item-row.is-dragging { opacity:.42; }
.playlist-item-row.is-drag-over { border-top:2px solid #c4d96e; background:rgba(196,217,110,.05); }
.playlist-drag-handle, .playlist-item-remove { display:grid; place-items:center; width:28px; height:34px; padding:0; border:0; border-radius:7px; background:none; color:#686e66; cursor:grab; }
.playlist-drag-handle:hover, .playlist-drag-handle:focus-visible { color:#c4d96e; }
.playlist-drag-handle svg, .playlist-item-remove svg { width:16px; height:16px; }
.playlist-item-row img { width:52px; height:52px; border-radius:7px; object-fit:cover; }
.playlist-item-copy { min-width:0; }
.playlist-item-copy a { display:block; overflow:hidden; color:#f1f3ed; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.playlist-item-copy a:hover { color:#c4d96e; }
.playlist-item-copy em { display:block; overflow:hidden; margin-top:5px; color:#777c75; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.playlist-item-remove { width:34px; cursor:pointer; opacity:0; }
.playlist-item-row:hover .playlist-item-remove, .playlist-item-remove:focus-visible { opacity:1; }
.playlist-item-remove:hover { background:rgba(255,107,107,.1); color:#ff7f7f; }
@media (max-width:640px) {
  .favorite-hero, .playlist-manager-hero { align-items:stretch; flex-direction:column; }
  .favorite-playlists-link, .playlist-create-button { align-self:flex-start; }
  .playlist-manager-delete, .playlist-item-remove { opacity:1; }
  .playlist-item-row { grid-template-columns:24px 46px minmax(0,1fr) 34px; gap:8px; }
  .playlist-item-row img { width:46px; height:46px; }
}
.favorite-section-head { display:flex; align-items:center; gap:8px; min-width:0; }
.favorite-section-title { margin:0; color:#fff; font-size:16px; font-weight:900; letter-spacing:-.03em; }
.favorite-section-count { color:#8a8f87; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:700; }
.favorite-channel-more-btn { margin-left:auto; padding:0; border:0; background:none; color:#c4d96e; font-size:12px; font-weight:800; cursor:pointer; }
.favorite-channel-more-btn:hover { color:#fff; }
.favorite-channel-scroller { display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; scroll-snap-type:x mandatory; }
.favorite-channel-scroller.is-empty { display:block; overflow:visible; padding:0; }
html.adminmode .favorite-channel-scroller > .admin-mode-target.is-block { flex:0 0 auto; width:auto; }
.favorite-channel-card { display:flex; flex-direction:column; align-items:center; flex:0 0 92px; width:92px; gap:8px; padding:12px 8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#141714; text-align:center; scroll-snap-align:start; text-decoration:none; }
.favorite-channel-card:hover { border-color:rgba(196,217,110,.35); background:#181b18; }
.favorite-channel-card-icon { display:grid; place-items:center; width:56px; height:56px; overflow:hidden; border-radius:999px; background:#202420; }
.favorite-channel-card-icon img { width:100%; height:100%; object-fit:cover; }
.favorite-channel-card strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#fff; font-size:12px; font-weight:800; line-height:1.3; word-break:break-word; }
.favorite-channel-card em { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-style:normal; font-weight:700; color:#8a8f87; }
.favorite-channel-more { border-style:dashed; color:inherit; cursor:pointer; font:inherit; }
.favorite-channel-more .favorite-channel-card-icon { color:#c4d96e; }
.favorite-channel-dialog { display:flex; flex-direction:column; overflow:hidden; }
.favorite-channel-modal-list { overflow:auto; min-height:0; max-height:min(62vh,560px); margin-top:14px; }
.favorite-channel-modal-row { display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.08); text-decoration:none; }
.favorite-channel-modal-row:hover { background:rgba(255,255,255,.025); }
.favorite-channel-modal-row img, .favorite-channel-modal-fallback { width:40px; height:40px; flex:none; border-radius:999px; object-fit:cover; background:#202420; }
.favorite-channel-modal-fallback { display:grid; place-items:center; color:#ff9ac1; font-size:13px; font-weight:900; }
.favorite-channel-modal-row strong { display:block; color:#fff; font-size:14px; font-weight:800; }
.favorite-channel-modal-row em { display:block; margin-top:3px; color:#8a8f87; font-size:11px; font-style:normal; font-weight:700; }
@media (min-width:940px) {
  .favorite-page { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:40px; align-items:start; }
  .favorite-page-right { border-left:1px solid rgba(255,255,255,.08); padding-left:32px; }
}
@media (max-width:899px) {
  .inbox-board.is-open .inbox-list-pane { display:none; }
  .inbox-board:not(.is-open) .inbox-detail-pane { display:none; }
  .inbox-back { display:grid; }
}
.inbox-board.is-empty { display:block; min-height:0; }
.inbox-board.is-empty .inbox-list-pane,
.inbox-board.is-empty .inbox-detail-pane { display:none; }
.inbox-empty-board { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:520px; padding:48px 24px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:#121412; color:#858a82; text-align:center; }
.inbox-empty-board[hidden] { display:none; }
.inbox-empty-board svg { width:32px; height:32px; color:#c4d96e; }
.inbox-empty-board p { margin:0; font-size:14px; font-weight:600; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}