/* ADIMASTER RELEASE 57 · ARTIST LIVE PANELS — PHASE 1 Master wallpaper remains the visual truth. We now replace only the right telemetry + bottom dashboard + system rail with live DOM panels, positioned by the APPROVED MASTER coordinates (1448×1086). Left identity artwork remains baked into the wallpaper for now. The interactive WebGL globe remains untouched. */ @media (min-width:761px){ body[data-route="artist"] .view.active[data-view="artist"]{ --r57-cyan:#5ef7ff; --r57-blue:#3e9dff; --r57-violet:#8a58ff; --r57-magenta:#ee57d3; } /* ------------------------------------------------------------------ RIGHT TELEMETRY — master coordinates: X 1150..1408 / Y 58..576 on 1448×1086. ------------------------------------------------------------------ */ body[data-route="artist"] .r53Telemetry{ display:grid!important; position:absolute!important; z-index:46!important; left:79.42%!important; top:5.34%!important; width:17.75%!important; height:47.70%!important; grid-template-rows:1.08fr .97fr .99fr!important; gap:.92vw!important; margin:0!important; padding:0!important; pointer-events:auto!important; } body[data-route="artist"] .r53TelemetryPanel{ position:relative!important; min-height:0!important; overflow:hidden!important; border:1px solid rgba(81,225,255,.36)!important; border-radius:8px!important; background: repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px), radial-gradient(120% 95% at 20% 0%,rgba(61,222,255,.09),transparent 58%), linear-gradient(155deg,rgba(2,10,22,.965),rgba(4,9,21,.94) 62%,rgba(9,5,27,.95))!important; box-shadow: inset 0 0 0 1px rgba(95,237,255,.045), inset 0 0 28px rgba(51,218,255,.035), 0 8px 26px rgba(0,0,0,.24), 0 0 14px rgba(70,225,255,.055)!important; transform:perspective(900px) rotateX(var(--r57-rx,0deg)) rotateY(var(--r57-ry,0deg)) translateZ(0)!important; transform-origin:center!important; transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease!important; will-change:transform!important; } body[data-route="artist"] .r53TelemetryPanel:hover{ border-color:rgba(97,243,255,.62)!important; box-shadow: inset 0 0 0 1px rgba(102,240,255,.07), inset 0 0 34px rgba(62,225,255,.055), 0 12px 30px rgba(0,0,0,.26), 0 0 24px rgba(78,226,255,.09)!important; } body[data-route="artist"] .r53TelemetryPanel::before{ content:""!important; position:absolute!important; left:7px;right:7px;top:7px;height:1px!important; display:block!important; background:linear-gradient(90deg,var(--r57-cyan),rgba(82,230,255,.14) 55%,var(--r57-violet),transparent)!important; opacity:.72!important; } body[data-route="artist"] .r53TelemetryPanel::after{ content:""!important; position:absolute!important; inset:6px!important; display:block!important; pointer-events:none!important; border:1px solid rgba(86,228,255,.075)!important; border-radius:5px!important; clip-path:polygon(0 13px,13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%)!important; } body[data-route="artist"] .r53TelemetryTitle{ position:absolute!important; z-index:4!important; left:13px!important;right:11px!important;top:11px!important; display:flex!important;align-items:center!important;gap:7px!important; color:#62f7ff!important; font-size:clamp(7px,.57vw,10px)!important; font-weight:900!important; letter-spacing:.11em!important; text-transform:uppercase!important; } body[data-route="artist"] .r53TelemetryTitle i{ width:6px!important;height:6px!important;border-radius:50%!important; background:#6cfff5!important;box-shadow:0 0 12px #59f8ff!important; } body[data-route="artist"] .r53TelemetryBody{ position:absolute!important; inset:35px 12px 16px!important; overflow:hidden!important; opacity:1!important; } /* Global activity — animated node map / routes. */ body[data-route="artist"] .r53Global .r53TelemetryBody{ border-radius:3px!important; background: radial-gradient(circle at 13% 28%,#55ecff 0 2px,transparent 3px), radial-gradient(circle at 31% 63%,#8a61ff 0 2px,transparent 3px), radial-gradient(circle at 52% 42%,#58eaff 0 2px,transparent 3px), radial-gradient(circle at 73% 68%,#8b5bff 0 2px,transparent 3px), radial-gradient(circle at 89% 31%,#df58ff 0 2px,transparent 3px), linear-gradient(21deg,transparent 44%,rgba(71,215,255,.20) 45% 46%,transparent 47%), linear-gradient(157deg,transparent 42%,rgba(138,83,255,.20) 43% 44%,transparent 45%), radial-gradient(ellipse at center,rgba(48,108,255,.13),transparent 65%)!important; animation:r57MapBreath 4.6s ease-in-out infinite!important; } body[data-route="artist"] .r53Global .r53TelemetryBody::before{ content:""!important; position:absolute!important;inset:8% 6%!important; background: linear-gradient(18deg,transparent 0 24%,rgba(78,217,255,.20) 25% 26%,transparent 27% 48%,rgba(141,80,255,.18) 49% 50%,transparent 51%), linear-gradient(165deg,transparent 0 31%,rgba(82,226,255,.15) 32% 33%,transparent 34% 63%,rgba(150,86,255,.15) 64% 65%,transparent 66%)!important; filter:drop-shadow(0 0 7px rgba(93,225,255,.16))!important; animation:r57RouteDrift 8s linear infinite alternate!important; } /* Sound frequencies — live animated equalizer copied from R53. */ body[data-route="artist"] .r53Sound .r53TelemetryBody{ display:flex!important;align-items:flex-end!important;gap:3px!important;padding:7px 4px 10px!important; } body[data-route="artist"] .r53Sound .r53TelemetryBody i{ flex:1!important;min-width:2px!important;border-radius:2px 2px 0 0!important; background:linear-gradient(180deg,#62f6ff,#2ba7ff 45%,#c94dff 78%,#f054c9)!important; box-shadow:0 0 7px rgba(78,221,255,.20)!important; transform-origin:bottom!important; animation:r57Eq 1.35s ease-in-out infinite alternate!important; } body[data-route="artist"] .r53Sound .r53TelemetryBody i:nth-child(3n){animation-delay:-.42s!important;background:linear-gradient(180deg,#6afcff,#795cff 58%,#f250d0)!important} body[data-route="artist"] .r53Sound .r53TelemetryBody i:nth-child(4n){animation-delay:-.88s!important} body[data-route="artist"] .r53Sound .r53TelemetryBody i:nth-child(5n){animation-delay:-1.16s!important} body[data-route="artist"] .r53Sound .r53TelemetryBody::after{ content:"20Hz LIVE FEED 20kHz"!important; position:absolute!important;left:0;right:0;bottom:0!important; color:#6b8aa2!important;font:700 6px/1 monospace!important;letter-spacing:.05em!important; white-space:pre!important;text-align:justify!important; } /* Energy field — rotating rings + live bars. */ body[data-route="artist"] .r53Energy .r53TelemetryBody{ display:grid!important;grid-template-columns:1fr 1fr 38px!important;align-items:center!important;gap:5px!important; } body[data-route="artist"] .r53EnergyOrb{ width:min(5.2vw,74px)!important;height:min(5.2vw,74px)!important; border-radius:50%!important;justify-self:center!important;position:relative!important; background:repeating-radial-gradient(circle,transparent 0 8px,rgba(89,224,255,.24) 9px 10px,transparent 11px 15px,rgba(143,81,255,.20) 16px 17px,transparent 18px 24px)!important; box-shadow:inset 0 0 20px rgba(61,221,255,.09),0 0 18px rgba(83,93,255,.09)!important; animation:r57EnergySpin 10.5s linear infinite!important; } body[data-route="artist"] .r53EnergyOrb:nth-child(2){animation-direction:reverse!important;animation-duration:13s!important} body[data-route="artist"] .r53EnergyOrb::before, body[data-route="artist"] .r53EnergyOrb::after{ content:""!important;position:absolute!important;left:4px;right:4px;top:50%!important;height:1px!important; background:linear-gradient(90deg,transparent,#51e7ff,transparent)!important;transform:rotate(35deg)!important; } body[data-route="artist"] .r53EnergyOrb::after{transform:rotate(-55deg)!important;background:linear-gradient(90deg,transparent,#bb5dff,transparent)!important} body[data-route="artist"] .r53EnergyBars{height:72%!important;display:flex!important;align-items:flex-end!important;gap:3px!important} body[data-route="artist"] .r53EnergyBars i{flex:1!important;background:linear-gradient(180deg,#56f1ff,#397dff 55%,#a95dff)!important;box-shadow:0 0 6px rgba(83,222,255,.20)!important;animation:r57EnergyBars 1.7s ease-in-out infinite alternate!important;transform-origin:bottom!important} body[data-route="artist"] .r53EnergyBars i:nth-child(2){animation-delay:-.45s!important} body[data-route="artist"] .r53EnergyBars i:nth-child(3){animation-delay:-.9s!important} body[data-route="artist"] .r53EnergyBars i:nth-child(4){animation-delay:-1.25s!important} body[data-route="artist"] .r53EnergyMeta{ position:absolute!important;left:13px!important;right:13px!important;bottom:9px!important; display:flex!important;justify-content:space-between!important; color:#5cf3ff!important;font-size:6px!important;letter-spacing:.08em!important; } /* ------------------------------------------------------------------ LOWER LIVE DECK — master coordinates: X 11..1404 / Y 716..964. The deck is deliberately near-opaque: it "turns off" the baked dashboard under it and replaces it with the actual dynamic stats/cards. ------------------------------------------------------------------ */ body[data-route="artist"] .artistIntelligenceR49{ display:grid!important; position:absolute!important; z-index:48!important; left:.76%!important; top:65.93%!important; width:96.96%!important; height:22.93%!important; min-height:0!important; max-width:none!important; margin:0!important; padding:10px 12px 12px!important; grid-template-columns:minmax(29%,.29fr) minmax(0,.71fr)!important; grid-template-rows:22px minmax(0,1fr)!important; gap:7px 12px!important; border:1px solid rgba(83,226,255,.30)!important; border-radius:10px!important; background: repeating-linear-gradient(180deg,rgba(255,255,255,.008) 0 1px,transparent 1px 7px), radial-gradient(48% 75% at 12% 100%,rgba(61,230,255,.07),transparent 72%), radial-gradient(50% 78% at 86% 100%,rgba(139,77,255,.09),transparent 74%), linear-gradient(138deg,rgba(2,9,18,.975),rgba(3,8,19,.97))!important; box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 44px rgba(0,0,0,.25)!important; overflow:hidden!important; pointer-events:auto!important; } body[data-route="artist"] .artistIntelligenceR49::before{ content:""!important;display:block!important;position:absolute!important;inset:6px!important; border:1px solid rgba(95,235,255,.06)!important;border-radius:7px!important;pointer-events:none!important; } body[data-route="artist"] .r49OverviewLabel{ grid-column:1!important;grid-row:1!important;display:flex!important;align-items:center!important;gap:8px!important; padding-left:5px!important;color:#afc3d9!important;font-size:clamp(6px,.54vw,9px)!important;font-weight:900!important;letter-spacing:.15em!important;text-transform:uppercase!important; } body[data-route="artist"] .r49OverviewLabel::before{content:"»"!important;color:#69f5ff!important;font-size:12px!important} body[data-route="artist"] .r49OverviewLabel i{flex:1!important;height:1px!important;background:linear-gradient(90deg,rgba(81,239,255,.34),transparent)!important} body[data-route="artist"] .artistStats{ grid-column:1!important;grid-row:2!important; display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important;margin:0!important;padding:0!important;min-height:0!important; } body[data-route="artist"] .artistStats .statCard{ position:relative!important;min-height:0!important;height:100%!important; padding:10px 10px 8px!important;border-radius:8px!important;overflow:hidden!important; border:1px solid rgba(85,224,255,.20)!important; background:linear-gradient(180deg,rgba(5,16,29,.98),rgba(4,9,18,.995))!important; box-shadow:inset 0 1px rgba(255,255,255,.035)!important; transform:perspective(800px) rotateX(var(--r57-rx,0deg)) rotateY(var(--r57-ry,0deg))!important; transition:transform .16s ease,border-color .18s ease,box-shadow .18s ease!important; } body[data-route="artist"] .artistStats .statCard:hover{border-color:rgba(89,238,255,.45)!important;box-shadow:inset 0 0 24px rgba(65,223,255,.04),0 0 18px rgba(75,225,255,.05)!important} body[data-route="artist"] .artistStats .statCard::before{ display:grid!important;place-items:center!important;width:24px!important;height:24px!important;margin-bottom:7px!important;border-radius:50%!important; border:1px solid rgba(83,235,255,.30)!important;color:#67f8ff!important;font-size:12px!important; background:radial-gradient(circle,rgba(63,219,255,.10),rgba(4,12,24,.78))!important; } body[data-route="artist"] .artistStats .statCard:nth-child(1)::before{content:"♫"!important} body[data-route="artist"] .artistStats .statCard:nth-child(2)::before{content:"◉"!important} body[data-route="artist"] .artistStats .statCard:nth-child(3)::before{content:"◎"!important;color:#ef63d6!important;border-color:rgba(225,81,213,.32)!important} body[data-route="artist"] .artistStats .statCard::after{display:none!important} body[data-route="artist"] .artistStats .statCard strong{display:block!important;font-size:clamp(22px,2.1vw,42px)!important;line-height:1!important;color:#eef9ff!important} body[data-route="artist"] .artistStats .statCard:first-child strong{color:#62f7ff!important} body[data-route="artist"] .artistStats .statCard span{display:block!important;margin-top:6px!important;color:#8fa4ba!important;font-size:clamp(5px,.42vw,7px)!important;font-weight:900!important;letter-spacing:.11em!important;text-transform:uppercase!important} body[data-route="artist"] .r53Sparkline{position:absolute!important;left:10px!important;right:10px!important;bottom:9px!important;width:calc(100% - 20px)!important;height:24%!important;display:block!important;overflow:visible!important} body[data-route="artist"] .r53Sparkline polyline{fill:none!important;stroke:#5befff!important;stroke-width:2!important;filter:drop-shadow(0 0 3px rgba(75,225,255,.3))!important} body[data-route="artist"] .statCard:nth-child(2) .r53Sparkline polyline{stroke:#52f6c9!important} body[data-route="artist"] .statCard:nth-child(3) .r53Sparkline polyline{stroke:#ef56cc!important} body[data-route="artist"] .artistWorkboard{ grid-column:2!important;grid-row:1/3!important; min-width:0!important;padding:0 0 0 10px!important; border:0!important;border-left:1px solid rgba(97,225,255,.13)!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;backdrop-filter:none!important; } body[data-route="artist"] .artistWorkboard .sectionHead{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 6px!important;padding:0 3px 0 1px!important} body[data-route="artist"] .artistWorkboard .sectionHead .kicker{display:flex!important;align-items:center!important;gap:6px!important;color:#adc1d8!important;font-size:clamp(6px,.54vw,9px)!important;font-weight:900!important;letter-spacing:.15em!important;text-transform:uppercase!important} body[data-route="artist"] .artistWorkboard .sectionHead .kicker::before{content:"»"!important;width:auto!important;height:auto!important;background:none!important;color:#6cf7ff!important;font-size:12px!important;box-shadow:none!important} body[data-route="artist"] .artistWorkboard .sectionHead h2{display:none!important} body[data-route="artist"] .r49ViewAll{color:#f160d7!important;font-size:clamp(5px,.42vw,7px)!important;font-weight:900!important;letter-spacing:.14em!important;text-transform:uppercase!important} body[data-route="artist"] .artistWorkboard .rail{ display:grid!important; grid-auto-flow:column!important; grid-auto-columns:calc((100% - 36px)/5)!important; gap:9px!important;padding:0!important;height:calc(100% - 20px)!important;overflow:hidden!important; } body[data-route="artist"] .artistWorkboard .card{ position:relative!important;height:100%!important;min-height:0!important;border-radius:7px!important;overflow:hidden!important; background:linear-gradient(180deg,rgba(8,18,31,.985),rgba(4,9,18,.997))!important; border:1px solid rgba(91,220,255,.17)!important; box-shadow:inset 0 1px rgba(255,255,255,.025)!important; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important; } body[data-route="artist"] .artistWorkboard .card:hover{transform:translateY(-2px)!important;border-color:rgba(90,238,255,.48)!important;box-shadow:0 8px 20px rgba(0,0,0,.25),0 0 18px rgba(70,224,255,.06)!important} body[data-route="artist"] .artistWorkboard .cover{aspect-ratio:16/9!important} body[data-route="artist"] .artistWorkboard .cardBody{padding:6px 7px 6px!important} body[data-route="artist"] .artistWorkboard .cardTitle{font-size:clamp(6.8px,.68vw,10.5px)!important;line-height:1.16!important} body[data-route="artist"] .artistWorkboard .cardSub{font-size:clamp(4.8px,.45vw,7px)!important;line-height:1.25!important;min-height:12px!important;margin-top:3px!important;color:#8196ab!important} body[data-route="artist"] .artistWorkboard .tag{font-size:5.5px!important;padding:2px 5px!important} /* ------------------------------------------------------------------ BOTTOM SYSTEM RAIL — master coordinates Y 976..1050. ------------------------------------------------------------------ */ body[data-route="artist"] .r53SystemBar{ display:grid!important; position:absolute!important; z-index:48!important; left:.76%!important; top:89.87%!important; width:96.96%!important; height:6.54%!important; min-height:0!important; max-width:none!important; margin:0!important; grid-template-columns:1.08fr .92fr 1.02fr 1.24fr 1.22fr .75fr!important; border:1px solid rgba(76,220,255,.22)!important; border-radius:9px!important; overflow:hidden!important; background:linear-gradient(180deg,rgba(2,9,18,.98),rgba(3,8,17,.995))!important; box-shadow:inset 0 1px rgba(255,255,255,.03)!important; pointer-events:auto!important; } body[data-route="artist"] .r53SystemCell{ position:relative!important;display:grid!important;grid-template-columns:28px 1fr!important;align-items:center!important;gap:7px!important; padding:5px 10px!important;border-right:1px solid rgba(75,218,255,.12)!important;min-width:0!important; } body[data-route="artist"] .r53SystemCell:last-child{border-right:0!important} body[data-route="artist"] .r53SystemIcon{width:25px!important;height:25px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#59efff!important;border:1px solid rgba(77,226,255,.28)!important;box-shadow:inset 0 0 13px rgba(70,224,255,.05)!important;font-size:10px!important} body[data-route="artist"] .r53SystemCell:nth-child(4) .r53SystemIcon, body[data-route="artist"] .r53SystemCell:nth-child(5) .r53SystemIcon{color:#6b8cff!important} body[data-route="artist"] .r53SystemCopy{min-width:0!important} body[data-route="artist"] .r53SystemCopy small{display:block!important;color:#899db2!important;font-size:clamp(4.5px,.36vw,6.5px)!important;letter-spacing:.13em!important;text-transform:uppercase!important} body[data-route="artist"] .r53SystemCopy strong{display:block!important;margin-top:2px!important;color:#b8c8d8!important;font-size:clamp(5px,.42vw,7.5px)!important;font-weight:700!important;letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} body[data-route="artist"] .r53SystemCell:first-child .r53SystemCopy strong{color:#5dffe0!important} @keyframes r57Eq{from{transform:scaleY(.32);opacity:.52}to{transform:scaleY(1.02);opacity:1}} @keyframes r57EnergySpin{to{transform:rotate(360deg)}} @keyframes r57EnergyBars{from{transform:scaleY(.45);opacity:.62}to{transform:scaleY(1.02);opacity:1}} @keyframes r57MapBreath{0%,100%{filter:brightness(.88)}50%{filter:brightness(1.16)}} @keyframes r57RouteDrift{from{transform:translateX(-2%) scale(1)}to{transform:translateX(2%) scale(1.02)}} } @media (max-width:760px){ /* R57 phase 1 is desktop-only. Preserve existing mobile Artist verbatim. */ .r53Telemetry,.r53SystemBar,.r53Sparkline{display:none!important} } @media (prefers-reduced-motion:reduce){ .r53Sound .r53TelemetryBody i,.r53EnergyOrb,.r53EnergyBars i,.r53Global .r53TelemetryBody,.r53Global .r53TelemetryBody::before{animation:none!important} }