/* RIFFELO DS1-B1.1 — Header and Chart only. DEC-62: no LP1 selectors or assets edited.
   New shared tokens and components are opt-in ds- selectors. */
:root{--ds-bg:#070b13;--ds-glass:rgba(20,24,39,.78);--ds-glass-strong:rgba(10,15,27,.93);--ds-edge:rgba(196,207,232,.15);--ds-text:#f7f5fb;--ds-muted:#b7bdd0;--ds-pink:#f046a8;--ds-radius:16px;--ds-shadow:0 18px 58px rgba(0,0,0,.25);--ds-container:min(calc(100% - 2 * clamp(16px,1.8vw,48px)),2400px)}
.ds-btn-primary{background:var(--ds-pink)!important;color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:0 7px 24px rgba(240,70,168,.23)!important;padding:11px 21px!important;min-height:44px!important;font-weight:700!important;transition:filter .16s ease,box-shadow .16s ease!important}
.ds-btn-primary:hover{filter:brightness(1.12)!important;box-shadow:0 8px 30px rgba(240,70,168,.34)!important}
.ds-header{position:relative!important;z-index:30!important;background:#080d16!important;border:0!important;border-bottom:1px solid var(--ds-edge)!important;box-shadow:none!important}
.ds-header-inner{width:var(--ds-container)!important;max-width:2400px!important;min-height:70px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;gap:clamp(12px,2.1vw,32px)!important;justify-content:space-between!important}
.ds-header .ds-wordmark{flex:0 0 auto;background:none!important;border:0!important;color:#fff!important;letter-spacing:.41em!important;font:400 clamp(15px,1.05vw,20px)/1 Inter,system-ui,sans-serif!important;padding:5px 0!important;-webkit-font-smoothing:antialiased!important;-webkit-text-stroke:0 transparent!important;text-shadow:none!important;margin:0!important;text-transform:uppercase!important;text-align:left!important;white-space:nowrap!important}
.ds-header .ds-primary-nav{flex:1 1 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(12px,1.5vw,30px)!important;background:none!important;box-shadow:none!important;border:0!important;width:auto!important}
.ds-header .ds-primary-nav>button{background:none!important;border:0!important;box-shadow:none!important;position:relative!important;min-height:44px!important;color:#d5d9e6!important;padding:8px 3px!important;font:500 13px/1.3 Inter,Arial,sans-serif!important;border-radius:0!important;white-space:nowrap!important;transform:none!important}
.ds-header .ds-primary-nav>button.active{color:#fff!important}
.ds-header .ds-primary-nav>button.active:after{content:'';position:absolute;height:2px;left:3px;right:3px;bottom:3px;border-radius:2px;background:var(--ds-pink)}
.ds-header .ds-primary-nav>button:not(.active):after{display:none!important}
.ds-header .ds-header-actions{display:flex!important;align-items:center!important;gap:clamp(8px,1.1vw,20px)!important;margin:0!important}
.ds-header .ds-account,.ds-header .ds-bell{background:rgba(255,255,255,.045)!important;border:1px solid var(--ds-edge)!important;border-radius:999px!important;min-height:44px!important;color:var(--ds-text)!important;box-shadow:none!important}
.ds-header .ds-account{padding:3px 11px 3px 4px!important;display:flex!important;align-items:center!important;gap:9px!important}
.ds-header .ds-account img{width:34px!important;height:34px!important;border-radius:50%!important}
.ds-header .ds-bell{width:44px!important;min-width:44px!important;display:grid!important;place-items:center!important}
.ds-header .ds-sign-in{font:500 13px Inter,Arial,sans-serif!important;color:#fff!important;background:transparent!important;border:0!important;min-height:44px!important}
.ds-header .ds-menu-button{display:none!important}
.ds-mobile-menu[hidden]{display:none!important}
.ds-mobile-menu{display:none}
/* A shared kit usable in later DS1 sprints, currently scoped to DS1. */
.ds-glass{background:var(--ds-glass);border:1px solid var(--ds-edge);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
.ds-icon-button{display:grid;place-items:center;border:1px solid var(--ds-edge);border-radius:12px;background:rgba(255,255,255,.025);color:var(--ds-text);min-height:44px;min-width:44px}
.ds-header button:focus-visible,.ds-chart button:focus-visible,.ds-chart [role="button"]:focus-visible,.ds-header a:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
/* Chart content: LP1 standard, actual chart render functions and dataset untouched. */
.ds-chart{background:var(--ds-bg)!important;background-image:none!important;overflow-x:clip!important;color:var(--ds-text)!important;min-height:70vh!important}
.ds-chart .chart-editorial-shell{width:var(--ds-container)!important;max-width:2400px!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(270px,22.5%)!important;column-gap:clamp(12px,1.4vw,25px)!important;row-gap:14px!important;align-items:start!important}
.ds-chart .chart-hero{grid-column:1/-1!important;grid-row:1!important;padding:clamp(26px,3vw,54px) 0 18px!important;min-width:0!important}
.ds-chart .chart-hero .eyebrow{color:#d9aaf2!important;letter-spacing:.22em!important;font-size:12px!important}
.ds-chart .chart-hero h1{font:400 clamp(46px,4.4vw,78px)/1.05 'DM Serif Display',Georgia,serif!important;letter-spacing:-.022em!important;color:var(--ds-text)!important;margin:6px 0!important}
.ds-chart .chart-hero p{color:#c3c5d5!important;font-size:clamp(14px,.95vw,16px)!important}
.ds-chart .chart-board{grid-column:1!important;grid-row:2!important;min-width:0!important;max-width:none!important;background:var(--ds-glass)!important;border:1px solid var(--ds-edge)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow)!important;overflow:hidden!important}
.ds-chart .chart-side{grid-column:2!important;grid-row:2!important;min-width:0!important;display:grid!important;gap:12px!important}
.ds-chart :is(.chart-story,.chart-pulse,.chart-highlights,.chart-side .manager-card){background:var(--ds-glass)!important;border:1px solid var(--ds-edge)!important;border-radius:var(--ds-radius)!important;color:var(--ds-text)!important;box-shadow:none!important;overflow:hidden!important}
.ds-chart :is(.chart-story,.chart-pulse,.chart-highlights){padding:clamp(12px,1.1vw,20px)!important}
.ds-chart .chart-story-icon{display:none!important} /* emoji decoration only; retain article text */
.ds-chart .chart-board-nav{background:var(--ds-glass-strong)!important;border-bottom:1px solid var(--ds-edge)!important;gap:12px!important}
.ds-chart .chart-mode-toggle{background:none!important;border:0!important;box-shadow:none!important;padding:0 14px!important;display:flex!important;align-items:stretch!important}
.ds-chart .chart-mode-toggle button{background:none!important;color:var(--ds-muted)!important;border:none!important;border-radius:0!important;font:600 14px Inter,Arial,sans-serif!important;min-height:58px!important;padding:10px 16px!important;position:relative!important}
.ds-chart .chart-mode-toggle button.active{color:#fff!important;box-shadow:none!important}
.ds-chart .chart-mode-toggle button.active::after{content:'';display:block;position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--ds-pink);border-radius:2px}
.ds-chart .chart-close{border-color:var(--ds-edge)!important;color:var(--ds-text)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:10px 14px!important;flex-wrap:wrap!important}
.ds-chart .chart-close :is(small,strong,b){background:none!important;color:var(--ds-text)!important}
.ds-chart .chart-close b{background:rgba(240,70,168,.07)!important;border:1px solid rgba(240,70,168,.45)!important;border-radius:99px!important;padding:8px 10px!important;font-variant-numeric:tabular-nums!important}
.ds-chart .chart-tier-heading{background:transparent!important;border-color:var(--ds-edge)!important}
.ds-chart .chart-tier-heading>span,.ds-chart .chart-new-week-tag,.ds-chart .movement-new{background:rgba(240,70,168,.12)!important;color:#ff91cd!important;border:1px solid rgba(240,70,168,.5)!important;border-radius:999px!important}
.ds-chart .chart-table-head,.ds-chart .chart-chase-head{background:#0b101a!important;color:var(--ds-muted)!important;border-color:var(--ds-edge)!important}
.ds-chart .current-chart-board :is(.chart-leader,.current-chart-stack>.chart-row,.chart-chase-stack>.chart-chase-row){background:rgba(255,255,255,.009)!important;border-color:var(--ds-edge)!important;transition:background .16s ease,border-color .16s ease!important}
.ds-chart .current-chart-board :is(.chart-leader,.current-chart-stack>.chart-row,.chart-chase-stack>.chart-chase-row):hover{background:rgba(240,70,168,.065)!important;border-color:rgba(240,70,168,.24)!important}
.ds-chart .chart-chase-separator{border-color:var(--ds-edge)!important;background:none!important}
.ds-chart .chart-chase-separator h2{font:400 clamp(25px,2vw,36px) 'DM Serif Display',Georgia,serif!important;color:#fff!important}
.ds-chart .chart-leader-copy>strong,.ds-chart .chart-track strong,.ds-chart .chart-chase-track strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;overflow-wrap:anywhere!important}
.ds-chart .chart-row .chart-position,.ds-chart .chart-chase-row .chart-position,.ds-chart :is(.chart-stat,.chart-chase-stat,.chart-leader-stats) b{font-variant-numeric:tabular-nums!important;color:var(--ds-text)!important}
.ds-chart .chart-row .chart-position,.ds-chart .chart-chase-row .chart-position{padding-left:5px!important;min-width:0!important;box-sizing:border-box!important}
.ds-chart .chart-row :is(.movement-up,.movement-down,.movement-flat),.ds-chart .chart-chase-row :is(.movement-up,.movement-down,.movement-flat){display:block!important;margin:2px 0 0!important;font-size:10px!important;line-height:1.15!important}
/* DS1 glass playback buttons: preserve the existing data-play-song handlers. */
.ds-chart :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play){background:rgba(12,20,32,.64)!important;border:1px solid rgba(222,225,242,.55)!important;color:#fff!important;border-radius:50%!important;box-shadow:0 4px 12px rgba(0,0,0,.25)!important;display:grid!important;place-items:center!important}
.ds-chart :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play):hover{background:rgba(240,70,168,.25)!important;border-color:var(--ds-pink)!important}
.ds-chart :is(.chart-leader-actions,.chart-row-actions,.chart-chase-actions) button{border:1px solid var(--ds-edge)!important;background:rgba(255,255,255,.027)!important;color:#e9ebf5!important;border-radius:12px!important}
.ds-chart :is(.chart-leader-actions,.chart-row-actions,.chart-chase-actions) .vote-button{color:#f88bc8!important}
.ds-chart :is(.chart-leader-actions,.chart-row-actions,.chart-chase-actions) :is(.vote-button.active,.save-button.active){background:rgba(240,70,168,.15)!important;border-color:rgba(240,70,168,.6)!important}
.ds-chart .chart-cover,.ds-chart .chart-leader-cover{border-radius:9px!important;box-shadow:0 2px 12px rgba(0,0,0,.3)!important}
.ds-chart .chart-pulse h3,.ds-chart .chart-highlights h3{font-family:Inter,Arial,sans-serif!important;font-weight:700!important}
.ds-chart *{scrollbar-width:thin;scrollbar-color:#41465b #0c101d}
.ds-chart *::-webkit-scrollbar{width:8px;height:8px}.ds-chart *::-webkit-scrollbar-thumb{background:#41465b;border-radius:99px}.ds-chart *::-webkit-scrollbar-track{background:#0c101d}
@media(min-width:1101px){
 .ds-chart .current-chart-board{--riffelo-chart-columns:44px minmax(210px,1fr) repeat(5,minmax(48px,64px)) 148px!important;--riffelo-chart-gap:clamp(9px,.7vw,14px)!important;--riffelo-chart-inset:14px!important}
}
@media(min-width:701px) and (max-width:1100px){
 .ds-chart .chart-editorial-shell{grid-template-columns:minmax(0,1fr)!important}
 .ds-chart .chart-hero{grid-column:1!important}
 .ds-chart .chart-board{grid-row:2!important;grid-column:1!important}
 .ds-chart .chart-side{grid-row:3!important;grid-column:1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .ds-chart .current-chart-board{--riffelo-chart-columns:36px minmax(175px,1fr) repeat(5,minmax(46px,1fr)) 148px!important;--riffelo-chart-gap:8px!important;--riffelo-chart-inset:10px!important}
 .ds-chart .chart-leader{row-gap:12px!important}
}
@media(max-width:1050px) and (min-width:701px){
 .ds-chart .current-chart-board .chart-leader{grid-template-rows:auto auto!important}
 .ds-chart .current-chart-board .chart-leader-stats{display:grid!important;grid-column:2/-1!important;grid-row:2!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
 .ds-chart .current-chart-board .chart-leader-stats>span{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
}
@media(max-width:700px){
 .ds-header-inner{min-height:62px!important}
 .ds-header .ds-primary-nav,.ds-header .ds-header-actions>.ds-btn-primary,.ds-header .ds-bell,.ds-header .ds-account,.ds-header .ds-sign-in{display:none!important}
 .ds-header .ds-wordmark{font-size:15px!important;letter-spacing:.30em!important}
 .ds-header .ds-menu-button{display:flex!important;min-width:44px!important;width:44px!important;min-height:44px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;border:1px solid var(--ds-edge)!important;background:rgba(255,255,255,.05)!important;border-radius:12px!important}
 .ds-header .ds-mobile-menu:not([hidden]){display:flex!important;position:absolute!important;z-index:40!important;top:100%!important;left:clamp(12px,4vw,28px)!important;right:clamp(12px,4vw,28px)!important;padding:12px!important;flex-direction:column!important;background:#101524!important;border:1px solid var(--ds-edge)!important;border-radius:14px!important;box-shadow:var(--ds-shadow)!important}
 .ds-mobile-menu>button{color:#fff!important;background:none!important;border:0!important;border-radius:9px!important;padding:12px!important;text-align:left!important;min-height:44px!important;font-weight:500!important}
 .ds-mobile-menu>button.active{background:rgba(240,70,168,.12)!important;border-left:2px solid var(--ds-pink)!important}
 .ds-chart .chart-editorial-shell{width:calc(100% - 24px)!important;max-width:none!important;display:flex!important;flex-direction:column!important;gap:12px!important}
 .ds-chart .chart-hero{width:100%!important;padding:25px 0 8px!important}
 .ds-chart .chart-hero h1{font-size:clamp(36px,10vw,48px)!important}
 .ds-chart .chart-board,.ds-chart .chart-side{width:100%!important;max-width:100%!important}
 .ds-chart .chart-side{display:flex!important;flex-direction:column!important}
 .ds-chart .chart-board-nav{grid-template-columns:minmax(0,1fr)!important}
 .ds-chart .chart-mode-toggle button{min-height:50px!important}
 .ds-chart .chart-close{justify-content:flex-start!important}
 .ds-chart .current-chart-board :is(.chart-leader,.chart-row,.chart-chase-row){border-radius:12px!important}
 .ds-chart :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play){min-width:44px!important;min-height:44px!important}
 .ds-chart :is(.chart-row-actions,.chart-chase-actions,.chart-leader-actions) button{min-width:44px!important;min-height:44px!important}
}
@media(prefers-reduced-motion:reduce){.ds-header *,.ds-chart *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Beat legacy PB1 specificity without editing a frozen or shared stylesheet. */
.app-header.ds-header .ds-primary-nav>button.active:not(.desktop-create-action){background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:#fff!important}
.ds-chart.chart-page .current-chart-board button.chart-leader-play,
.ds-chart.chart-page .current-chart-board button.chart-row-play,
.ds-chart.chart-page .current-chart-board button.chart-chase-play,
.ds-chart.chart-page button.new-this-week-play{background:rgba(10,18,30,.7)!important;background-image:none!important;border:1px solid rgba(226,230,244,.65)!important;border-radius:50%!important;color:#fff!important;box-shadow:0 3px 12px rgba(0,0,0,.35)!important}
.ds-chart.chart-page .current-chart-board button.chart-leader-play:hover,
.ds-chart.chart-page .current-chart-board button.chart-row-play:hover,
.ds-chart.chart-page .current-chart-board button.chart-chase-play:hover{background:rgba(240,70,168,.22)!important;border-color:#f046a8!important}
/* PB1's :is(...,#successPlay) selector has ID-level specificity. This
   #app prefix overtakes it ONLY inside the redesigned Chart. */
#app .ds-chart.chart-page :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play){
 background:rgba(10,18,30,.76)!important;background-color:rgba(10,18,30,.76)!important;
 border:1px solid rgba(230,233,246,.7)!important;border-color:rgba(230,233,246,.7)!important;
 color:#fff!important;box-shadow:0 3px 12px rgba(0,0,0,.3)!important;border-radius:999px!important;
}
#app .ds-chart.chart-page :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play):hover{background-color:rgba(240,70,168,.28)!important;border-color:var(--ds-pink)!important}
@media(max-width:700px){#app .ds-chart.chart-page :is(button.chart-leader-play,button.chart-row-play,button.chart-chase-play,button.new-this-week-play){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}}
#app .ds-header.app-header .ds-primary-nav>button.active{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;filter:none!important}
#app .ds-chart .empty-state .empty-mark{display:none!important}
/* Legacy Chart Story trophy is an emoji; remove decoration, retain live story copy. */
#app .ds-chart.chart-page .chart-story-icon{display:none!important}

/* B1.1: nav belongs beside the wordmark, never centred between the sides. */
#app .ds-header .ds-header-inner { justify-content:flex-start!important; }
#app .ds-header .ds-primary-nav { justify-content:flex-start!important; flex:0 1 auto!important; margin-right:auto!important; }
#app .ds-header .ds-header-actions { flex:0 0 auto!important; margin-left:auto!important; }
/* B1.1: depth/typography from accepted DS1 Page 1 mockup, Chart-scoped only. */
#app .ds-chart.chart-page .chart-board {background:linear-gradient(135deg,rgba(23,31,49,.92),rgba(10,17,31,.93))!important;box-shadow:0 16px 55px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)!important;}
#app .ds-chart.chart-page .chart-side > :is(.chart-side-story,.chart-highlights,.new-this-week-panel) {border:1px solid rgba(206,219,248,.15)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(25,34,52,.9),rgba(10,17,29,.95))!important;box-shadow:0 14px 32px rgba(0,0,0,.23)!important;}
#app .ds-chart.chart-page .chart-leader {background:linear-gradient(110deg,rgba(240,70,168,.075),rgba(38,45,72,.12) 55%,rgba(19,29,50,.17))!important;}
#app .ds-chart.chart-page .chart-hero h1{font-weight:400!important;text-shadow:0 3px 18px rgba(0,0,0,.25)!important;}
#app .ds-chart.chart-page .chart-close b{background:rgba(18,23,36,.75)!important;box-shadow:inset 0 1px rgba(255,255,255,.07)!important;}
@media (max-width:700px){
 /* B1.1: never lose chart titles or metadata to a hard ellipsis on a phone. */
 #app .ds-chart.chart-page :is(.chart-leader-copy>strong,.chart-row .chart-track strong,.chart-chase-row .chart-track strong){
  white-space:normal!important;text-overflow:clip!important;overflow:visible!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  overflow-wrap:break-word!important;word-break:normal!important;max-height:none!important;
 }
 #app .ds-chart.chart-page :is(.chart-mobile-meta,.chart-leader-copy em,.chart-track small,.chart-track em,.chart-row-meta,.chart-chase-meta){
  white-space:normal!important;text-overflow:clip!important;overflow:visible!important;
  max-height:none!important;height:auto!important;word-break:normal!important;overflow-wrap:break-word!important;
 }
 #app .ds-chart.chart-page :is(.chart-row,.chart-chase-row,.chart-leader) {height:auto!important;min-height:0!important;}
}
@media(max-width:700px){
 #app .ds-chart.chart-page .new-this-week-copy{min-width:0!important;}
 #app .ds-chart.chart-page .new-this-week-copy>strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;text-overflow:clip!important;overflow:hidden!important;overflow-wrap:break-word!important;}
}
/* B1.1: faint club-light atmosphere without introducing page imagery. */
#app .ds-chart.chart-page {background-color:#070b13!important;background-image:radial-gradient(ellipse 50% 30% at 79% 4%,rgba(92,43,125,.105),transparent 80%),radial-gradient(ellipse 45% 38% at 8% 35%,rgba(37,72,121,.095),transparent 85%)!important;}
/* Existing Chart Story wording is preserved; the legacy emoji artwork is retired. */
#app .ds-chart.chart-page .chart-side-story-label>span {display:none!important;}

/* DS1-B1.1 / RC2.42: only requested Header + Chart corrections. */
@media(min-width:701px){
 .ds-header .ds-primary-nav{flex:0 1 auto!important;justify-content:flex-start!important;margin-right:auto!important;margin-left:0!important;gap:clamp(13px,1.55vw,29px)!important;}
 .ds-header .ds-header-actions{margin-left:auto!important;flex-shrink:0!important;}
 .ds-header-inner{justify-content:flex-start!important;}
}
/* Closer to the approved Page 1 PNG: deeper glass and deliberate lead-record contrast. */
.ds-chart{background-color:#070b13!important;background-image:radial-gradient(ellipse 74% 35% at 50% 0%,rgba(53,32,77,.17) 0%,rgba(7,11,19,0) 85%)!important;}
.ds-chart .chart-board{background:rgba(16,22,37,.86)!important;border-color:rgba(196,207,232,.20)!important;box-shadow:0 18px 52px rgba(0,0,0,.34)!important;}
.ds-chart .chart-side>:is(.chart-side-story,.chart-highlights,.new-this-week-panel){background:linear-gradient(147deg,rgba(23,29,48,.89),rgba(11,16,29,.93))!important;border:1px solid rgba(196,207,232,.18)!important;border-radius:var(--ds-radius)!important;box-shadow:0 12px 32px rgba(0,0,0,.24)!important;}
.ds-chart .chart-leader{background:linear-gradient(125deg,rgba(35,31,54,.40),rgba(15,19,31,.28))!important;}
.ds-chart .chart-hero h1{font-weight:400!important;text-shadow:0 3px 20px rgba(10,6,23,.14)!important;}
.ds-chart .chart-mode-toggle button{letter-spacing:.005em!important;}
.ds-chart .chart-close b{min-width:92px!important;text-align:center!important;white-space:nowrap!important;}
@media(max-width:700px){
 /* Preserve entire song title and stats; allow content-derived card height. */
 .ds-chart .current-chart-stack .chart-row .chart-track,
 .ds-chart .chart-chase-stack .chart-chase-row .chart-track{min-width:0!important;overflow:visible!important;}
 .ds-chart .current-chart-stack .chart-row .chart-track strong,
 .ds-chart .chart-chase-stack .chart-chase-row .chart-track strong,
 .ds-chart .chart-leader .chart-leader-copy strong{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;line-clamp:2!important;
  white-space:normal!important;overflow-wrap:break-word!important;
  overflow:hidden!important;text-overflow:clip!important;
  max-height:none!important;line-height:1.28!important;
 }
 .ds-chart .current-chart-stack .chart-row .chart-mobile-meta,
 .ds-chart .current-chart-stack .chart-row .chart-row-mobile-meta,
 .ds-chart .current-chart-stack .chart-row .chart-mobile-sub,
 .ds-chart .chart-chase-stack .chart-chase-row .chart-chase-mobile-meta{
   white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
   max-height:none!important;line-height:1.45!important;word-break:normal!important;
 }
 .ds-chart .current-chart-stack .chart-row,
 .ds-chart .chart-chase-stack .chart-chase-row{height:auto!important;min-height:0!important;}
}

/* DS1-B1.2 (8.0-RC2.43): fixed translucent-to-transparent shared app header.
   Opt-in DS1 only. Frozen anonymous LP1 header and lp- selectors untouched. */
:root{--ds-fixed-header-height:clamp(76px,5.1vw,112px);--ds-header-fade-depth:clamp(48px,4vw,84px)}
html:has(#app>.shell>.app-header.ds-header){scroll-padding-top:calc(var(--ds-fixed-header-height) + 16px)}
/* A full-height reserved slot prevents content jumping or being covered on initial load. */
#app>.shell:has(>.app-header.ds-header){padding-top:var(--ds-fixed-header-height)!important}
#app>.shell:has(>.app-header.ds-header) :is([id],a[href^="#"],button,[tabindex]):not(.ds-header *){scroll-margin-top:calc(var(--ds-fixed-header-height) + 18px)}
#app .app-header.ds-header{
 position:fixed!important;inset:0 0 auto!important;top:0!important;left:0!important;right:0!important;
 width:100%!important;height:var(--ds-fixed-header-height)!important;min-height:var(--ds-fixed-header-height)!important;
 z-index:90!important;isolation:isolate!important;background:transparent!important;background-image:none!important;
 border:0!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;
 overflow:visible!important;
}
/* Dark at the actual text row, tapering to zero beneath it. No hard bottom edge. */
#app .app-header.ds-header::before{
 content:"";pointer-events:none;position:absolute;top:0;left:0;right:0;
 height:calc(var(--ds-fixed-header-height) + var(--ds-header-fade-depth));z-index:-1;
 background:linear-gradient(to bottom,rgba(8,10,19,.97) 0%,rgba(8,10,19,.95) 40%,rgba(8,10,19,.86) 56%,rgba(8,10,19,.54) 75%,rgba(8,10,19,0) 100%);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
 #app .app-header.ds-header::after{
  content:"";pointer-events:none;position:absolute;inset:0 0 auto;height:calc(var(--ds-fixed-header-height) + var(--ds-header-fade-depth));z-index:-1;
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.8) 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.8) 60%,transparent 100%);
 }
}
#app .app-header.ds-header>.ds-header-inner{
 height:var(--ds-fixed-header-height)!important;min-height:var(--ds-fixed-header-height)!important;
 width:calc(100% - 2 * clamp(16px,1.8vw,48px))!important;
 max-width:2400px!important;position:relative!important;
 padding:0!important;align-items:center!important;
}
/* Match the frozen LP1 wordmark and desktop navigation, using independent DS1 selectors. */
@media(min-width:1101px){
 #app .app-header.ds-header .ds-wordmark{font-size:clamp(25px,1.72vw,40px)!important;font-weight:400!important;letter-spacing:.29em!important;line-height:1!important}
 #app .app-header.ds-header .ds-primary-nav{gap:clamp(19px,1.75vw,43px)!important}
 #app .app-header.ds-header .ds-primary-nav>button,#app .app-header.ds-header .ds-sign-in{font-size:clamp(11px,.76vw,16px)!important;font-weight:500!important}
 #app .app-header.ds-header .ds-join{min-height:45px!important}
}
@media(min-width:701px) and (max-width:1100px){
 :root{--ds-fixed-header-height:76px}
 #app .app-header.ds-header .ds-wordmark{font-size:22px!important;letter-spacing:.34em!important;font-weight:400!important}
 #app .app-header.ds-header .ds-primary-nav{gap:12px!important}
 #app .app-header.ds-header .ds-primary-nav>button{font-size:11px!important}
}
@media(max-width:700px){
 :root{--ds-fixed-header-height:70px;--ds-header-fade-depth:54px}
 #app .app-header.ds-header .ds-wordmark{font-size:22px!important;letter-spacing:.34em!important;font-weight:400!important}
 #app .app-header.ds-header .ds-menu-button{width:44px!important;height:44px!important}
 /* The menu opens beneath the opaque navigation row, not in the fading zone. */
 #app .app-header.ds-header .ds-mobile-menu:not([hidden]){
  position:absolute!important;top:var(--ds-fixed-header-height)!important;
  z-index:5!important;background:rgba(9,14,27,.985)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 }
}
@media(prefers-reduced-transparency:reduce){
 #app .app-header.ds-header::after{display:none!important}
 #app .app-header.ds-header::before{background:linear-gradient(to bottom,#080a13 0%,#080a13 57%,rgba(8,10,19,.78) 78%,transparent 100%)!important}
}
@media(prefers-reduced-motion:reduce){#app .app-header.ds-header *,#app .app-header.ds-header::before,#app .app-header.ds-header::after{transition:none!important;animation:none!important}}
/* Match the measured LP1 header at the smaller reference widths (not an LP1 edit). */
@media(min-width:1101px) and (max-width:1450px){:root{--ds-fixed-header-height:74px}}
@media(min-width:701px) and (max-width:1100px){:root{--ds-fixed-header-height:65px}}
@media(max-width:700px){
 :root{--ds-fixed-header-height:65px}
 #app .app-header.ds-header>.ds-header-inner{width:calc(100% - 46px)!important}
 #app .app-header.ds-header .ds-wordmark{font-size:24px!important}
}
#app .app-header.ds-header .ds-join{min-height:clamp(43px,2.7vw,54px)!important}

/* DS1-B1.3 / 8.0-RC2.44 — Chart Highlights accent palette only.
   Legacy app.css uses mint (#58eab5 / #65e6b5) on its icon and figure.
   Keep chart wording, handler attributes, layout and all other page colours untouched. */
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>b,
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>b.new {
 color:#F046A8!important;
}
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>em {
 color:#f1eef7!important;
}
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>span {
 color:#b7bdd0!important;
}
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>strong {
 color:#f7f5fb!important;
}
#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>b.new {
 background:rgba(240,70,168,.13)!important;
 border:1px solid rgba(240,70,168,.45)!important;
}

#app .ds-chart.chart-page .chart-highlights .chart-highlight-row>b svg{
 display:block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
 stroke-linejoin:round;stroke-linecap:round;
}

/* DS1-B1.4 / RC2.45: header/Chart hero geometry, no landing selectors. */
/* One shared inset: match LP1 wordmark and action-edge (including LP1 inner padding).
   Desktop >1100: centred LP1 width up to 2400 plus its own inline 2.9vw padding. */
:root{--ds-header-gutter:calc(max(clamp(16px,1.8vw,48px), (100vw - 2400px)/2) + clamp(20px,2.9vw,70px));--ds-header-fade-depth:10px}
@media(max-width:1100px){:root{--ds-header-gutter:23px}}
@media(min-width:801px) and (max-width:1100px){:root{--ds-header-gutter:23px}}
@media(max-width:800px){:root{--ds-header-gutter:23px}}
/* Replace the earlier B1.2 fluid-width rule, without touching the board width. */
#app .app-header.ds-header>.ds-header-inner{
 width:calc(100% - 2 * var(--ds-header-gutter))!important;
 max-width:none!important;margin-inline:var(--ds-header-gutter)!important;
 padding-inline:0!important;
}
/* Desktop fade ends within 10px of the fixed row. Blur uses the same extent. */
#app .app-header.ds-header::before,#app .app-header.ds-header::after{height:calc(var(--ds-fixed-header-height) + var(--ds-header-fade-depth))!important}
#app .app-header.ds-header::before{background:linear-gradient(to bottom,rgba(8,10,19,.97) 0%,rgba(8,10,19,.95) 32%,rgba(8,10,19,.83) 48%,rgba(8,10,19,.61) 64%,rgba(8,10,19,.26) 83%,rgba(8,10,19,0) 100%)!important}
#app .app-header.ds-header::after{
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 39%,rgba(0,0,0,.80) 58%,rgba(0,0,0,.30) 82%,transparent 100%)!important;
 mask-image:linear-gradient(to bottom,#000 0%,#000 39%,rgba(0,0,0,.80) 58%,rgba(0,0,0,.30) 82%,transparent 100%)!important;
}
@media(prefers-reduced-transparency:reduce){#app .app-header.ds-header::before{background:linear-gradient(to bottom,#080a13 0%,rgba(8,10,19,.98) 45%,rgba(8,10,19,.68) 76%,transparent 100%)!important}}
/* Keep the existing wide Chart board; only hero typography aligns with LP1 wordmark. */
#app .ds-chart.chart-page .chart-hero{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:auto auto auto!important;column-gap:clamp(12px,2vw,40px)!important;
 padding:clamp(24px,1.8vw,36px) calc(var(--ds-header-gutter) - clamp(16px,1.8vw,48px)) 16px!important;
 align-items:center!important;
}
#app .ds-chart.chart-page .chart-hero> :is(.eyebrow,h1,p){grid-column:1!important;min-width:0!important}
#app .ds-chart.chart-page .chart-hero>.eyebrow{grid-row:1!important}
#app .ds-chart.chart-page .chart-hero>h1{grid-row:2!important}
#app .ds-chart.chart-page .chart-hero>p{grid-row:3!important}
#app .ds-chart.chart-page .chart-hero>.ds-hero-countdown{
 grid-column:2!important;grid-row:1/4!important;align-self:center!important;
 background:rgba(20,25,43,.82)!important;border:1px solid rgba(224,208,246,.24)!important;
 border-radius:16px!important;box-shadow:0 12px 32px rgba(0,0,0,.19)!important;
 display:flex!important;justify-content:center!important;align-items:flex-end!important;
 flex-direction:column!important;gap:6px!important;min-width:205px!important;max-width:100%!important;
 padding:14px 16px!important;
}
#app .ds-chart.chart-page .chart-hero>.ds-hero-countdown small{color:#d0c4df!important;letter-spacing:.07em!important}
#app .ds-chart.chart-page .chart-board-nav{justify-content:flex-start!important;grid-template-columns:minmax(0,1fr)!important}
/* Tablet: preserve readable countdown by stacking if the hero narrows. */
@media(max-width:1100px){
 #app .ds-chart.chart-page .chart-hero{padding-left:calc(var(--ds-header-gutter) - clamp(16px,1.8vw,48px))!important;padding-right:calc(var(--ds-header-gutter) - clamp(16px,1.8vw,48px))!important;}
 #app .ds-chart.chart-page .chart-hero>.ds-hero-countdown{min-width:186px!important}
}
@media(max-width:800px){
 #app .ds-chart.chart-page .chart-hero{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto auto!important;gap:6px!important;padding-top:20px!important;}
 #app .ds-chart.chart-page .chart-hero>.ds-hero-countdown{grid-column:1!important;grid-row:4!important;width:100%!important;min-width:0!important;align-items:flex-start!important;margin-top:12px!important}
}
/* Previously narrow-centred pages preserve their panels; only outer headings move when possible. */
/* Account for the pre-existing Chart shell's 32px top offset. */
#app .ds-chart.chart-page .chart-hero{padding-top:2px!important}
@media(max-width:800px){#app .ds-chart.chart-page .chart-hero{padding-top:3px!important}}
@media(min-width:801px) and (max-width:1100px){:root{--ds-header-gutter:clamp(16px,1.8vw,48px)}}
@media(max-width:800px){#app .ds-chart.chart-page .chart-hero{padding-left:1px!important}}
@media(max-width:800px){#app .ds-chart.chart-page .chart-hero{padding-right:1px!important}}
/* Keep the Manager's own panel width untouched; align only its existing page eyebrow. */
#app .manager-page .manager-top-strip>.eyebrow{
 transform:translateX(calc(var(--ds-header-gutter) - max(16px,(100vw - 1440px)/2)))!important;
}

/* DS1-B2.1: Previous #1s is a full-width history panel, never a compressed chart data column. */
#app .ds-chart.chart-page .chart-board:has(.chart-history){
 display:block!important;min-width:0!important;width:100%!important;
}
#app .ds-chart.chart-page .chart-board:has(.chart-history)>.official-review-card,
#app .ds-chart.chart-page .chart-board:has(.chart-history)>.chart-history{
 display:block!important;width:100%!important;max-width:100%!important;
 min-width:0!important;box-sizing:border-box!important;grid-column:1/-1!important;
}
#app .ds-chart.chart-page .chart-board:has(.chart-history)>.official-review-card{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;
 overflow-wrap:break-word!important;word-break:normal!important;
}
#app .ds-chart.chart-page .chart-board:has(.chart-history)>.official-review-card>div{min-width:0!important;width:100%!important;grid-column:1!important}
#app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-head,
#app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row{
 width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
}
#app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row{
 grid-template-columns:54px minmax(0,1fr) minmax(140px,auto) minmax(110px,auto)!important;
}
#app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row .history-title{min-width:0!important;overflow-wrap:break-word!important}
@media(max-width:1024px){
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row{grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important}
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row .history-stats,
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row .history-actions{grid-column:1/-1!important;min-width:0!important}
}
@media(max-width:700px){
 #app .ds-chart.chart-page .chart-board:has(.chart-history)>.official-review-card{padding:16px!important}
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history{padding:12px!important}
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .chart-history-row{padding:12px!important}
 #app .ds-chart.chart-page .chart-board:has(.chart-history) .history-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}


/* RC2.74 — public Charts-only media, shared header lane, and editorial controls. */
#app .ds-chart.chart-page{position:relative!important;isolation:isolate!important;background:#070911!important}
#app .ds-chart.chart-page .chart-editorial-shell{
  width:auto!important;max-width:none!important;
  margin-left:var(--ds-header-gutter)!important;
  margin-right:var(--ds-header-gutter)!important;
  padding-left:0!important;padding-right:0!important;
  position:relative!important;z-index:1!important;
}
#app .ds-chart.chart-page .chart-hero{
  grid-template-columns:minmax(0,1fr)!important;
  padding:34px 0 112px!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:flex-start!important;position:relative!important;isolation:isolate!important;
  background:none!important;
}
#app .ds-chart.chart-page .chart-hero .chart-title-row{display:block!important;min-width:0!important;width:100%!important}
#app .ds-chart.chart-page .chart-hero>:is(.eyebrow,.chart-title-row,p){position:relative!important;z-index:2!important}
#app .ds-chart.chart-page .chart-hero .chart-title-row>h1{margin:9px 0!important}
/* The pseudo-image stretches from the very top of the viewport, behind the shared header,
   without changing header markup, its buttons, or the landing artwork. */
@media(min-width:801px){
  #app .ds-chart.chart-page .chart-hero::before{
    content:""!important;position:absolute!important;z-index:0!important;
    top:calc(-1 * var(--chart-hero-page-top, 110px))!important;
    left:calc(-1 * var(--ds-header-gutter))!important;
    width:100vw!important;
    height:calc(100% + var(--chart-hero-page-top, 110px))!important;
    background-image:
      linear-gradient(to bottom,#070911 0%,rgba(7,9,17,.82) 40px,transparent 105px),
      linear-gradient(90deg,#070911 4%,#070912e6 30%,#0709124d 55%,transparent 78%),
      url('/assets/hero/riffelo-hero-artists-v9-desktop.webp')!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,right top!important;
    background-repeat:no-repeat!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)!important;
    pointer-events:none!important;
  }
  #app .ds-chart.chart-page .chart-hero{padding-top:34px!important;padding-bottom:112px!important}
}
/* Grid: notice sits first on desktop sidebar; a separate compact notice is available
   above the tabs at single-column widths and alongside the history tabs on desktop. */
#app .ds-chart.chart-page .chart-narrow-close{display:none!important}
#app .ds-chart.chart-page .chart-side .chart-side-close{
  width:100%!important;min-width:0!important;max-width:100%!important;
  margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  padding:8px 12px!important;align-items:center!important;
  border:1px solid rgba(224,208,246,.24)!important;border-radius:12px!important;
  background:rgba(20,25,43,.88)!important;gap:6px!important;
}
#app .ds-chart.chart-page .chart-side .chart-side-close small{grid-column:1!important;grid-row:1!important;justify-self:start!important}
#app .ds-chart.chart-page .chart-side .chart-side-close strong{grid-column:2!important;grid-row:1!important;justify-self:end!important}
#app .ds-chart.chart-page .chart-side .chart-side-close b{grid-column:1/-1!important;grid-row:2!important;justify-self:end!important}
#app .ds-chart.chart-page .chart-close :is(small,strong,b){font-size:12px!important;line-height:1.25!important;white-space:nowrap!important}
#app .ds-chart.chart-page .chart-close b{border-radius:8px!important;padding:7px 8px!important}
#app .ds-chart.chart-page .chart-board-nav{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:nowrap!important;min-height:60px!important;gap:8px!important;
}
#app .ds-chart.chart-page .chart-board-nav .chart-mode-toggle{min-width:0!important;flex:0 1 auto!important}
#app .ds-chart.chart-page .chart-board-nav .cq-launch{grid-column:auto!important;display:flex!important;align-items:center!important;flex-shrink:0!important;margin-right:12px!important}
#app .ds-chart.chart-page .chart-board-nav .cq-button{min-height:44px!important}
#app .ds-chart.chart-page .chart-board-nav .chart-history-close{
  display:flex!important;min-width:0!important;flex-wrap:nowrap!important;
  padding:5px 9px!important;margin-right:6px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;gap:6px!important;
}
#app .ds-chart.chart-page .chart-board>.cq-live:not([hidden]){display:grid!important;margin:12px!important;width:calc(100% - 24px)!important;grid-column:auto!important}
@media(min-width:1101px){
 #app .ds-chart.chart-page .chart-editorial-shell{grid-template-columns:minmax(0,1fr) 320px!important}
}
@media(max-width:1100px){
 #app .ds-chart.chart-page .chart-editorial-shell{grid-template-columns:minmax(0,1fr)!important}
 #app .ds-chart.chart-page .chart-narrow-close{display:block!important;grid-column:1!important;grid-row:2!important;min-width:0!important}
 #app .ds-chart.chart-page .chart-narrow-close .chart-close{
   width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important;
   border-radius:12px!important;background:rgba(20,25,43,.85)!important;
   border:1px solid rgba(224,208,246,.24)!important;margin:0 0 10px!important;
   gap:8px!important;flex-wrap:wrap!important;
 }
 #app .ds-chart.chart-page .chart-board{grid-row:3!important}
 #app .ds-chart.chart-page .chart-side{grid-row:4!important;grid-column:1!important}
 #app .ds-chart.chart-page .chart-side .chart-side-close{display:none!important}
 #app .ds-chart.chart-page .chart-history-close{display:none!important}
 #app .ds-chart.chart-page .chart-board-nav{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0!important}
 #app .ds-chart.chart-page .chart-board-nav .chart-mode-toggle{width:100%!important;display:flex!important;justify-content:flex-start!important}
 #app .ds-chart.chart-page .chart-board-nav .cq-launch{width:100%!important;margin:0!important;padding:8px 12px 12px!important;justify-content:flex-start!important}
 #app .ds-chart.chart-page .chart-board-nav .cq-launch .cq-button{min-height:44px!important}
}
@media(max-width:800px){
 #app .ds-chart.chart-page .chart-hero::before{display:none!important}
 #app .ds-chart.chart-page .chart-hero{padding:12px 0 20px!important}
}
@media(max-width:600px){
 #app .ds-chart.chart-page .chart-editorial-shell{margin-inline:10px!important}
 #app .ds-chart.chart-page .chart-board-nav .chart-mode-toggle{justify-content:space-around!important;padding:0 5px!important}
 #app .ds-chart.chart-page .chart-board-nav .chart-mode-toggle button{padding:10px 9px!important;min-height:44px!important}
 #app .ds-chart.chart-page .chart-board-nav .cq-launch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #app .ds-chart.chart-page .chart-narrow-close .chart-close{padding:9px!important;gap:5px!important}
}

/* RC2.74a: the history board has no sidebar and must span the full header lane. */
#app .ds-chart.chart-page .chart-board:not(.current-chart-board){grid-column:1/-1!important}
/* Reserve intrinsic width for the complete close notice. In RC2.74 its flex item
   shrank to ~287px while children overflowed to the left. */
@media(min-width:1101px){
 #app .ds-chart.chart-page .chart-board-nav .chart-history-close{
   flex:0 0 auto!important;width:max-content!important;min-width:max-content!important;
   max-width:none!important;margin-left:auto!important;box-sizing:border-box!important;
   white-space:nowrap!important;overflow:visible!important;
 }
 #app .ds-chart.chart-page .chart-board-nav .chart-history-close :is(small,strong,b){
   position:static!important;flex:0 0 auto!important;max-width:none!important;
   overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;
 }
 #app .ds-chart.chart-page .chart-board-nav:has(.chart-history-close) .chart-mode-toggle{
   flex:1 1 auto!important;min-width:0!important;margin-bottom:0!important;
 }
}
/* RC2.74b: tablet Chart toolbar uses the desktop one-row composition.
   The narrow notice remains above the board; only phones keep stacked controls. */
