:root{--dash-bg:#07070a;--dash-card:#101014;--dash-card-2:#15151b;--dash-line:rgba(255,255,255,.10);--dash-muted:#a5a5b0;--dash-accent:#C266FF;--dash-accent-strong:#8E2DE2;--dash-purple:#9b72ff}
body.artist-dashboard{background:var(--dash-bg);color:#fff;font-family:Manrope,sans-serif}.artist-dashboard *{box-sizing:border-box}.dash-nav{position:sticky;top:0;z-index:30;background:rgba(7,7,10,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--dash-line)}.dash-nav .inner{max-width:1380px;margin:auto;height:78px;padding:0 28px;display:flex;align-items:center;gap:34px}.dash-brand{font-family:Poppins,sans-serif;font-weight:900;font-size:25px;letter-spacing:-1.2px;color:#fff;text-decoration:none}.dash-brand span{color:var(--dash-accent)}.dash-links{display:flex;gap:28px;margin-left:auto}.dash-links a{color:#aaa;text-decoration:none;font-size:14px;font-weight:600}.dash-links a.active,.dash-links a:hover{color:#fff}.dash-search{position:relative;width:240px;border:1px solid var(--dash-line);border-radius:999px;padding:0 16px;color:#aaa;font-size:13px;display:flex;align-items:center;gap:8px}.dashboard-wrap{max-width:1380px;margin:auto;padding:38px 28px 80px}.artist-hero{position:relative;overflow:hidden;min-height:370px;border-radius:28px;border:1px solid var(--dash-line);background:linear-gradient(105deg,rgba(5,5,7,.98) 10%,rgba(5,5,7,.86) 50%,rgba(5,5,7,.12)),url('../images/home-1/lineup-image-1.jpg') center 30%/cover}.artist-hero:after{content:'';position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.45));pointer-events:none}.hero-content{position:absolute;left:44px;bottom:42px;z-index:2;max-width:720px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2.4px;color:var(--dash-accent);font-weight:700;margin-bottom:10px}.artist-name{font-family:Manrope,sans-serif;font-size:clamp(48px,6vw,88px);line-height:.94;font-weight:900;letter-spacing:-4px;margin:0 0 18px}.artist-sub{color:#c4c4ca;font-size:16px}.artist-sub strong{color:#fff}.section-space{margin-top:28px}.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.kpi{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:20px;padding:22px}.kpi-label{color:var(--dash-muted);font-size:12px;text-transform:uppercase;letter-spacing:1.2px}.kpi-value{font-family:Manrope,sans-serif;font-size:31px;font-weight:800;letter-spacing:-1.4px;margin-top:8px}.kpi-note{font-size:12px;color:#71717b;margin-top:4px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:42px 0 16px}.section-title{font-family:Manrope,sans-serif;font-weight:800;font-size:27px;letter-spacing:-1px;margin:0}.section-caption{color:var(--dash-muted);font-size:13px}.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.platform-card{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:20px;padding:20px;position:relative;overflow:hidden}.platform-card:after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;background:rgba(255,255,255,.035)}.platform-top{display:flex;justify-content:space-between;align-items:center}.platform-name{font-weight:700}.platform-badge{font-size:11px;padding:5px 9px;border-radius:999px;background:#1d1d24;color:#bbb}.platform-views{font-family:Manrope,sans-serif;font-weight:800;font-size:27px;margin-top:20px}.platform-meta{display:flex;gap:16px;color:#888;font-size:11px;margin-top:5px}.analytics-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.8fr);gap:14px}.panel{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:22px;padding:24px}.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.panel-title{font-weight:700;font-size:16px}.segmented{display:flex;background:#09090c;border:1px solid var(--dash-line);border-radius:999px;padding:4px}.segmented button{border:0;background:transparent;color:#777;padding:7px 12px;border-radius:999px;font-size:11px}.segmented button.active{background:#fff;color:#09090c}.chart{height:250px;position:relative}.chart svg{width:100%;height:100%;overflow:visible}.chart-grid line{stroke:rgba(255,255,255,.08);stroke-width:1}.chart-line{fill:none;stroke:var(--dash-accent);stroke-width:3}.chart-area{fill:url(#areaFill)}.chart-dot{fill:#08080a;stroke:var(--dash-accent);stroke-width:3}.chart-labels{display:flex;justify-content:space-between;color:#6f6f79;font-size:11px;padding-top:8px}.share-row{margin:18px 0}.share-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}.share-track{height:7px;background:#25252c;border-radius:99px;overflow:hidden}.share-fill{height:100%;background:#fff;border-radius:99px}.videos-panel{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:22px;overflow:hidden}.video-row{display:grid;grid-template-columns:minmax(320px,1.6fr) repeat(5,minmax(90px,.55fr)) 44px;align-items:center;gap:10px;padding:16px 20px;border-top:1px solid var(--dash-line)}.video-row:first-of-type{border-top:0}.video-head{color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.8px;background:#0d0d11}.video-main{display:flex;align-items:center;gap:14px;min-width:0}.thumb{width:72px;height:58px;object-fit:cover;border-radius:10px}.video-title{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-meta{color:#777;font-size:11px;margin-top:4px}.stat-num{font-size:13px;font-weight:600}.total-num{font-weight:800;color:var(--dash-accent)}.open-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--dash-line);display:grid;place-items:center;color:#fff;text-decoration:none}.filter-row{display:flex;gap:8px}.filter{border:1px solid var(--dash-line);background:#0c0c10;color:#aaa;border-radius:999px;padding:8px 13px;font-size:11px}.filter.active{background:var(--dash-accent-strong);color:#fff;border-color:var(--dash-accent-strong);font-weight:700}.footer-note{text-align:center;color:#555;font-size:11px;margin-top:40px}@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.platform-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.video-row{grid-template-columns:minmax(260px,1.6fr) repeat(2,.6fr) 44px}.hide-tablet{display:none}}@media(max-width:700px){.dash-links,.dash-search{display:none}.dashboard-wrap{padding:20px 14px 50px}.artist-hero{min-height:330px}.hero-content{left:24px;bottom:28px}.artist-name{letter-spacing:-2px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.platform-grid{grid-template-columns:1fr 1fr}.platform-meta{display:none}.section-head{align-items:start;flex-direction:column;gap:10px}.video-row{grid-template-columns:1fr 72px 34px;padding:13px}.video-row .thumb{width:54px;height:48px}.hide-mobile{display:none}.panel{padding:18px}}

/* ---- Live-data additions ---------------------------------------------- */
/* Platform colours: validated as a set on the #101014 card surface (dark).
   Adjacent-pair CVD sits in the 6-8 warn band (YouTube/TikTok), so they are
   always paired with a legend, 2px segment gaps, tooltips and a table view. */
:root{--pc-instagram:#F552B0;--pc-tiktok:#B794FF;--pc-youtube:#FF0033;--pc-facebook:#1877F2}
/* Brand-based set (TikTok purple by choice). Checked 2026-11-09: every pair stays apart for
   deuteranopia too (purple is lighter than Facebook blue so the two never merge). */
.platform-card{background:radial-gradient(circle at calc(100% - 40px) 40px,color-mix(in srgb,var(--pc) 30%,transparent),color-mix(in srgb,var(--pc) 8%,transparent) 90px,transparent 170px),var(--dash-card);border-color:color-mix(in srgb,var(--pc) 22%,var(--dash-line));transition:border-color .2s,transform .2s}
.platform-card:hover{border-color:color-mix(in srgb,var(--pc) 55%,transparent);transform:translateY(-2px)}
.platform-card:after{display:none}
.platform-card .swatch{border-radius:50%;box-shadow:0 0 10px var(--pc);margin:0;flex:none}
.platform-card .platform-name{display:flex;align-items:center;gap:9px;line-height:1.2}
.platform-badge{width:40px;height:40px;padding:0;border-radius:11px;overflow:hidden;display:grid;place-items:center;border:0;position:relative;z-index:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 22%,var(--dash-line)),0 8px 22px -6px color-mix(in srgb,var(--pc) 70%,transparent)}
.platform-badge .logo{width:24px;height:24px;display:block}
/* Current official app-icon styles */
.badge-instagram{background:linear-gradient(45deg,#FFD600 0%,#FF7A00 25%,#FF0069 55%,#D300C5 80%,#7638FA 100%)}
.logo-instagram{fill:#fff}
.badge-tiktok{background:#000}
.logo-tiktok{fill:#fff;filter:drop-shadow(-1.2px -1.2px 0 #25F4EE) drop-shadow(1.2px 1.2px 0 #FE2C55)}
.badge-youtube{background:#fff}
.platform-badge .logo-youtube{width:28px;height:28px}
.badge-facebook{background:#0866FF}
.platform-badge .logo-facebook{width:40px;height:40px;fill:#0866FF;margin-top:2px}
.artist-name{text-transform:uppercase;overflow-wrap:anywhere}
.artist-hero{background-size:cover;background-position:center 30%}
.dash-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;padding:10px 0}
.dash-search:focus-within{border-color:rgba(255,255,255,.35)}
.search-results{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--dash-card-2);border:1px solid var(--dash-line);border-radius:16px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:40}
.search-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:#fff;text-decoration:none;font-size:13px}
.search-item small{color:var(--dash-muted)}
.search-item.active,.search-item:hover{background:rgba(255,255,255,.07)}
.search-empty{padding:12px;color:var(--dash-muted)}
.status-msg{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:16px;padding:14px 18px;margin-bottom:18px;color:var(--dash-muted);font-size:13px}
.status-msg.error{border-color:rgba(230,103,103,.5);color:#f0b4b4}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--pc);margin-right:8px;vertical-align:-1px}
.platform-since{color:#6f6f79;font-size:11px;margin-top:10px}
.platform-meta{flex-wrap:wrap;gap:6px 16px}
.share-note{margin-top:14px;line-height:1.5}
/* chart */
.analytics-grid>.panel:first-child{position:relative}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:#c4c4ca;margin:-8px 0 14px}
.chart svg{display:block}
.chart .grid-line{stroke:rgba(255,255,255,.07)}
.chart .baseline{stroke:rgba(255,255,255,.25)}
.chart .axis-label{fill:#8a8a94;font-size:11px;font-family:Manrope,sans-serif}
.chart .hit{fill:transparent;cursor:pointer}
.chart .hit.on{fill:rgba(255,255,255,.05)}
.chart-tooltip{position:absolute;transform:translateX(-50%);min-width:180px;background:#1c1c23;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px;font-size:12px;pointer-events:none;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.tip-title{font-weight:700;margin-bottom:6px}
.tip-row{display:flex;justify-content:space-between;gap:16px;color:#c4c4ca;padding:2px 0}
.tip-row strong{color:#fff;font-weight:600}
.tip-total{border-top:1px solid var(--dash-line);margin-top:4px;padding-top:6px}
.chart-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:12px}
.link-btn{background:none;border:0;color:var(--dash-accent);font-size:12px;font-weight:700;white-space:nowrap;padding:4px 0;cursor:pointer}
.chart-table-wrap{max-height:320px;overflow:auto;margin-top:12px;border:1px solid var(--dash-line);border-radius:12px}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th,.data-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--dash-line);white-space:nowrap}
.data-table th:first-child,.data-table td:first-child{text-align:left}
.data-table th{position:sticky;top:0;background:#0d0d11;color:#8a8a94;font-weight:600}
/* highlights */
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rank-list{list-style:none;margin:16px 0 0;padding:0;counter-reset:rank}
.rank-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--dash-line);counter-increment:rank}
.rank-list li:first-child{border-top:0}
.rank-list li:not(.empty):before{content:counter(rank);width:22px;color:#6f6f79;font-size:12px;font-weight:700}
.rank-main{flex:1;min-width:0;display:flex;flex-direction:column}
.rank-name{font-size:13px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.rank-name:hover{color:var(--dash-accent)}
.rank-sub{font-size:11px;color:#77777f;margin-top:2px}
.rank-val{font-weight:700;font-size:13px}
.rank-list .empty{color:var(--dash-muted);font-size:13px}
/* videos */
.filter-row{flex-wrap:wrap;align-items:center}
.filter{cursor:pointer}
.filter-search{border:1px solid var(--dash-line);background:#0c0c10;color:#fff;border-radius:999px;padding:8px 14px;font-size:12px;width:200px;outline:0}
.filter-search:focus{border-color:rgba(255,255,255,.35)}
.video-text{min-width:0}
.video-meta a{color:#bdbdc6;text-decoration:none}
.video-meta a:hover{color:var(--dash-accent)}
.thumb{background:#1d1d24;flex:none}
.stat-num a{color:inherit;text-decoration:none}
.stat-num a:hover{color:var(--dash-accent)}
.stat-num.muted{color:#4d4d55}
#video-rows>.video-row:first-child{border-top:1px solid var(--dash-line)}
.video-empty{padding:28px 20px;color:var(--dash-muted);border-top:1px solid var(--dash-line)}
.load-more-wrap{text-align:center;margin-top:16px}
@media(max-width:1100px){.insights-grid{grid-template-columns:1fr}}
@media(max-width:700px){.chart-foot{flex-direction:column;align-items:flex-start}.filter-search{width:100%}.kpi-value{font-size:26px}}
@media(max-width:1100px){.video-row{grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(64px,.6fr)) 44px}}
@media(max-width:700px){.video-row{grid-template-columns:minmax(0,1fr) 58px 58px 34px;gap:8px}.dash-search{display:flex;width:auto;flex:1;margin-left:auto}.dash-nav .inner{gap:16px;padding:0 16px}.search-results{width:min(320px,calc(100vw - 32px))}}
/* grid tracks must be allowed to shrink below their nowrap content */
.kpi-grid>*,.platform-grid>*,.analytics-grid>*,.insights-grid>*,.video-row>*{min-width:0}
@media(max-width:1100px){.analytics-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-head{flex-wrap:wrap}}

/* ---- Hero photo (mobile-first) ------------------------------------------ */
.artist-hero.has-photo{background:var(--dash-card)}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center 6%;z-index:0}
.artist-hero.has-photo:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,7,10,0) 25%,rgba(7,7,10,.75) 60%,rgba(7,7,10,.96) 85%)}
@media(max-width:899px){.artist-hero.has-photo{min-height:min(118vw,520px)}}
@media(min-width:900px){
  .hero-photo{left:auto;width:58%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
  .artist-hero.has-photo:before{background:linear-gradient(90deg,rgba(7,7,10,.6) 0,rgba(7,7,10,0) 60%)}
}

/* ---- Videos: one card per performance, a button per platform ------------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.perf-list{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:22px;overflow:hidden}
.perf-row.perf-head{display:none}
.perf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding:14px;border-top:1px solid var(--dash-line)}
#video-rows>.perf-row:first-child{border-top:0}
.perf-main{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;min-width:0}
.perf-main .thumb{width:45px;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:center;border-radius:8px}
.perf-title{margin:0;font-family:Manrope,sans-serif;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:0;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.perf-title .venue{color:#c4c4ca;font-weight:600}
.perf-main .video-meta{margin-top:5px;line-height:1.4}
.perf-total-inline{margin-left:auto;flex:none;text-align:right;padding-left:6px}
.perf-total-inline strong{display:block;color:var(--dash-accent);font-size:16px;font-weight:800}
.perf-total-inline span{display:block;color:#71717b;font-size:10px;white-space:nowrap}
.perf-total-col{display:none}
.pcell{display:flex;flex-direction:column;gap:6px;min-width:0}
.pcell-views{font-size:13px;font-weight:700;text-align:center}
.pbtn{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 8px;border-radius:999px;border:1px solid var(--dash-line);background:#0c0c10;color:#fff;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden}
.pbtn .swatch{width:8px;height:8px;border-radius:50%;margin:0;flex:none}
a.pbtn:hover,a.pbtn:focus-visible{border-color:var(--pc);background:#15151b;color:#fff}
.pl-long{display:none}
.pcell.off .pcell-views{color:#4d4d55}
.pcell.off .pbtn{opacity:.3;border-style:dashed}
.load-more-wrap .filter{min-height:44px;padding:0 22px}
@media(min-width:480px){.pl-long{display:inline}.pl-short{display:none}}
@media(min-width:960px){
  .perf-row.perf-head{display:grid;color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.8px;background:#0d0d11;padding:14px 20px}
  .perf-head>div:not(:first-child){text-align:center}
  .perf-row{grid-template-columns:minmax(0,2fr) repeat(4,minmax(96px,.6fr)) minmax(70px,.45fr);align-items:center;gap:10px;padding:14px 20px}
  .perf-main{grid-column:auto;align-items:center}
  .perf-main .thumb{width:40px}
  .perf-total-inline{display:none}
  .perf-total-col{display:block;text-align:center;color:var(--dash-accent);font-weight:800;font-size:14px}
  .pbtn{min-height:32px}
}
.perf-title .venue span{font-size:12px}
.rank-more{display:none;margin-top:10px}
@media(max-width:699px){
  .rank-list:not(.expanded) li:nth-child(n+6){display:none}
  .rank-more{display:block}
}

/* Manrope has Greek letters (Plus Jakarta Sans and Poppins don't), so Greek and Latin text share one font.
   Template headings, buttons and inputs follow it too. Poppins is kept only for the MUSICBOX logo. */
.artist-dashboard :is(h1,h2,h3,h4,h5,h6,p,button,input,select,table){font-family:Manrope,sans-serif}
/* body is a flex container (template), so without this the page width followed the longest video title
   and changed when switching sorts. */
.dashboard-wrap{width:100%;flex:1 1 auto;min-width:0}
/* Stat boxes: same hover highlight as the platform cards, in the page accent colour */
.kpi{transition:border-color .2s,transform .2s,background .2s}
.kpi:hover{border-color:color-mix(in srgb,var(--dash-accent) 45%,transparent);transform:translateY(-2px);background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--dash-accent) 9%,transparent),transparent 60%),var(--dash-card)}
/* MUSICBOX logo: BOX glows like it is lit up */
.dash-brand span{color:#C77DFF}
/* Phones: the rank goes on its own line under "Artist performance profile" */
@media(max-width:899px){#artist-rank{display:block;margin-top:5px}#artist-rank .rank-sep{display:none}}
/* Phones: performances, posts and data date each on their own line */
@media(max-width:899px){#artist-sub .sub-part{display:block}#artist-sub .sub-sep{display:none}}
/* Phones: the top keeps only MUSICBOX + search; the page links move to a fixed tab bar at the bottom (built in site-common.js) */
.site-tabbar{display:none}
@media(max-width:699px){
  .dash-nav .inner{height:auto;min-height:60px;padding:10px 16px;gap:14px}
  .dash-nav .dash-search{flex:1 1 0;min-width:0;width:auto}
  .dash-nav .dash-links{display:none}
  .site-tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(10,10,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--dash-line)}
  .site-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#6f6f7a;text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:.2px}
  .site-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .site-tabbar a.active{color:#fff}
  .site-tabbar a.active svg{color:var(--dash-accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dash-accent) 60%,transparent))}
  body.artist-dashboard{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
}
/* Site-wide search: group labels (Artists / Songs / Locations) */
.search-group{padding:8px 12px 4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6f6f79}
/* platform buttons: small coloured app icon + arrow (replaces dot + IG/TT/YT/FB) */
.pbtn .pb-icon{width:16px;height:16px;border-radius:4.5px;box-shadow:none;flex:none}
.pbtn .pb-icon .logo{width:10px;height:10px}
.pbtn .pb-icon .logo-youtube{width:13px;height:13px}
.pbtn .pb-icon .logo-facebook{width:16px;height:16px;margin-top:1px}
.pbtn .pb-icon .logo-tiktok{filter:drop-shadow(-.6px -.6px 0 #25F4EE) drop-shadow(.6px .6px 0 #FE2C55)}
/* compact icon pills (no arrow) */
.pcell .pbtn{align-self:center;width:46px;min-height:26px;padding:0;gap:0}
@media(max-width:959px){.pcell .pbtn{width:52px;min-height:30px}}
/* platform pills = same size as the reel-card social pills, but always in brand colour */
.pcell .pbtn{width:28px;height:22px;min-height:22px;padding:0;border:0;border-radius:999px;background:var(--pc);color:#fff;transition:transform .15s,filter .15s}
.pcell .pbtn .pb-glyph{width:12px;height:12px;fill:currentColor;display:block}
.pcell .pbtn.pb-instagram{background:linear-gradient(45deg,#FFD600,#FF7A00 25%,#FF0069 55%,#D300C5 80%,#7638FA)}
.pcell .pbtn.pb-tiktok{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pcell a.pbtn:hover,.pcell a.pbtn:focus-visible{transform:translateY(-1px);filter:brightness(1.12);border:0}
.pcell.off .pbtn{background:rgba(255,255,255,.06);box-shadow:none;opacity:.35;border:0}
@media(max-width:959px){.pcell .pbtn{width:28px;min-height:22px}}
/* final: dark 28x22 pill (reel-card size) holding the coloured app icon */
.pcell .pbtn,.pcell .pbtn.pb-instagram,.pcell .pbtn.pb-tiktok{width:28px;height:22px;min-height:22px;padding:0;border:1px solid var(--dash-line);background:#0c0c10;box-shadow:none;filter:none}
.pcell a.pbtn:hover,.pcell a.pbtn:focus-visible{border:1px solid var(--pc);background:#15151b;filter:none;transform:translateY(-1px)}
.pcell .pbtn .pb-icon{width:14px;height:14px;border-radius:4px}
.pcell .pbtn .pb-icon .logo{width:9px;height:9px}
.pcell .pbtn .pb-icon .logo-youtube{width:12px;height:12px}
.pcell .pbtn .pb-icon .logo-facebook{width:14px;height:14px;margin-top:1px}
.pcell.off .pbtn{background:#0c0c10;opacity:.3;border:1px dashed var(--dash-line)}
/* logo-only buttons: no pill, the 4 logos at matching size */
.pcell .pbtn,.pcell .pbtn.pb-instagram,.pcell .pbtn.pb-tiktok{width:auto;height:auto;min-height:0;padding:2px;border:0;background:none;border-radius:6px}
.pcell a.pbtn:hover,.pcell a.pbtn:focus-visible{border:0;background:none;transform:translateY(-1px) scale(1.12)}
.pcell .pbtn .pb-icon{width:18px;height:18px;border-radius:5px;box-shadow:none}
.pcell .pbtn .pb-icon .logo{width:11px;height:11px}
.pcell .pbtn .badge-tiktok{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pcell .pbtn .badge-youtube,.pcell .pbtn .badge-facebook{background:none;border-radius:0;overflow:visible;width:auto}
.pcell .pbtn .pb-icon .logo-youtube{width:23px;height:23px}
.pcell .pbtn .pb-icon .logo-facebook{width:19px;height:19px;margin-top:0}
.pcell.off .pbtn{border:0;background:none;opacity:.25;filter:grayscale(1)}
.pcell a.pbtn{transition:transform .15s}
.pcell .pbtn .badge-youtube,.pcell .pbtn .badge-facebook{width:18px;height:18px;display:grid;place-items:center}
.pcell .pbtn .badge-youtube .logo-youtube{transform:translateY(-2px)}
/* logo buttons: thin outline on all four, bigger TikTok glyph, YouTube not clipped */
.pcell .pbtn{overflow:visible}
.pcell .pbtn .pb-icon{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.pcell .pbtn .badge-tiktok .logo-tiktok{width:13px;height:13px}
.pcell .pbtn .badge-youtube{width:23px;height:16px;border-radius:4.5px}
.pcell .pbtn .badge-youtube .logo-youtube{width:23px;height:23px;transform:none}
.pcell .pbtn .badge-facebook{width:19px;height:19px;border-radius:50%}
.pcell .pbtn .badge-youtube{position:relative;display:block}.pcell .pbtn .badge-youtube .logo-youtube{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%)}
.pcell .pbtn .pb-icon{box-shadow:0 0 0 1px #000}
/* phone/tablet rows: big thumbnail on the left spanning both lines; title + total, then the 4 platforms, all to its right */
@media(max-width:959px){
  .perf-row:not(.perf-head){grid-template-columns:72px repeat(4,minmax(0,1fr));gap:10px 6px;align-items:start}
  .perf-row .perf-main{display:contents}
  .perf-row .perf-main .thumb{grid-column:1;grid-row:1/span 2;width:72px;border-radius:10px;align-self:start}
  .perf-row .video-text{grid-column:2/5;grid-row:1;min-width:0}
  .perf-row .perf-total-inline{grid-column:5;grid-row:1;justify-self:end;padding-left:0}
  .perf-row .pcell{grid-row:2;align-self:end;gap:4px}
  .perf-row .pcell-views{font-size:12px}
}
.artist-name{overflow-wrap:normal;word-break:keep-all}

/* name: lighter negative tracking so diagonal pairs (VV, AV, WA...) do not touch */
.artist-name{letter-spacing:-.02em}
/* active sort buttons: fake-bold with text-shadow so the button keeps its width (no layout shift) */
.filter.active{font-weight:inherit;text-shadow:.35px 0 0 currentColor,-.35px 0 0 currentColor}

/* phones/tablets: horizontal focus per artist (set by JS as --mx); desktop keeps the centred photo */
@media(max-width:899px){.hero-photo{background-position:var(--mx,50%) var(--my,6%);background-size:var(--msize,cover);background-repeat:no-repeat}}
/* phones/tablets: drop the "Artist performance profile" label, keep the rank line in its place */
@media(max-width:899px){.eyebrow-label{display:none}#artist-rank{margin-top:0}}

/* phones: Highlights panels (Top songs / Top venues / Performed with) fold by tapping the title */
@media(max-width:699px){
  .insights-grid .panel-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
  .insights-grid .panel-title:after{content:'';width:8px;height:8px;border-right:2px solid #aaa;border-bottom:2px solid #aaa;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
  .insights-grid .panel.collapsed .panel-title:after{transform:rotate(-45deg);margin-top:0}
  .insights-grid .panel.collapsed .rank-list,.insights-grid .panel.collapsed .rank-more{display:none}
}
/* phones: two narrow Platform reach cards — smaller logo + a guaranteed gap so "Instagram"/"YouTube" never touch it */
@media(max-width:699px){
  .platform-card{padding:16px 14px}
  .platform-top{gap:8px}
  .platform-name{min-width:0;font-size:14px;gap:7px}
  .platform-name .swatch{flex:none}
  .platform-top .platform-badge{flex:none;width:32px;height:32px;border-radius:9px}
  .platform-top .platform-badge .logo{width:19px;height:19px}
  .platform-top .platform-badge .logo-youtube{width:22px;height:22px}
  .platform-top .platform-badge .logo-facebook{width:32px;height:32px}
}
/* platform buttons in video rows (option "DBW"): dark pill with the logo + a white ↗; the border takes the
   platform colour on hover. Drop cards keep plain logos (too narrow for four pills). */
.pcell:not(.drop-pcell) a.pbtn{flex-direction:row;gap:6px;padding:3px 9px 3px 4px;border:1px solid var(--dash-line);border-radius:999px;background:#121218;transition:border-color .15s,transform .15s}
.pcell:not(.drop-pcell) a.pbtn:after{content:'';flex:none;width:12px;height:12px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
.pcell:not(.drop-pcell) a.pbtn:hover,.pcell:not(.drop-pcell) a.pbtn:focus-visible{border:1px solid var(--pc);background:#121218;transform:translateY(-1px)}

/* Hero: "180 performances" + white up-right arrow (same mask style as the platform links) -> scrolls to the Videos list */
#videos{scroll-margin-top:84px}
a.sub-jump,a.see-all{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
a.sub-jump{color:inherit}
a.see-all{color:var(--dash-accent)}
a.sub-jump .jump-arrow,a.see-all .jump-arrow{flex:none;width:12px;height:12px;position:relative;transition:transform .15s}
a.sub-jump .jump-arrow:after,a.see-all .jump-arrow:after{content:'';position:absolute;inset:0;margin:auto;width:12px;height:12px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
a.sub-jump:hover .jump-arrow,a.sub-jump:focus-visible .jump-arrow{transform:translate(1px,-1px)}

/* hero photo fades in once the image and its phone crop are ready (no default-crop flash) */
.hero-photo{opacity:0;transition:opacity .25s}
.hero-photo.ready{opacity:1}

/* "See the full chart" / "See everyone hot this month": bolder arrow (matches the bold text); on hover the whole link grows a little */
a.see-all .jump-arrow:after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
a.see-all{transform-origin:left center;transition:transform .15s}
a.see-all:hover,a.see-all:focus-visible{transform:scale(1.06)}

/* Keep the top menu bar on screen while scrolling on phones too. The template sets overflow-x:hidden on html/body,
   which stops position:sticky from working below 1200px; clip still blocks sideways scrolling but keeps sticky working. */
html{overflow-x:clip}
body.artist-dashboard{overflow-x:clip}
@media(max-width:899px){#videos{scroll-margin-top:118px}}   /* the phone menu bar is ~106px tall and now stays on screen */

/* video rows: the thumbnail opens the video (YouTube, else Instagram, TikTok, Facebook), like the Latest drops cards.
   display:contents keeps the picture where the row layout puts it; the platform buttons stay the keyboard way in. */
a.thumb-link{display:contents;cursor:pointer}
a.thumb-link .thumb{transition:opacity .15s}
@media(hover:hover){a.thumb-link:hover .thumb{opacity:.85}}

/* Logo: fixed width (the MUSICBOX lettering in Poppins is 5.22em wide) so nothing shifts while the font loads;
   the font link uses display=block, so the logo appears once in its real font instead of a wider stand-in first. */
.dash-brand{display:inline-block;width:5.25em;white-space:nowrap;flex:none}

/* "Loading…" only appears if loading takes longer than 0.4 s (normally it never shows). It floats over the page instead of
   taking room, so nothing jumps when it goes away. Error messages show straight away, in place. */
.status-msg:not(.error){position:fixed;top:130px;left:50%;transform:translateX(-50%);z-index:20;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:status-late .2s .4s both}
@keyframes status-late{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}

/* Loading shapes (shimmer), see skeletons() in site-common.js: same places and roughly the same sizes as the real content */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,#1a1a21 0%,#2a2a34 40%,#1a1a21 80%) 0 0/300% 100%;animation:sk-sweep 1.4s linear infinite}
@keyframes sk-sweep{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}
.sk-line{height:12px;margin:7px 0}
.sk-big{height:26px;width:62%;border-radius:10px;margin-bottom:6px}
.sk-stat .sk-line{width:45%}
.sk-tile,.sk-drop{min-width:0;scroll-snap-align:start}
.sk-tile-img{aspect-ratio:3/4;border-radius:18px;margin-bottom:10px}
.sk-drop-img{aspect-ratio:9/16;border-radius:16px;margin-bottom:10px}
.sk-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--dash-line)}
.sk-row:first-child{border-top:0}
.sk-thumb{flex:none;width:44px;aspect-ratio:9/16;border-radius:8px}
.sk-mid{flex:1;min-width:0}
.sk-val{flex:none;width:52px;height:16px}
.rank-list li.sk-li{display:flex;align-items:center;gap:12px}
.rank-list li.sk-li:before{content:none}
.sk-card{height:140px;border-radius:20px}
.sk-trend{height:118px;border-radius:18px}
.lines-sk{min-height:1em}
.dash-brand span{margin-left:.05em}   /* tiny gap between MUSIC and BOX (~1px) */
.dash-brand{width:5.3em}   /* fixed width grows by that gap */

/* header photo: desktop banner; phones & tablets use their own photo when the backoffice made one (else the banner) */
.hero-photo{background-image:var(--img-desk)}
@media(max-width:899px){.hero-photo{background-image:var(--img-mob,var(--img-desk))}}

/* ---- Performance: one card per platform (2 per row; stats beside the curve, under it on phones) ---- */
.perf-head{align-items:flex-start!important}
.perf-switch{align-self:flex-start;margin-top:-3px}
.perf-switch button{font:700 13px Manrope,sans-serif;padding:7px 15px;color:#888;cursor:pointer}
.perf-switch button.active{color:#09090c}
.perf-cards{display:grid;gap:14px}
@media(min-width:860px){.perf-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perf-card{position:relative;overflow:hidden;min-width:0;background:#0e0e13;border:1px solid var(--dash-line);border-radius:22px;padding:18px}
.perf-card:before{content:'';position:absolute;inset:-40% -10% auto auto;width:60%;height:120%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.14;pointer-events:none}
.perf-head-row{display:flex;align-items:center;gap:8px;font-weight:800}
.perf-head-row i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 10px currentColor}
.perf-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:rgba(255,255,255,.06);color:#ddd;font-size:11.5px;font-weight:800;margin-left:auto}
.perf-delta{color:var(--dash-muted);font-size:12px;margin-top:2px}
.perf-up{color:#3ddc97;font-weight:800} .perf-down{color:#ff6b81;font-weight:800} .perf-new{color:#ddd;font-weight:800}
.perf-body{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:stretch;margin-top:8px}
.perf-chart{min-width:0}
.perf-chart svg{display:block;width:100%;overflow:visible}
.perf-stats{display:grid;grid-template-rows:repeat(4,1fr);gap:6px}
.perf-stats div{background:rgba(255,255,255,.03);border:1px solid var(--dash-line);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;justify-content:center}
.perf-stats span{color:#6f6f7a;font-size:10.5px;line-height:1.2} .perf-stats b{font-size:15px;line-height:1.25}
@media(max-width:520px){.perf-body{grid-template-columns:1fr}.perf-stats{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.perf-switch{margin-top:0}}
.perf-grid-line{stroke:rgba(255,255,255,.055)} .perf-grid-line.dash{stroke-dasharray:2 6}
.perf-peak{fill:#fff;font:800 11px Manrope,sans-serif}
.perf-cx{stroke:rgba(255,255,255,.3)}
.perf-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:perf-draw 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes perf-draw{to{stroke-dashoffset:0}}
.perf-fade{opacity:0;animation:perf-fade 1s .35s ease forwards} @keyframes perf-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.perf-draw{animation:none;stroke-dasharray:none}.perf-fade{animation:none;opacity:1}}
.perf-tip{position:fixed;z-index:60;pointer-events:none;background:rgba(20,20,28,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;font-size:12.5px;box-shadow:0 18px 40px rgba(0,0,0,.55);min-width:170px;display:none;color:#fff}
.perf-tip b{display:block;margin-bottom:6px}
.perf-tip-row{display:flex;justify-content:space-between;gap:16px;color:#ddd}
.perf-tip-row i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.perf-axis{fill:#6f6f7a;font:600 11px Manrope,sans-serif}