/* RESEARCH DESSERT V1.2 — visual contract aligned to the user-approved reference.
   This stylesheet does not change data fetching, provider permissions or model logic. */
:root{
  --bg:#050a13;--navy:#071326;--panel:#08182b;--text:#f5f6ff;
  --indigo:#628bff;--lavender:#a183ff;--peach:#f8b196;
  --pearl:#fff8f2;--line:#2b4269;
}
body{
  background:#02050d;
  background-image:radial-gradient(ellipse at 53% -16%,#1a346a52,transparent 48%),
    linear-gradient(90deg,#050815d9,#060a14be),url('office-atmosphere.webp');
  background-size:auto,auto,cover;
  background-position:center,center,center 38%;
  background-attachment:fixed;
  font-family:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
  linear-gradient(0deg,#ffbc8430 0,transparent 10%),
  radial-gradient(ellipse at 68% 8%,#182d5b26,transparent 55%);}
/* Cinematic shell. A 3D-styled office is an atmosphere, not a fake information layer. */
.app-shell{position:relative;isolation:isolate;width:min(99.1vw,1680px);max-width:none;margin:5px auto 0;
  padding:10px 9px 15px;grid-template-columns:221px minmax(0,1fr);
  min-height:min(100vh,1032px);filter:drop-shadow(0 20px 35px #000b)}
.app-shell:before{content:'RESEARCH DESSERT';position:absolute;top:31px;left:60px;z-index:25;
  color:#f6f4fc;font-size:23px;font-weight:670;letter-spacing:.19em;white-space:nowrap;
  text-shadow:0 0 24px #acc8ff4a;pointer-events:none;}
.app-shell:after{content:'';position:absolute;top:49px;left:331px;width:39px;height:39px;
  border:1px solid #f8b198b3;border-radius:50%;box-shadow:0 0 12px #f1a88b73;
  transform:translateY(-50%);pointer-events:none;z-index:23;}
.sidebar{padding:119px 14px 24px;border-color:#344668;border-radius:17px 0 0 17px;
  background:linear-gradient(140deg,#081427f5,#071124fb 65%,#081121f9);
  box-shadow:inset 0 0 42px #0d2b4b37}
.sidebar-brand{font-size:12px;letter-spacing:.14em;line-height:1.3;margin:0 0 17px;padding:0 8px}
.sidebar-brand strong{font-size:14px;letter-spacing:.16em;color:#f1eaff}.sidebar-brand small{font-size:8px}
.sidebar-brand .halo-o{display:none}
.sidebar-separator{margin-bottom:15px}
.side-nav{gap:12px}.side-nav button{min-height:57px;border-radius:12px;padding:10px 14px;gap:13px}
.side-nav button.active,.side-nav button:hover{background:linear-gradient(100deg,#cc876b50,#162144 72%,#3f4fc458);
  box-shadow:inset 3px 0 0 #ffb38a,0 0 19px #ffac8b1e,0 0 17px #617aff2a;
  border-color:#a6818c90}
.side-nav button b{font-size:13px;font-weight:650}.side-nav button small{font-size:9px}
.side-nav button svg{width:21px;height:21px}
.side-globe .mini-orbit{background:
  radial-gradient(circle at 38% 29%,#fff8df,transparent 3%),
  radial-gradient(circle at 58% 64%,#ffad8c,transparent 5%),
  radial-gradient(circle at 44% 40%,#29477d,#091831 64%,transparent 75%);
  box-shadow:0 0 18px #486bb96b,inset 0 0 25px #486bb980}
.side-globe{padding-top:36px}
.shell-main{min-height:945px;border-radius:0 17px 17px 0;border-color:#314568;background:
  linear-gradient(165deg,#071324f3 2%,#061020f9 70%,#07101df2 100%);}
.topbar{height:88px;padding:0 24px 0 176px;background:linear-gradient(100deg,#071326fb,#051122f9);
  border-bottom-color:#30466e;z-index:8}
.top-nav{gap:13px}.top-nav button{font-size:12px;padding:13px 14px;border-radius:10px}
.top-nav button.active{color:#ffe2d3;border-color:#ce967f66;background:linear-gradient(110deg,#7d524b5e,#101a35);
  box-shadow:inset 0 -2px #ffb38c,0 7px 20px #e7a18b19}
.global-search{width:276px;max-width:276px;background:#07172d;border-color:#324467;border-radius:12px}
.global-search input{font-size:11px}.profile-orb{height:38px;width:38px;background:#14213de6;
  box-shadow:0 0 10px #a38bff46}.top-status{letter-spacing:.1em;font-size:9px}
.screen{padding:24px 18px 18px}
.screen[data-screen="home"].active{padding:22px 17px 0 20px;gap:0}
.home-main{position:relative;padding-right:0;min-width:0}
.home-topline{padding-left:8px;margin-bottom:13px;min-height:96px}
.home-topline .eyebrow{display:none}
.home-topline #greeting{margin-top:9px;font-size:16px;line-height:1.2;color:#d7dcef}
.home-topline h1{font-size:clamp(22px,2.1vw,31px);line-height:1.2;font-weight:700;letter-spacing:-.06em;margin-top:3px}
.home-topline .subtitle{font-size:12px;color:#b3bed9;margin-top:6px}
.date-block{padding-top:4px;padding-left:16px;margin-right:13px}
.date-block b{font-size:23px}.date-block span{font-size:9px}
.dashboard-grid{grid-template-columns:minmax(194px,1.03fr) minmax(280px,1.66fr) minmax(194px,1.03fr);
  grid-template-rows:minmax(339px,auto) 218px;gap:13px}
.panel-glass{background:linear-gradient(148deg,#0c1b32ec,#061329f5 83%);
  border:1px solid #304a70;border-radius:10px;
  box-shadow:inset 0 1px #a8bdff1c,0 9px 20px #02071378}
.panel-glass:before{background:linear-gradient(90deg,#95aeff40,#6689f644,transparent)}
.intel-panel{min-height:325px;padding:12px 12px 13px}
.panel-heading{font-size:12px;letter-spacing:.07em;padding-bottom:10px}
.insight-avatar{height:129px;margin:2px 0 12px;border:1px solid #203654;
 background:linear-gradient(120deg,#192e56,#111b34 52%,#091529)}
.insight-avatar:before{background:radial-gradient(ellipse at 24% 85%,#caa2ff5c,transparent 46%),
  repeating-linear-gradient(140deg,#ffffff08 0 1px,transparent 2px 27px)}
.insight-avatar:after{content:'';position:absolute;inset:8px;background-image:
  radial-gradient(circle at 46% 38%,#a5bee3 0 15%,transparent 16%),
  radial-gradient(ellipse at 47% 115%,#385789 0 47%,transparent 48%);
  opacity:.34;filter:drop-shadow(0 0 14px #acc1ff)}
.insight-avatar span{width:70px;height:70px;z-index:1;background:#07182a85;backdrop-filter:blur(4px)}
.nfl-avatar{background:linear-gradient(120deg,#342b45,#191b3a 52%,#07182b)}
.nfl-avatar:before{background:radial-gradient(ellipse at 27% 65%,#c780665b,transparent 48%),
  repeating-linear-gradient(140deg,#ffffff08 0 1px,transparent 2px 27px)}
.intel-panel h3{font-size:16px;line-height:1.3}.data-subtext{font-size:10px;line-height:1.5;margin-bottom:9px}
.stat-row{margin-top:auto;margin-bottom:9px}.stat-row strong{font-size:18px}.mini-chart{height:41px;
 background:repeating-linear-gradient(0deg,transparent 0 12px,#45639124 13px 14px)}
.panel-foot{margin-top:10px}
/* Orbital intelligence core - user-approved orb artwork is only a decorative backdrop.
   Interactive controls and all statistics remain HTML and live data. */
.main-orb{min-height:328px;height:338px;margin-top:-13px;isolation:isolate;overflow:visible}
.main-orb:before{content:'';position:absolute;z-index:0;width:min(100%,365px);aspect-ratio:334/327;
  background:url('orb-reference.png') center / contain no-repeat;
  filter:drop-shadow(0 0 18px #567fff80) saturate(1.12);mask-image:radial-gradient(ellipse at center,black 72%,transparent 98%);
  animation:orb-breathe 6s ease-in-out infinite;pointer-events:none}
@keyframes orb-breathe{50%{filter:drop-shadow(0 0 25px #879aff9e) saturate(1.2);transform:scale(1.025)}}
#researchOrb{opacity:.25;mix-blend-mode:screen}
.orb-content{opacity:0;pointer-events:none}
.orb-backgrid{background:radial-gradient(ellipse at center,#2e4b8e30,transparent 68%)}
.orb-side-label{font-size:9px;letter-spacing:.075em;line-height:3.5;color:#b8c5ed}
.orb-side-left{left:0}.orb-side-right{right:0}
.orb-bottom{letter-spacing:.18em;font-size:10px;color:#75b1ff;bottom:0}
.featured-matchup,.trends-panel{padding:14px 13px;min-height:210px}
.featured-inner{height:149px}.featured-match{gap:7px}
.match-team .team-initial{width:55px;height:55px;border:2px solid #ad8bd5;
 background:linear-gradient(140deg,#2f467b,#131f41);font-size:23px}
.match-team b{font-size:12px}.match-team small{font-size:12px}
.versus b{font-size:16px}.versus span{font-size:10px}
.chart-title{font-size:11px;margin-bottom:9px}
.trend-plot{height:149px;background:repeating-linear-gradient(0deg,transparent 0 28px,#354d833b 29px 30px)}
/* The assistant floats forward exactly as a pearl-screen phone, not a generic right rail. */
.home-concierge{width:309px;flex-shrink:0;margin-left:0;align-self:flex-start;position:relative;
  top:145px;z-index:7;transform:perspective(1120px) rotateY(-3deg) rotateZ(1deg);
  transform-origin:center bottom;padding:0 0 0 1px;filter:drop-shadow(-15px 22px 18px #000c)}
.concierge-frame{min-height:679px;background:linear-gradient(165deg,#fffdfa 0%,#fff7f1 52%,#fbe5dc 100%);
  border:7px solid #0a0c15;outline:1px solid #7c88a6;border-radius:48px;
  padding:34px 13px 13px;gap:10px;box-shadow:inset 0 0 0 1px #bab6b1,0 16px 44px #0009}
.concierge-frame:before{top:4px;width:125px;left:calc(50% - 62.5px);height:20px;border-radius:0 0 16px 16px}
.concierge-logo{letter-spacing:.15em;font-size:13px;color:#202032}
.concierge-kicker{font-size:8px;margin-top:7px;color:#826f76}
.concierge-message{margin-top:14px;border-color:#eecfc3;border-radius:20px;padding:17px 13px;
  background:linear-gradient(130deg,#fff,#fffaf8);box-shadow:0 8px 20px #cf8b7420}
.concierge-message h2{font-size:20px;margin-bottom:5px}
.concierge-message strong{font-size:12px}.concierge-message p{font-size:11px;line-height:1.65}
.pearl-scene{height:177px;overflow:visible}.pearl-sphere{width:133px;height:133px;
 background:radial-gradient(circle at 29% 23%,#fff 0,#ffe5d5 14%,#f7b8a78c 29%,#aab7dbaa 53%,#e7aacba6 72%,#ffdcb9 86%);
 box-shadow:inset -12px -13px 21px #9969a276,inset 12px 8px 22px #fff,0 0 36px #ffc39ba8,0 0 54px #a7a9ff76}
.pearl-ring{width:213px;height:55px;border-color:#e8b8afda;box-shadow:0 0 19px #ffc8ab}
.concierge-quick{gap:5px}.concierge-quick button{min-height:75px;border-radius:11px;font-size:9px;background:#fff8f3}
.concierge-suggestions button{min-height:35px;border-radius:15px;background:#fffdfa;font-size:10px}
.concierge-input{border-radius:32px;min-height:49px}
.concierge-input button{height:38px;width:38px}
/* Scoreboard is a full-width ESPN-style instrument strip attached to the bottom of the monitor. */
.score-dock{margin:10px 13px 12px;min-height:150px;padding:14px 17px 10px;
  background:linear-gradient(100deg,#071426f9,#071226f7);
  border:1px solid #516591;border-radius:13px;box-shadow:0 0 23px #f1b5a336,inset 0 1px 0 #adbcff3c}
.ticker-head{gap:21px}.ticker-head b{font-size:12px;letter-spacing:.13em}
.live-red-dot{width:10px;height:10px;background:#ff4045;box-shadow:0 0 13px #ff5555}
.score-tabs button{font-size:10px;padding:5px 13px;min-width:48px}
.scores-scroller{gap:12px;min-height:78px}
.score-item{min-width:213px;max-width:260px;min-height:75px;border-radius:9px;
  border-color:#2f456d;background:linear-gradient(125deg,#0b1b32,#061326)}
.score-team{font-size:12px;align-items:center}.score-team strong{font-size:17px}
.score-top{font-size:9px}.score-item small{font-size:10px;color:#93a4c5}
/* Extra two score navigation arrows on desktop, wired to the actual horizontal ticker */
.score-dock{position:relative}.score-arrows{display:flex;align-items:center;gap:7px;margin-left:8px}
.score-arrows button{height:26px;width:27px;border:1px solid #334c72;border-radius:7px;background:#0e1e38;
  color:#c1d5fa;font-size:17px;cursor:pointer}
/* Secondary screens share the reference's database precision */
.section-title{padding:27px 4px}.section-title h1{letter-spacing:-.045em}
.roster-entry,.candidate-row,.draft-row,.vault-entry{border-radius:11px;background:linear-gradient(120deg,#10213a,#0a1629)}
.ai-page{background:linear-gradient(140deg,#fffaf7,#fff6f0 52%,#fbe2d6)}
.ai-page .ai-conversation{box-shadow:0 12px 33px #a86b5d18}
/* Progressive responsive adaptation: target screenshot fidelity on desktop,
   retain legible thumb navigation and Pearl AI on iPhone. */
@media(min-width:1560px){
 .app-shell{grid-template-columns:235px minmax(0,1fr)}
 .home-concierge{width:330px;top:156px}
 .dashboard-grid{grid-template-rows:minmax(360px,auto) 225px}
 .main-orb{min-height:355px;height:355px}
 .main-orb:before{width:380px}
}
@media(min-width:1201px) and (max-width:1520px){
 .app-shell{grid-template-columns:204px minmax(0,1fr)}
 .app-shell:before{font-size:19px;left:38px;top:36px}
 .app-shell:after{left:292px;top:45px}
 .topbar{padding-left:124px}
 .home-concierge{width:274px;top:129px}
 .dashboard-grid{grid-template-columns:minmax(160px,1fr) minmax(270px,1.65fr) minmax(160px,1fr);gap:9px}
 .intel-panel{padding:10px;min-height:309px}
 .main-orb:before{width:320px}
 .main-orb{height:316px;min-height:316px}
 .orb-side-label{display:none}
 .concierge-frame{padding:34px 11px 12px;min-height:662px}
 .global-search{width:220px;max-width:220px}
 .top-nav{gap:5px}
}
@media(min-width:1061px) and (max-width:1200px){
 .app-shell{grid-template-columns:172px minmax(0,1fr)}
 .app-shell:before{font-size:17px;left:26px}
 .app-shell:after{display:none}
 .topbar{padding-left:72px}
 .home-concierge{width:225px;top:123px;transform:none}
 .dashboard-grid{grid-template-columns:minmax(135px,1fr) minmax(215px,1.5fr) minmax(135px,1fr)}
 .intel-panel{min-height:280px}.insight-avatar{height:90px}
 .main-orb{height:270px;min-height:270px}.main-orb:before{width:290px}
 .orb-side-label{display:none}
 .concierge-frame{min-height:625px;padding:30px 9px 10px}.concierge-suggestions button{font-size:9px}
 .global-search{max-width:150px;width:150px}
}
@media(max-width:1060px) and (min-width:791px){
 .app-shell:before{font-size:17px;left:29px;top:31px}.app-shell:after{display:none}
 .topbar{padding-left:20px}.sidebar{padding-top:102px}
 .home-concierge{display:none}
 .main-orb:before{width:355px}
}
@media(max-width:790px){
 body{background-image:linear-gradient(155deg,#050b19,#091326)}
 .app-shell{width:100%;padding:0;display:block;filter:none;margin:0;min-height:100dvh}
 .app-shell:before,.app-shell:after{display:none}
 .sidebar{display:none}
 .shell-main{min-height:100dvh;border:0;border-radius:0;background:linear-gradient(152deg,#061123,#0b1830 68%,#070e1e)}
 .topbar{height:66px;padding:0 16px;background:#071226f5}
 .brand-mobile{font-size:12px;letter-spacing:.06em}.brand-mobile strong{color:#ffbea3}
 .profile-orb{height:35px;width:35px}
 .screen[data-screen="home"].active{padding:17px 14px 25px;display:block}
 .home-topline{padding:0 5px;margin-bottom:5px;min-height:0}
 .home-topline #greeting{font-size:14px}.home-topline h1{font-size:23px}
 .home-topline .subtitle{font-size:11px}
 .dashboard-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;grid-template-rows:auto}
 .main-orb{grid-column:1/-1;grid-row:1;height:320px;min-height:320px;margin:-7px -2px -7px}
 .main-orb:before{width:min(83%,345px)}
 .orb-content{opacity:0}.orb-side-label{font-size:7px;display:block;line-height:3}
 .orb-side-left{left:0}.orb-side-right{right:0}
 .orb-bottom{font-size:8px;letter-spacing:.09em}
 .left-insight{grid-column:1;grid-row:2}.right-insight{grid-column:2;grid-row:2}
 .intel-panel{min-height:244px;padding:10px}.panel-heading{font-size:10px}
 .insight-avatar{height:74px;margin-bottom:9px}.insight-avatar span{height:45px;width:45px;font-size:11px}
 .insight-avatar:after{opacity:.20}
 .intel-panel h3{font-size:12px;min-height:30px}.data-subtext{font-size:9px}
 .stat-row strong{font-size:13px}.stat-row span{font-size:7px}
 .mini-chart{height:26px}.panel-foot{font-size:8px}
 .featured-matchup{grid-column:1/-1;grid-row:3;min-height:176px}
 .trends-panel{grid-column:1/-1;grid-row:4;min-height:176px}
 .featured-inner{height:115px}.trend-plot{height:111px}
 .home-concierge{display:none}
 .score-dock{position:fixed;bottom:71px;left:0;right:0;margin:0;border:0;border-top:1px solid #5c6489;
  border-radius:11px 11px 0 0;padding:8px 10px 5px;min-height:86px;
  background:#061426ed;backdrop-filter:blur(14px);z-index:27}
 .ticker-head{gap:8px}.score-tabs button{padding:5px 8px;font-size:9px}.scores-scroller{min-height:44px}
 .score-item{min-height:45px;min-width:182px;padding:5px 9px;gap:4px}
 .score-item small{font-size:8px}.score-team{font-size:10px}.score-team strong{font-size:12px}
 .score-arrows{display:none}.ticker-foot{display:none}
 .mobile-nav{display:flex;background:#061123fa;border-top-color:#3b4e71}
 .screen[data-screen="ai"].active{padding:0}
 .screen[data-screen="ai"] .ai-page{min-height:calc(100dvh - 130px);border-radius:0}
 .screen[data-screen="ai"] .ai-pearl-rail{order:-1}
 #toast{bottom:182px}
}
@media(max-width:390px){.main-orb{height:287px;min-height:287px}.main-orb:before{width:290px}.orb-side-label{display:none}}
@media(prefers-reduced-motion:reduce){.main-orb:before,.pearl-sphere,.pearl-ring,.pearl-particle{animation:none!important}}
/* Reference-aligned twelve-column editorial grid: upper intelligence + lower wide matchup and chart. */
@media(min-width:1061px){
  .dashboard-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:305px 200px;column-gap:10px;row-gap:12px}
  .left-insight{grid-column:1/4;grid-row:1}
  .main-orb{grid-column:4/10;grid-row:1;height:325px;min-height:325px;margin-top:-45px}
  .right-insight{grid-column:10/13;grid-row:1}
  .featured-matchup{grid-column:1/8;grid-row:2;min-height:200px}
  .trends-panel{grid-column:8/13;grid-row:2;min-height:200px}
  .intel-panel{min-height:303px}
  .insight-avatar{height:98px}
  .home-concierge{z-index:35}
  #mainScreens{position:relative;z-index:3;overflow:visible}
  .score-dock{z-index:2}
}
@media(min-width:1061px) and (max-width:1520px){
  .main-orb{margin-top:-40px;min-height:325px;height:325px}
  .intel-panel{min-height:303px}
}
/* Final visual-alignment details checked against the approved 1536×1024 design. */
@media(min-width:1300px){
 .home-topline h1{font-size:27px;letter-spacing:-.045em;max-width:485px}
 .shell-main:has(.screen[data-screen="home"].active){height:1010px;min-height:1010px}
 .shell-main:has(.screen[data-screen="home"].active) .score-dock{position:absolute;left:13px;right:13px;bottom:81px;margin:0;min-height:150px;z-index:2}
 .main-orb:before{margin-left:28px;margin-top:12px}
}
/* Desk-sized fidelity: the pearl device visually floats *over* the lower score strip.
   Removing it from normal document flow allows the ESPN-style ticker to sit immediately
   below the charts, as in the approved reference. */
@media(min-width:1201px){
 .app-shell{min-height:0}
 .shell-main{min-height:0;overflow:visible}
 .screen[data-screen="home"].active{position:relative;display:block;z-index:5;overflow:visible}
 .screen[data-screen="home"] .home-main{width:100%;padding-right:calc(309px + 15px);box-sizing:border-box}
 .screen[data-screen="home"] .home-concierge{position:absolute;right:15px;top:159px;
   margin:0;z-index:15;width:309px;transform:perspective(1100px) rotateY(-3deg) rotateZ(1deg)}
 .main-orb{transform:translateX(43px)}
 .score-dock{position:relative;z-index:2;margin-top:19px}
 .score-dock .scores-scroller{scrollbar-width:none}
}
@media(min-width:1560px){
 .screen[data-screen="home"] .home-main{padding-right:354px}
 .screen[data-screen="home"] .home-concierge{width:330px;top:159px;right:14px}
 .main-orb{transform:translateX(45px)}
}
@media(min-width:1201px) and (max-width:1520px){
 .screen[data-screen="home"] .home-main{padding-right:calc(274px + 11px)}
 .screen[data-screen="home"] .home-concierge{width:274px;top:147px;right:10px}
 .main-orb{transform:translateX(28px)}
}