@media(min-width:801px) and (max-width:1100px){
 #app .ds-chart.chart-page .chart-board-nav{
   flex-direction:row!important;align-items:center!important;
   justify-content:space-between!important;gap:12px!important;min-height:60px!important;
 }
 #app .ds-chart.chart-page .chart-board-nav .chart-mode-toggle{
   width:auto!important;flex:0 1 auto!important;min-width:0!important;
   margin-bottom:0!important;justify-content:flex-start!important;
 }
 #app .ds-chart.chart-page .chart-board-nav .cq-launch{
   width:auto!important;flex:0 0 auto!important;display:flex!important;
   margin:0 12px 0 0!important;padding:0!important;gap:10px!important;
   justify-content:flex-end!important;
 }
}
/* RC2.74a: narrow layouts have the clock ABOVE the tabs only; the more specific
   board-nav selector must not override the existing history-clock hide rule. */
@media(max-width:1100px){
 #app .ds-chart.chart-page .chart-board-nav .chart-history-close{display:none!important}
}

/* RC2.74c — the signed-in Chart occupies the same content box as Manager/Edit Artist.
   The guest Chart keeps the public-header lane from RC2.74 without alteration. */
@media(min-width:1100px){
  #app .ns-signed-in-shell .ds-chart.chart-page .chart-editorial-shell{
    width:100%!important;max-width:none!important;
    margin-left:0!important;margin-right:0!important;
    padding-left:0!important;padding-right:0!important;
  }
  /* Image now belongs to the full-width signed-in shell, not the narrower
     grid surface, so no clipping at the board's right edge or behind the rail. */
  #app .ns-signed-in-shell:has(.ns-shell-chart){position:relative!important;isolation:isolate!important}
  #app .ns-signed-in-shell:has(.ns-shell-chart)::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    top:0;left:0;width:100%;height:var(--chart-hero-photo-bottom,440px);
    background-image:
      linear-gradient(to bottom,#070911 0%,rgba(7,9,17,.82) 40px,transparent 105px),
      linear-gradient(90deg,#070911 4%,#070912e6 30%,#0709124d 55%,transparent 78%),
      url('/assets/hero/riffelo-hero-artists-v9-desktop.webp');
    background-size:cover,cover,cover;
    background-position:center,center,right top;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  }
  #app .ns-signed-in-shell .ds-chart.chart-page{background:transparent!important}
  #app .ns-signed-in-shell .ds-chart.chart-page .chart-hero::before{display:none!important}
}

