/* 7.22: High-impact refinement on existing JLJAM, no new framework or auth changes. */
:root{--j22-iris:#bc9cff;--j22-edge:rgba(230,205,255,.30);--j22-shadow:0 26px 70px rgba(9,4,35,.4)}
/* Brand-level depth, designed to complement existing large artist photography. */
#app .ej-portrait-showcase{background:linear-gradient(125deg,rgba(112,78,176,.23),rgba(15,14,44,.46))!important;border:1px solid rgba(210,180,255,.35)!important;box-shadow:0 24px 65px rgba(17,8,50,.32),inset 0 1px rgba(255,255,255,.21)!important}
#app .ej-portrait-showcase .ej-person{overflow:hidden;box-shadow:0 20px 42px rgba(8,3,33,.43),inset 0 1px rgba(255,255,255,.2)!important}
#app .ej-portrait-showcase .ej-person img{object-fit:cover!important;transition:transform .55s cubic-bezier(.2,.7,.1,1),filter .35s ease!important}
@media(hover:hover) and (pointer:fine){#app .ej-portrait-showcase .ej-person:hover img{transform:scale(1.045);filter:contrast(1.055) saturate(1.12)}}
#app .ej-portrait-showcase .ej-person:focus-visible{outline:3px solid #f7ceff;outline-offset:4px}
/* Give the built-in app real hierarchy rather than same-size panels everywhere. */
#app .artist-roster-card{position:relative;overflow:hidden;border:1px solid var(--j22-edge)!important;background:linear-gradient(139deg,rgba(108,75,170,.32),rgba(34,27,72,.75) 58%,rgba(13,13,39,.95))!important;box-shadow:var(--j22-shadow)!important}
#app .artist-roster-card:before{content:'';position:absolute;top:-85px;right:-70px;width:220px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(168,121,255,.24),transparent 65%);pointer-events:none}
#app .artist-roster-card .artist-avatar{width:clamp(72px,7vw,104px)!important;height:clamp(72px,7vw,104px)!important;flex-shrink:0;border-radius:22px!important}
#app .artist-roster-card h3{letter-spacing:-.025em;font-weight:850}
#app .artist-roster-card:focus-visible{outline:3px solid #f0cbff;outline-offset:3px}
/* Stronger, less dense opportunity cards; actual data and existing click/swipe preserved. */
#app #workspaceBody .gdeal-front{border:1px solid rgba(207,167,255,.34)!important;background:linear-gradient(145deg,rgba(87,61,149,.29),rgba(24,23,55,.84))!important;box-shadow:0 15px 38px rgba(7,4,32,.26),inset 0 1px rgba(255,255,255,.13)!important;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
#app #workspaceBody .gdeal-front .gdeal-title{font-weight:850!important;letter-spacing:-.018em}
@media(hover:hover) and (pointer:fine){#app #workspaceBody .gdeal-front:hover{border-color:rgba(225,195,255,.72)!important;box-shadow:0 25px 55px rgba(14,6,48,.44),inset 0 1px rgba(255,255,255,.18)!important}}
#app #workspaceBody .ng20-toolbar{gap:8px!important;flex-wrap:wrap!important}
#app #workspaceBody .ng20-toolbar button{min-height:44px;touch-action:manipulation}
/* Focused view uses CSS grid without truncating functional buttons and critical details. */
html[data-j22-view="spotlight"] #app #workspaceBody .ng20-card-grid{grid-template-columns:minmax(0,1fr)!important;max-width:900px;margin-inline:auto}
html[data-j22-view="spotlight"] #app #workspaceBody .ng20-card-grid .gdeal-front{padding:clamp(16px,2.2vw,25px)!important}
html[data-j22-view="spotlight"] #app #workspaceBody .ng20-card-grid .gdeal-title{font-size:clamp(20px,2.5vw,27px)!important}
#app .j22-view-btn{display:inline-flex;align-items:center;gap:7px;border-radius:13px;border:1px solid rgba(218,182,255,.4)!important;background:linear-gradient(145deg,rgba(121,82,189,.33),rgba(47,39,100,.55));font:750 13px/1.2 system-ui;color:#fff;min-height:44px;padding:10px 15px;white-space:nowrap;cursor:pointer}
#app .j22-view-btn[aria-pressed="true"]{background:linear-gradient(135deg,rgba(147,98,243,.65),rgba(85,55,156,.66));box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 24px rgba(74,37,143,.24)}
#app .j22-view-btn:focus-visible{outline:3px solid #f0ceff;outline-offset:3px}
/* Smooth element reveal only once, for non-essential decoration. */
@media(prefers-reduced-motion:no-preference){#app .j22-enter{animation:j22-rise .42s both cubic-bezier(.2,.75,.22,1)}@keyframes j22-rise{from{opacity:.66;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}}
/* Mobile-first controls; no hover needed; retain two-across portraits as existing design demands. */
@media(max-width:680px){#app #workspaceBody .ng20-toolbar{display:flex;align-items:center;gap:8px!important}#app #workspaceBody .j22-view-btn{font-size:12px;padding:8px 11px;min-height:46px}#app .artist-roster-card .artist-avatar{width:70px!important;height:70px!important}#app .ej-portrait-showcase .ej-person{transform:none!important}html[data-j22-view="spotlight"] #app #workspaceBody .ng20-card-grid{width:100%}}
@media(prefers-reduced-motion:reduce){#app .j22-enter{animation:none!important}#app .ej-portrait-showcase .ej-person img,#app #workspaceBody .gdeal-front{transition:none!important}}