/* Phase 3C-1 visual refinement #5: density, empty-state polish, and depth. This layer intentionally preserves the established WTN palette and composer lock interaction. */ body.predictionLabPage .plPanel{ background: linear-gradient(180deg,rgba(12,31,47,.985),rgba(7,21,33,.985)); } /* Give the existing WTN gauges more instrument depth without changing hues. */ body.predictionLabPage .plGauge{ box-shadow: 0 0 0 1px rgba(80,129,158,.1), 0 7px 18px rgba(0,0,0,.2), inset 0 0 22px rgba(0,0,0,.28)!important; } body.predictionLabPage .plGauge:before{ background: radial-gradient(circle at 46% 35%,rgba(38,91,119,.28),transparent 31%), radial-gradient(circle at 50% 52%,#0c2232 0,#081624 68%,#07131f 100%)!important; box-shadow: inset 0 1px 1px rgba(255,255,255,.04), inset 0 -10px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(4,13,21,.55)!important; } body.predictionLabPage .plGauge--hero{ box-shadow: 0 0 0 1px rgba(78,133,164,.28), 0 9px 24px rgba(0,0,0,.24), 0 0 22px rgba(45,169,240,.08), inset 0 0 24px rgba(0,0,0,.3)!important; } /* Empty analytics should still read as a deliberate instrument panel. */ body.predictionLabPage .plChartPlaceholder{ position:relative; isolation:isolate; background: linear-gradient(180deg,rgba(14,40,58,.58),rgba(7,21,33,.34)), repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(78,114,140,.14) 24px), repeating-linear-gradient(90deg,transparent,transparent 44px,rgba(78,114,140,.12) 45px); } body.predictionLabPage .plChartPlaceholder:before{ content:""; position:absolute; inset:16px 18px 22px 26px; z-index:0; opacity:.5; border-left:1px solid rgba(115,156,182,.3); border-bottom:1px solid rgba(115,156,182,.3); } body.predictionLabPage .plChartPlaceholder>span, body.predictionLabPage .plEmptyChart{ position:relative; z-index:1; } /* Badges retain WTN colors but gain the dimensional, collectible treatment implied by the locked rendering. */ body.predictionLabPage .plAchievementGrid article>span{ position:relative; isolation:isolate; filter:drop-shadow(0 6px 8px rgba(0,0,0,.28)); background: radial-gradient(circle at 42% 32%,rgba(255,255,255,.16),transparent 26%), linear-gradient(145deg,#365574,#14283b); } body.predictionLabPage .plAchievementGrid article>span:before{ content:""; position:absolute; inset:4px; z-index:-1; clip-path:inherit; border:1px solid rgba(150,196,222,.34); background:linear-gradient(145deg,rgba(41,168,255,.12),rgba(61,214,208,.025)); } body.predictionLabPage .plAchievementGrid article.isUnlocked>span{ background: radial-gradient(circle at 42% 30%,rgba(255,255,255,.2),transparent 24%), linear-gradient(145deg,#745416,#d0942c); box-shadow:0 0 18px rgba(239,182,61,.14); } body.predictionLabPage .plAchievementGrid article.isUnlocked>span:before{ border-color:rgba(255,232,158,.46); background:linear-gradient(145deg,rgba(255,239,186,.13),rgba(240,128,69,.04)); } body.predictionLabPage .plAchievementGrid article:nth-child(1)>span{color:#b88cff} body.predictionLabPage .plAchievementGrid article:nth-child(2)>span{color:#efb63d} body.predictionLabPage .plAchievementGrid article:nth-child(3)>span{color:#54dda0} body.predictionLabPage .plAchievementGrid article:nth-child(4)>span{color:#efc85a} body.predictionLabPage .plAchievementGrid article:nth-child(5)>span{color:#f0b84d} body.predictionLabPage .plAchievementGrid article:nth-child(6)>span{color:#62cce8} body.predictionLabPage .plAchievementGrid article:nth-child(7)>span{color:#efb63d} @media (min-width:1281px){ /* Preserve the three-column command-center composition while reducing the two principal dashboard rows toward the locked rendering's density. */ body.predictionLabPage .predictionLab{padding-bottom:8px} body.predictionLabPage .plTopbar{ min-height:62px; margin-bottom:6px; padding-top:8px; padding-bottom:8px; } body.predictionLabPage .plDashboard{gap:7px} body.predictionLabPage .plPanel{padding:9px 10px} body.predictionLabPage .plSectionTitle{margin-bottom:6px} body.predictionLabPage .plSectionTitle>span{ width:24px; height:24px; flex-basis:24px; } /* Composer controls and locks are deliberately untouched. Only surrounding whitespace is tightened. */ body.predictionLabPage .plBuild{padding:8px 9px} body.predictionLabPage .plBuild .plDrawBar{margin-bottom:4px} body.predictionLabPage .plBuild .plTabs{margin-bottom:4px} body.predictionLabPage .plBuild .plComplete{margin:3px 0 1px} body.predictionLabPage .plBuild .plStrategyPrompt{margin:1px 0 2px} body.predictionLabPage .plBuild .plStrategies{gap:3px} body.predictionLabPage .plBuild .plStrategies button{ min-height:43px; padding-top:3px; padding-bottom:3px; } body.predictionLabPage .plBuild .plBuildFooter{margin-top:3px} body.predictionLabPage .plBuild .plSubmitRow{margin-top:3px} body.predictionLabPage .plFingerprint{ display:flex; flex-direction:column; } body.predictionLabPage .plFingerprint .plGaugeCluster{ padding-top:5px; padding-bottom:7px; } body.predictionLabPage .plFingerprint .plInsight{ margin-top:8px!important; } body.predictionLabPage .plDebrief .plDebriefTop{margin-bottom:5px} body.predictionLabPage .plDebrief .plRewardStrip{margin:5px 0} body.predictionLabPage .plDebrief .plRewardStrip article{padding:5px 6px} body.predictionLabPage .plDebrief .plDebriefBottom>div{padding:6px} body.predictionLabPage .plControl{ display:flex!important; flex-direction:column; } body.predictionLabPage .plControl .plExperimentSummary{margin:6px 0} body.predictionLabPage .plControl .plXpSources{margin-top:5px} body.predictionLabPage .plControl .plXpSources div{padding:5px 3px} body.predictionLabPage .plControl .plCenterNote{margin-top:auto!important} body.predictionLabPage .plBattles .plBattleChart{margin-top:6px} body.predictionLabPage .plBattles .plChartPlaceholder{min-height:132px} body.predictionLabPage .plBattles .plEmptyChart{min-height:106px} body.predictionLabPage .plAchievements{padding:8px 10px} body.predictionLabPage .plAchievements>.plSectionTitle{margin-bottom:1px} body.predictionLabPage .plAchievementGrid article>span{width:46px;height:46px} body.predictionLabPage .plAchievementBottom>div{padding-left:10px;padding-right:10px} body.predictionLabPage .plFooter{min-height:40px;margin-top:5px;padding-top:6px} } @media (max-width:1280px){ /* At tablet widths, do not force matched panel heights; empty states should occupy only the space their content needs. */ body.predictionLabPage .plDashboard{align-items:start} body.predictionLabPage .plPanel{height:auto} } @media (max-width:560px){ body.predictionLabPage .plChartPlaceholder:before{inset:18px 12px 28px 18px} body.predictionLabPage .plAchievementGrid article>span{width:46px;height:46px} }