/* RC2.76 — Edit Artist only. Keep the shared signed-in content lane unchanged. */
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;
 align-items:start;border:0;background:transparent;padding:0;margin-bottom:42px;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-side{display:grid;gap:16px;min-width:0}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-main{display:grid;min-width:0}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-card{
 border:1px solid #35394f!important;border-radius:15px!important;background:rgba(16,18,35,.91)!important;
 box-shadow:none!important;min-width:0;padding:16px!important;margin:0!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait{
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:9px!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait .artist-portrait-copy{
 width:100%;display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait .artist-portrait-copy>.rf-field-label{grid-column:1;grid-row:1}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait .artist-portrait-copy>strong{grid-column:1;grid-row:2;font-size:16px}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait .artist-portrait-copy>small{grid-column:1/-1;grid-row:3;color:#c5c7d9;font-size:12px;line-height:1.35}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait .artist-portrait-copy .ns-edit-state{grid-column:2;grid-row:1/3;margin:0}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-portrait img{
 width:86px!important;height:86px!important;max-height:86px!important;max-width:86px!important;object-fit:cover;border-radius:10px;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .artist-portrait-block button{
 width:auto!important;min-width:44px!important;min-height:44px!important;max-width:max-content!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-banner{
 display:flex!important;flex-direction:column!important;gap:12px!important;align-items:stretch!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-banner-copy{
 width:100%;display:flex;gap:10px;justify-content:space-between;align-items:center;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-banner-preview{
 height:88px;width:100%;border-radius:10px;border:1px solid #44465a;overflow:hidden;background:#17182a;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-banner-preview img{display:block;height:100%;width:100%;object-fit:cover}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-banner button{
 width:max-content!important;max-width:100%!important;min-height:44px!important;padding:8px 14px!important;font-size:14px!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .artist-setup-form,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .artist-dna-readonly{
 display:flex!important;flex-direction:column!important;gap:0!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;width:100%;min-width:0;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:auto minmax(0,auto)!important;gap:6px 8px!important;
 align-content:start!important;align-items:center!important;
 min-width:0;min-height:0!important;margin:0!important;padding:10px 11px!important;
 border:1px solid #33384f!important;border-radius:10px!important;background:#171b2d!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile.ns-edit-wide{grid-column:1/-1}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>label,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>span:first-child{
 grid-column:1;grid-row:1;font-size:12px!important;font-weight:700!important;letter-spacing:.045em;text-transform:uppercase;
 color:#f7f7fd!important;min-width:0;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>.ns-edit-state{
 grid-column:2;grid-row:1;justify-self:end;margin:0!important;padding:4px 8px;min-width:56px!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>strong,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>input,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>select,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>textarea,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>.ns-edit-inline{
 grid-column:1/-1;grid-row:2;min-width:0;margin:0!important;width:100%;font-size:13px!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>strong{
 color:#d7dae8!important;font-size:13px!important;line-height:1.3;overflow-wrap:anywhere;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>input,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>select,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>textarea{
 min-height:44px!important;max-height:76px!important;padding:8px 11px!important;font-size:13px!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid .ns-edit-tile>textarea{resize:vertical;min-height:52px!important}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-source-select{
 position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;
 min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill-set{
 grid-column:1/-1;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;
 width:100%;margin:0;padding:0;border:0;min-width:0;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-inline{position:relative}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-inline>.ns-edit-pill-set{grid-column:auto;grid-row:auto}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill{
 position:relative;display:inline-flex;align-items:center;min-height:44px;min-width:44px;cursor:pointer;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill>input{
 position:absolute;opacity:0;inset:0;cursor:pointer;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill>span{
 display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 11px;
 border-radius:9px;border:1px solid #41445b;background:#262940;color:#e5e7f3;font-weight:600;font-size:12px;
 transition:background .18s ease,border-color .18s ease;white-space:normal;line-height:1.2;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill>input:checked+span{
 background:#d9257d;border-color:#f95ca1;color:#fff;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill>input:focus-visible+span{
 outline:3px solid #fff!important;outline-offset:2px;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .artist-setup-dock,
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-open-actions{
 display:flex!important;justify-content:flex-end!important;align-items:center!important;
 width:100%!important;max-width:none!important;margin:0!important;padding:12px 0 0!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .artist-setup-dock>div:first-child{display:none!important}
#app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell :is(.artist-setup-dock,.ns-edit-open-actions) button{min-height:44px!important}
@media(max-width:1100px){
 #app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell{
  grid-template-columns:minmax(0,1fr);gap:14px;padding:0!important;margin-bottom:100px;
 }
 #app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-side{gap:14px}
}
@media(max-width:699px){
 #app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-field-grid{grid-template-columns:minmax(0,1fr)}
 #app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-card{padding:12px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .ns-signed-in-shell .ns-edit-fields.ns-edit-grid-shell .ns-edit-pill>span{transition:none}
}


/* RC2.77 A: signed-in Chart shell grid and hero text must respect the sidebar at
   1100px. No signed-out Chart, artwork or data path changes. */
@media(min-width:1100px) and (max-width:1100px){
 #app .ns-signed-in-shell .ds-chart.chart-page .chart-editorial-shell{grid-template-columns:minmax(0,1fr)!important}
 #app .ns-signed-in-shell .ds-chart.chart-page.ns-shell-chart .chart-side{grid-column:1/-1!important;grid-row:4!important;grid-row-start:4!important;grid-row-end:auto!important}
}
@media(min-width:1100px) and (max-width:1300px){
 #app .ns-signed-in-shell .ds-chart.chart-page .chart-hero > .eyebrow,
 #app .ns-signed-in-shell .ds-chart.chart-page .chart-hero > .chart-title-row,
 #app .ns-signed-in-shell .ds-chart.chart-page .chart-hero > p{
   width:clamp(210px,calc(210px + (100vw - 1100px)*.50),310px)!important;
   max-width:100%!important;overflow-wrap:normal!important;
 }
 #app .ns-signed-in-shell .ds-chart.chart-page .chart-hero .chart-title-row > h1{
   font-size:clamp(29px,2.7vw,35px)!important;overflow-wrap:normal!important;
 }
}

/* RC2.77 B: portrait picker presentation only. Selection and POST handling are unchanged.
   Single scrolling region, restricted to thumbnail choices; preview/footer stay in view. */
.artist-portrait-sheet-backdrop{align-items:center!important;padding:16px!important}
.artist-portrait-sheet-backdrop .artist-portrait-sheet{
 box-sizing:border-box!important;width:min(760px,92vw)!important;max-width:760px!important;
 max-height:calc(100dvh - 32px)!important;height:auto!important;padding:20px 24px 18px!important;
 border:1px solid #35394f!important;border-radius:18px!important;overflow:hidden!important;
 display:flex!important;flex-direction:column!important;background:#111827!important;
}
.artist-portrait-sheet .sheet-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
.artist-portrait-sheet .sheet-handle{display:none!important}
.artist-portrait-sheet h2{flex:0 0 auto;margin:4px 52px 12px 0!important;font-size:25px!important;line-height:1.2!important}
.artist-portrait-sheet .artist-portrait-sheet-body{
 display:flex!important;flex-direction:column!important;gap:10px!important;flex:1 1 auto!important;
 min-height:0!important;overflow:hidden!important;padding:0!important;
}
.artist-portrait-sheet .artist-portrait-preview{display:block!important;flex:0 1 auto!important;
 height:min(430px,calc(100dvh - 422px))!important;min-height:155px!important;
 width:100%!important;margin:0!important;overflow:hidden!important;
 border:1px solid #42465c!important;border-radius:12px!important;background:#0b1020!important;
}
.artist-portrait-sheet .artist-portrait-preview img{
 display:block!important;width:100%!important;height:100%!important;max-width:none!important;
 aspect-ratio:auto!important;object-fit:cover!important;object-position:50% 18%!important;
 border:none!important;border-radius:0!important;
}
.artist-portrait-sheet .artist-portrait-grid{
 display:grid!important;grid-template-columns:repeat(12,44px)!important;
 gap:8px!important;justify-content:center!important;align-content:start!important;
 flex:0 1 auto!important;min-height:0!important;max-height:190px!important;
 overflow-y:auto!important;overflow-x:hidden!important;padding:3px!important;
 scrollbar-width:thin;scrollbar-color:#6b718a #111827;
}
.artist-portrait-sheet .artist-portrait-tile{
 box-sizing:border-box!important;width:44px!important;min-width:44px!important;height:58px!important;
 min-height:58px!important;max-height:58px!important;border:2px solid transparent!important;
 border-radius:8px!important;flex:none!important;background:#151b2b!important;
}
.artist-portrait-sheet .artist-portrait-tile img{
 display:block!important;width:100%!important;height:100%!important;aspect-ratio:44/58!important;
 border-radius:6px!important;object-fit:cover!important;object-position:50% 18%!important;
}
.artist-portrait-sheet .artist-portrait-tile.selected{border-color:#e63e94!important;box-shadow:none!important}
.artist-portrait-sheet .artist-portrait-tile:focus-visible{outline:3px solid #fff!important;outline-offset:2px!important}
.artist-portrait-sheet .artist-portrait-tile span{font-size:9px!important;left:1px!important;bottom:1px!important;padding:2px!important;border-radius:3px!important;max-width:calc(100% - 2px);overflow:hidden}
.artist-portrait-sheet .artist-portrait-note,.artist-portrait-sheet .artist-portrait-only{
 flex:0 0 auto!important;margin:2px 0 0!important;font-size:12px!important;line-height:1.3!important;
}
.artist-portrait-sheet .artist-portrait-sheet-footer{flex:0 0 auto!important;position:static!important;
 margin:10px 0 0!important;padding:0!important;background:none!important;
}
.artist-portrait-sheet .artist-portrait-sheet-footer .sheet-actions{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
 margin:0!important;align-items:stretch!important;
}
.artist-portrait-sheet .artist-portrait-sheet-footer .sheet-button{
 box-sizing:border-box!important;min-height:52px!important;height:52px!important;min-width:0!important;
 padding:8px!important;border-radius:10px!important;font-size:14px!important;
}
.artist-portrait-sheet #useArtistPortrait{
 background:#e63e94!important;color:#fff!important;border:1px solid #f36cad!important;
}
.artist-portrait-sheet #useArtistPortrait:disabled{opacity:.48!important;cursor:not-allowed!important}
.artist-portrait-sheet .sheet-button:focus-visible,.artist-portrait-sheet .sheet-close:focus-visible{
 outline:3px solid #fff!important;outline-offset:2px!important;
}
@media(max-width:700px){
 .artist-portrait-sheet-backdrop{padding:16px!important}
 .artist-portrait-sheet-backdrop .artist-portrait-sheet{
  width:100%!important;max-width:100%!important;padding:16px!important;
  max-height:calc(100dvh - 32px)!important;
 }
 .artist-portrait-sheet .artist-portrait-preview{
  height:min(260px,calc(100dvh - 400px))!important;min-height:140px!important;
 }
 .artist-portrait-sheet .artist-portrait-grid{
  grid-template-columns:repeat(6,44px)!important;max-height:190px!important;
 }
 .artist-portrait-sheet h2{font-size:23px!important}
}
@media(max-height:700px){
 .artist-portrait-sheet .artist-portrait-preview{height:min(300px,calc(100dvh - 360px))!important;min-height:120px!important}
 .artist-portrait-sheet .artist-portrait-grid{max-height:155px!important}
}
@media(prefers-reduced-motion:reduce){.artist-portrait-sheet .artist-portrait-tile{transition:none!important}}

/* RC2.78 — signed-in Home only: the unchanged LP1 landing material adopts the
   already-existing Manager/Edit Artist shell content lane, while its illustration
   is a viewport-wide decorative plane, like the signed-in Chart. */
@media (min-width:1101px){
 #app .ns-signed-in-shell:has(.ns-shell-home){position:relative!important;isolation:isolate!important}
 #app .ns-signed-in-shell:has(.ns-shell-home)::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:var(--ns-home-art-top,98px);left:0;right:0;
  height:var(--ns-home-art-height,400px);
  background-image:
   linear-gradient(to bottom,rgba(7,9,17,.55),transparent 60px),
   linear-gradient(90deg,#070911 3%,#070912df 29%,#0709124d 53%,transparent 73%),
   url('/assets/hero/riffelo-hero-artists-v9-desktop.webp');
  background-size:cover,cover,cover;
  background-position:center,center,right top;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 62%,transparent 100%);
 }
 #app .ns-signed-in-shell:has(.ns-shell-home)>.ns-shell-layout{position:relative;z-index:1}
 #app .ns-signed-in-shell .ns-shell-home.lp-page{
  --lp-content-lane:0px!important;width:100%!important;max-width:none!important;
  margin:0!important;padding-left:0!important;padding-right:0!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero{
  background:transparent!important;border-radius:0!important;overflow:visible!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-art,
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-glow{display:none!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page>.lp-hero>.lp-hero-inner{
  padding-left:0!important;padding-right:0!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page>:is(.lp-discovery,.lp-journey,.lp-bottom,.lp-pricing){
  width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-discovery{gap:clamp(12px,1.2vw,24px)!important}
}
/* The fixed rail narrows the signed-in headline lane around 1101px.
   Only the owner's Home copy is adjusted; the guest heading retains its styles. */
@media (min-width:1101px) and (max-width:1300px){
 #app .ns-signed-in-shell .ns-shell-home.lp-page>.lp-hero>.lp-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,.58fr)!important;gap:10px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy{min-width:0;max-width:325px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy h1{font-size:clamp(28px,2.6vw,34px)!important;line-height:1.04!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-description{max-width:310px!important;font-size:12px!important;line-height:1.35!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons{gap:6px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons>button{font-size:12px!important;padding-inline:8px!important}
}
/* RC2.78 narrow desktop — keep all copy clear of the guitarist. On the short
   fixed-rail canvas, move stat cards onto their own row instead of overlaying faces. */
@media (min-width:1101px) and (max-width:1250px){
 #app .ns-signed-in-shell .ns-shell-home.lp-page>.lp-hero>.lp-hero-inner{
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   gap:12px!important;align-content:start!important;min-height:0!important;
   padding-top:20px!important;padding-bottom:18px!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy{
   width:225px!important;max-width:225px!important;min-height:0!important;gap:7px!important;
   display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy .lp-eyebrow{font-size:9px!important;line-height:1.3!important;max-width:225px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy h1{
   max-width:225px!important;font-size:29px!important;line-height:1.03!important;
   overflow-wrap:normal!important;white-space:normal!important;margin:0!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy h1 em{display:inline;white-space:normal!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-description{width:225px!important;max-width:225px!important;font-size:11px!important;line-height:1.35!important;margin:0!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-script{
   position:static!important;display:block!important;max-width:190px!important;
   margin:6px 0 8px 4px!important;align-self:flex-start!important;
   font-size:27px!important;line-height:.85!important;transform:rotate(-7deg)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons{
   width:215px!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   gap:8px!important;margin:0!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons>button{
   width:100%!important;min-height:44px!important;font-size:12px!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-stats{
   grid-column:1/-1!important;display:grid!important;
   grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;
   padding:0!important;margin-top:12px!important;gap:10px!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-stats>.lp-stat{min-width:0!important}
}
@media (min-width:1101px) and (max-width:1250px){
 /* Never scale faces up when the responsive content makes this hero taller:
    lock its artwork's horizontal registration to the guest 100vw composition. */
 #app .ns-signed-in-shell:has(.ns-shell-home)::before{
   background-size:cover,cover,100vw auto!important;
   -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 150px,transparent 315px)!important;
   mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 150px,transparent 315px)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy,
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-description{max-width:190px!important;width:190px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons{width:190px!important}
}


/* RC2.79 — signed-out Chart acquisition bar. The signed-in Chart has no CTA
   element and retains its original grid placement and hero geometry. */
#app .ds-chart.chart-page .chart-guest-cta{
  box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;
  grid-column:1/-1;grid-row:2;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,34px);
  min-height:138px;padding:24px clamp(20px,2vw,40px);
  margin:-104px 0 8px;
  border:1.5px solid transparent;border-radius:22px;
  background:
    linear-gradient(116deg,rgba(12,12,34,.95),rgba(17,14,40,.88) 58%,rgba(14,11,36,.93)) padding-box,
    linear-gradient(105deg,#f437a1 0%,#b64bda 52%,#635bea 100%) border-box;
  box-shadow:0 0 28px rgba(218,45,159,.21),0 0 46px rgba(110,60,221,.10),inset 0 1px rgba(255,255,255,.08);
}
#app .ds-chart.chart-page .chart-guest-cta::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-85px;top:-110px;width:440px;height:350px;
  background:repeating-radial-gradient(circle at center,transparent 0 16px,rgba(206,94,242,.19) 17px,transparent 19px,transparent 27px);
  opacity:.72;transform:rotate(-19deg);
}
#app .ds-chart.chart-page .chart-guest-cta-copy{
  z-index:1;position:relative;min-width:0;flex:1 1 auto;
  color:#fff;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(19px,1.57vw,30px);line-height:1.24;
  white-space:nowrap;
}
#app .ds-chart.chart-page .chart-guest-cta-copy span{color:#ff8bd2}
#app .ds-chart.chart-page .chart-guest-cta-eq{
  position:absolute;pointer-events:none;z-index:0;right:290px;bottom:4px;
  width:94px;height:72px;opacity:.74;
}
#app .ds-chart.chart-page button.chart-guest-cta-action{
  position:relative;z-index:1;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:20px;
  min-height:62px;padding:0 32px;
  border-radius:999px;border:1px solid rgba(255,202,235,.55);
  background:linear-gradient(180deg,#fb52b4,#f437a1);
  color:#fff;font:800 19px/1.25 Inter,Arial,sans-serif;
  white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.64),0 12px 24px rgba(244,55,161,.30);
  transition:transform .17s ease,box-shadow .17s ease,filter .17s ease;
}
#app .ds-chart.chart-page button.chart-guest-cta-action span{font-size:25px;line-height:1}
#app .ds-chart.chart-page button.chart-guest-cta-action:hover{
  transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.64),0 16px 32px rgba(244,55,161,.52);
}
#app .ds-chart.chart-page button.chart-guest-cta-action:active{transform:translateY(1px)}
#app .ds-chart.chart-page button.chart-guest-cta-action:focus-visible{
  outline:3px solid #fff;outline-offset:4px;
}
@media(prefers-reduced-motion:reduce){
 #app .ds-chart.chart-page button.chart-guest-cta-action{transition:none!important}
 #app .ds-chart.chart-page button.chart-guest-cta-action:hover{transform:none!important}
}
/* The bar is a new row; preserve the original board/sidebar pairing. */
#app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-hero{grid-row:1!important}
#app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-board{grid-row:3!important}
#app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-side{grid-row:3!important}
@media(max-width:1100px){
 #app .ds-chart.chart-page .chart-guest-cta{min-height:122px;gap:14px;padding:18px 22px}
 #app .ds-chart.chart-page .chart-guest-cta-copy{font-size:clamp(20px,2.45vw,26px);line-height:1.25;white-space:normal}
 #app .ds-chart.chart-page .chart-guest-cta-eq{display:none}
 #app .ds-chart.chart-page button.chart-guest-cta-action{min-height:58px;padding:0 22px;font-size:18px;gap:12px}
 #app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-narrow-close{grid-row:3!important}
 #app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-board{grid-row:4!important}
 #app .ds-chart.chart-page .chart-editorial-shell:has(>.chart-guest-cta)>.chart-side{grid-row:5!important}
}
@media(max-width:800px){
 #app .ds-chart.chart-page .chart-guest-cta{
  display:flex;flex-direction:column;align-items:stretch;gap:18px;
  min-height:0;margin-top:-12px;padding:20px 20px 18px;border-radius:18px;
 }
 #app .ds-chart.chart-page .chart-guest-cta::before{opacity:.26;right:-160px}
 #app .ds-chart.chart-page .chart-guest-cta-copy{
  font-size:clamp(20px,5.3vw,22px);line-height:1.25;white-space:normal;
 }
 #app .ds-chart.chart-page button.chart-guest-cta-action{width:100%;min-height:56px;font-size:19px}
}

/* RC2.80: signed-in Home desktop matches the visitor landing's viewport-derived hero metrics. */
@media(min-width:1301px){
 #app .ns-signed-in-shell .ns-shell-home.lp-page{--ns-home-guest-width:min(calc(100vw - 2 * var(--lp-gutter)),var(--lp-max));}
 #app .ns-signed-in-shell .ns-shell-home.lp-page>.lp-hero{margin-top:calc(-1 * var(--ns-home-header-height,0px) - 18px)!important;
    min-height:clamp(366px,calc(21.7vw + 69.5px),625px)!important;
    height:clamp(366px,calc(21.7vw + 69.5px),625px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page>.lp-hero>.lp-hero-inner{
    min-height:clamp(366px,calc(21.7vw + 69.5px),625px)!important;
    height:clamp(366px,calc(21.7vw + 69.5px),625px)!important;
    padding-top:clamp(73px,calc(var(--ns-home-guest-width) * .0522),125px)!important;
    padding-bottom:clamp(8px,calc(var(--ns-home-guest-width) * .0062),16px)!important;
    gap:clamp(10px,calc(var(--ns-home-guest-width) * .007),22px)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-copy h1{
    font-size:clamp(51px,calc(var(--ns-home-guest-width) * .0409),98px)!important;
    margin-top:clamp(21px,calc(var(--ns-home-guest-width) * .015),35px)!important;
    margin-bottom:clamp(7px,calc(var(--ns-home-guest-width) * .0044),11px)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-eyebrow{font-size:clamp(10px,calc(var(--ns-home-guest-width) * .0068),16px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-description{
    font-size:clamp(12px,calc(var(--ns-home-guest-width) * .0083),19px)!important;
    max-width:clamp(370px,calc(var(--ns-home-guest-width) * .25),600px)!important;
    margin-bottom:clamp(7px,calc(var(--ns-home-guest-width) * .0045),12px)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-stats{gap:clamp(6px,calc(var(--ns-home-guest-width) * .0055),13px)!important;padding-inline:clamp(4px,calc(var(--ns-home-guest-width) * .0045),11px)!important; width:calc(var(--ns-home-guest-width) * .3355)!important;justify-self:end!important;grid-column:2!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-stats .lp-stat{min-height:clamp(87px,calc(var(--ns-home-guest-width) * .0602),145px)!important;padding:clamp(7px,calc(var(--ns-home-guest-width) * .006),15px) 4px!important;gap:clamp(4px,calc(var(--ns-home-guest-width) * .0035),9px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-stat i{font-size:clamp(22px,calc(var(--ns-home-guest-width) * .0145),35px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-stat strong{font-size:clamp(21px,calc(var(--ns-home-guest-width) * .014),34px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-stat small{font-size:clamp(10px,calc(var(--ns-home-guest-width) * .0065),15px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-buttons>button{min-height:48px!important;height:48px!important;font-size:clamp(12px,calc(var(--ns-home-guest-width) * .0079),18px)!important;padding-inline:clamp(16px,calc(var(--ns-home-guest-width) * .0145),34px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-script{font-size:clamp(28px,calc(var(--ns-home-guest-width) * .0205),48px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-discovery{margin-top:clamp(7px,calc(var(--ns-home-guest-width) * .0044),12px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-hero-script{translate:0 -8px!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-discovery>.lp-card{min-height:clamp(236px,calc(var(--ns-home-guest-width) * .16),384px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-journey{
   min-height:clamp(144px,calc(var(--ns-home-guest-width) * .0932),224px)!important;
   margin-top:clamp(6px,calc(var(--ns-home-guest-width) * .0045),11px)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-journey-image{min-height:clamp(144px,calc(var(--ns-home-guest-width) * .0932),224px)!important}
 #app .ns-signed-in-shell .ns-shell-home.lp-page .lp-bottom{
   min-height:clamp(83px,calc(var(--ns-home-guest-width) * .054),130px)!important;
   margin-top:clamp(5px,calc(var(--ns-home-guest-width) * .0037),9px)!important;
 }
}
@media(min-width:1101px){
 #app .ns-signed-in-shell:has(.ns-shell-home)::before{top:0!important;height:var(--ns-home-art-height,420px)!important;
  background-size:cover,cover,calc(min(calc(100vw - 2 * var(--lp-gutter)),var(--lp-max)) + 2 * var(--lp-gutter)) auto!important;
  background-position:center,center,center top!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)!important;
 }
}
@media(min-width:1101px) and (max-width:1250px){
 #app .ns-signed-in-shell:has(.ns-shell-home)::before{
   /* The 100vw artwork is intrinsically ~.253 viewport widths tall. Fade it
      before its natural bottom edge to avoid a horizontal image seam. */
   -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 14.5vw,transparent 24vw,transparent 100%)!important;
   mask-image:linear-gradient(to bottom,#000 0,#000 14.5vw,transparent 24vw,transparent 100%)!important;
 }
 #app .ns-signed-in-shell .ns-shell-home .lp-new .lp-section-head{display:flex!important;flex-wrap:wrap!important;gap:5px!important;}
 #app .ns-signed-in-shell .ns-shell-home .lp-new .lp-section-head>button{margin-left:auto!important;max-width:100%!important;flex:0 0 auto!important;}
}

/* RC2.81 — desktop guest Chart CTA stays under title/subtitle, away from
   performers. The existing full-lane tablet/phone bar remains unchanged. */
@media (min-width:1101px){
 #app .ds-chart.chart-page .chart-editorial-shell>.chart-guest-cta{
   width:min(100%,clamp(470px,39.58333vw,760px));max-width:760px;
   justify-self:start;grid-column:1/-1;
   padding:18px 24px;min-height:138px;
   gap:14px;align-items:center;
 }
 #app .ds-chart.chart-page .chart-guest-cta-copy{
   min-width:0;white-space:normal;font-size:clamp(20px,1.28vw,25px);
   line-height:1.2;letter-spacing:-.025em;
 }
 #app .ds-chart.chart-page button.chart-guest-cta-action{
   min-height:54px;padding:0 19px;font-size:16px;gap:10px;
 }
 #app .ds-chart.chart-page .chart-guest-cta-eq{right:2px;bottom:3px;opacity:.3;}
}
@media (min-width:1101px) and (max-width:1450px){
 #app .ds-chart.chart-page .chart-editorial-shell>.chart-guest-cta{
   display:flex;flex-direction:column;align-items:flex-start;
   justify-content:center;gap:9px;
 }
 #app .ds-chart.chart-page .chart-guest-cta-copy{
   flex:0 0 auto;font-size:clamp(19px,1.65vw,23px);
 }
 #app .ds-chart.chart-page button.chart-guest-cta-action{
   min-height:50px;font-size:17px;
 }
}

/* RC2.82: only the additional signed-in desktop Create Song rail item is pink.
   12px+ labels and the existing 44px rail targets are retained. */
@media (min-width:1101px){
 #app .ns-signed-in-shell .ns-shell-layout>.ns-rail .ns-rail-link.ns-rail-create{
   min-height:44px;
   transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease;
 }
 #app .ns-signed-in-shell .ns-shell-layout>.ns-rail .ns-rail-link.ns-rail-create:is(:hover,:focus-visible,.active){
   background:#d9257d!important;color:#fff!important;
   box-shadow:0 0 18px rgba(217,37,125,.32);
 }
 #app .ns-signed-in-shell .ns-shell-layout>.ns-rail .ns-rail-link.ns-rail-create:focus-visible{
   outline:3px solid #fff;outline-offset:2px;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .ns-signed-in-shell .ns-rail-link.ns-rail-create{transition:none!important;}
}
/* RC2.82: wheel chaining on page-level scroll regions; modal/sheet isolation
   intentionally retains overscroll containment. */
#app .ns-signed-in-shell .manager-message-thread,
#app .ns-signed-in-shell .manager-hero-row>.manager-messages-panel .manager-message-thread,
#app .ns-signed-in-shell .ns-shell-layout>.ns-rail,
#app .ns-signed-in-shell .ns-shell-create .persistent-create-body,
#app .ns-signed-in-shell .lyrics-preview-window,
#app .ns-signed-in-shell .lyric-review-body,
#app .studio-panel-scroll{
   overscroll-behavior-y:auto!important;
}