:root{font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif;color:#f4f6ff;background:#08051e;--cyan:#42e7f4;--purple:#b14cff;--pink:#f472f2;--line:rgba(149,124,255,.34);--glass:rgba(8,16,49,.83)}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.cosmos{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% 13%,#4f1689 0%,transparent 35%),radial-gradient(ellipse at 20% 75%,#143c9d 0%,transparent 55%),linear-gradient(130deg,#08051a,#100938 48%,#070824);overflow:hidden}.cosmos:before{content:'';position:absolute;inset:0;background:url('./assets/reference-atmosphere.webp') center/cover no-repeat;opacity:.53}.aurora{position:absolute;left:-23%;top:-24%;width:152%;height:85%;border-radius:46%;transform:rotate(-16deg);filter:blur(24px);opacity:.72;background:conic-gradient(from 160deg at 49% 45%,transparent 3%,#6b20ff 12%,#c74afa 20%,#348de7 26%,#40e9ff 29%,transparent 37%,transparent 75%,#6e28de 83%,transparent 90%);mask-image:radial-gradient(ellipse,transparent 37%,#000 49%,#000 59%,transparent 71%);animation:drift 32s ease-in-out infinite alternate}.aurora.b{transform:rotate(29deg);top:28%;left:6%;opacity:.34;animation-duration:39s;animation-direction:alternate-reverse}.stars{position:absolute;inset:0;background-image:radial-gradient(#d7d9ff .7px,transparent 1px),radial-gradient(#9df9ff .6px,transparent 1px);background-size:61px 77px,109px 121px;opacity:.3}@keyframes drift{to{transform:translate3d(3%,-3%,0) rotate(-9deg) scale(1.05)}}.sidebar{position:fixed;inset:0 auto 0 0;width:234px;z-index:10;background:linear-gradient(180deg,rgba(7,7,30,.95),rgba(12,8,51,.89));border-right:1px solid var(--line);padding:28px 16px;display:flex;flex-direction:column;gap:33px}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.17em}.brand b{font-size:20px}.brand small{display:block;font-size:9px;letter-spacing:.14em;color:#bdb5e7;margin-top:5px}.brandmark{font-size:35px;color:var(--cyan);filter:drop-shadow(0 0 12px var(--purple))}.side-links{display:grid;gap:10px}.nav-btn{border:1px solid transparent;border-radius:15px;background:transparent;color:#c4cbef;padding:14px 15px;text-align:left;font-weight:600;display:flex;align-items:center;gap:12px}.nav-btn.active{border-color:var(--cyan);background:linear-gradient(105deg,rgba(36,153,233,.25),rgba(168,54,250,.18));box-shadow:0 0 20px #7731ff44;color:white}.nav-btn .navicon{font-size:19px;color:var(--cyan)}.side-bottom{margin-top:auto;padding:12px;font-size:12px;color:#b9c2e8}.side-bottom small{color:#8192bc}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3cebd4;box-shadow:0 0 10px #3cebd4}.app{margin-left:234px;min-height:100vh}.topbar{height:78px;display:flex;align-items:center;justify-content:flex-end;padding:14px 38px;gap:16px}.right-actions{display:flex;align-items:center;gap:10px}.icon-btn,.profile{height:43px;min-width:43px;border:1px solid var(--line);background:rgba(11,17,54,.72);border-radius:15px;color:#e6e8ff;font-size:21px}.profile{border-radius:50%;background:linear-gradient(145deg,#6620c4,#1572ce);font-weight:800}.staging-pill{margin-right:auto;letter-spacing:.14em;font-size:10px;border:1px solid #a67eff80;padding:7px 12px;border-radius:30px;background:#35116b8a;color:#dcc5ff}.mobile-brand{display:none}#screen{padding:18px 40px 100px;max-width:1660px;margin:auto}.hero{padding:22px 0 32px;position:relative}.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#6deefe}.hero h1{margin:11px 0 8px;font-size:clamp(37px,5vw,76px);letter-spacing:-.055em;line-height:1.04}.gradient-text{background:linear-gradient(90deg,#54eeff,#aa69ff 55%,#f671db);background-clip:text;color:transparent}.lead{color:#d0cdf0;max-width:700px;line-height:1.65}.command{margin:16px 0;display:flex;align-items:center;gap:12px;background:linear-gradient(105deg,rgba(4,29,78,.88),rgba(57,10,93,.76));border:1px solid #49d8f6aa;border-radius:23px;padding:12px;box-shadow:0 0 26px #6333ff55}.command input{flex:1;min-width:0;background:none;border:0;outline:0;color:white;padding:12px}.command button,.primary{background:linear-gradient(105deg,#ba49f8,#5037e8 65%,#16bdea);color:white;border:1px solid #d090ff;border-radius:12px;padding:13px 19px;font-weight:750;box-shadow:0 5px 21px #8035df55}.chips,.tabs,.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.chip,.tab,.secondary{border:1px solid #6583d477;color:#e1dffc;background:#0c2151aa;padding:10px 14px;border-radius:11px}.tab.active,.chip.active{background:linear-gradient(120deg,#8639e6,#2572d6);border-color:#70e7ff}.layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.glass{background:linear-gradient(132deg,rgba(13,24,67,.88),rgba(18,10,55,.88));border:1px solid var(--line);border-radius:22px;box-shadow:0 15px 36px #03052250,inset 0 1px #ffffff0d;padding:22px;min-width:0}.glass h3{margin:0 0 16px;font-size:16px;letter-spacing:-.025em}.glass h2{margin:0 0 18px}.span12{grid-column:span 12}.span8{grid-column:span 8}.span7{grid-column:span 7}.span6{grid-column:span 6}.span5{grid-column:span 5}.span4{grid-column:span 4}.span3{grid-column:span 3}.focus-art{background:linear-gradient(90deg,#11134b88,#220e6344),url('./assets/focus-reference.webp') center/cover;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end}.focus-art h2{max-width:310px;font-size:32px}.planet-art{background:url('./assets/planet-reference.webp') center/cover;min-height:185px;border-radius:17px}.stat{font-size:31px;font-weight:800;letter-spacing:-.06em;margin:8px 0}.muted{color:#aebde6;font-size:13px;line-height:1.6}.kicker{font-size:11px;color:#61e9f2;text-transform:uppercase;letter-spacing:.13em;font-weight:800}.data-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #7181cc39;padding:12px 0}.data-row b{font-size:14px}.data-row small{display:block;color:#9eacdb;margin-top:6px;font-size:12px}.pill{border:1px solid #5adbf873;background:#15a4ff22;color:#8feffb;padding:6px 9px;border-radius:100px;font-size:11px}.empty{padding:23px;border:1px dashed #866bd67a;border-radius:15px;color:#b6bee7;text-align:center}.space-between{display:flex;justify-content:space-between;gap:12px;align-items:center}.metric-orbit{--ratio:0deg;width:128px;height:128px;border-radius:50%;background:conic-gradient(#40e4f2 var(--ratio),#252852 var(--ratio));display:grid;place-items:center;margin:12px auto}.metric-orbit div{width:102px;height:102px;background:#0b1232;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;color:#c8d5ff}.field input,.field select,.field textarea{color:#f8faff;background:#080f32;border:1px solid #6671b975;border-radius:12px;padding:12px;width:100%;min-height:45px;outline-offset:1px}.field option{background:#0d1643}.field textarea{min-height:94px}.page-title{font-size:clamp(30px,4vw,48px);letter-spacing:-.055em;margin:12px 0}.soft{background:linear-gradient(120deg,#19285b88,#7427ba44)}.tiny{font-size:11px}.delete{color:#ffaaca;border:1px solid #e97ba266;background:none;border-radius:8px;padding:7px 10px}.notice{background:#253d8766;border:1px solid #619aff55;border-radius:12px;padding:12px 14px;color:#d0dcff;font-size:12px;line-height:1.5}.bar{height:10px;border-radius:15px;background:#28365e;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#24dce9,#b849ef);border-radius:15px}.donut{width:145px;height:145px;margin:auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#38e4eb var(--donut),#7838b8 0 75%,#273366 75%)}.donut span{width:110px;height:110px;display:grid;place-items:center;background:#0a133a;border-radius:50%;font-weight:800}.chart{height:170px;width:100%}.chart text{fill:#b0c5eb;font-size:11px}.bottom-nav{display:none}.overlay{position:fixed;inset:0;background:#020313b8;z-index:100;display:grid;place-items:center;padding:16px;backdrop-filter:blur(8px)}.overlay.hidden,.toast.hidden{display:none}.dialog{background:linear-gradient(145deg,#111b50,#170d3e);border:1px solid #a967ff;width:min(590px,100%);max-height:90vh;overflow:auto;border-radius:24px;padding:22px;box-shadow:0 20px 90px #000a}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{margin:0}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:200;background:#241456;color:#fff;border:1px solid #66e8ff;border-radius:13px;padding:14px 22px;box-shadow:0 0 35px #863cff60;max-width:90vw}.linkcard{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:1px solid #6453c277;padding:15px;border-radius:15px;background:#16215d99;color:white;margin:9px 0;text-decoration:none}.linkcard .glyph{font-size:25px}.warning{color:#ffcf88}.mobile-only{display:none}
@media(max-width:1080px){.sidebar{width:185px}.app{margin-left:185px}#screen{padding:15px 22px 100px}.span3{grid-column:span 6}}@media(max-width:760px){.sidebar{display:none}.app{margin:0}.mobile-brand{display:flex}.mobile-brand .brandmark{font-size:28px}.mobile-brand b{font-size:16px}.staging-pill{font-size:9px;margin-left:auto;margin-right:0}.topbar{height:68px;padding:10px 16px;justify-content:space-between}.right-actions{gap:5px}.right-actions .icon-btn,.profile{height:38px;min-width:38px;font-size:18px}#screen{padding:10px 14px 110px}.hero{padding-top:16px}.hero h1{font-size:40px}.lead{font-size:13px}.layout{gap:12px}.glass{padding:17px;border-radius:20px}.span3,.span4,.span5,.span6,.span7,.span8{grid-column:span 12}.focus-art{min-height:205px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;z-index:20;background:rgba(6,10,39,.94);border-top:1px solid #9963f999;padding:7px 2px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(22px)}.bottom-nav .nav-btn{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;padding:7px 1px;border:0;border-radius:10px;font-size:10px;min-height:52px}.bottom-nav .nav-btn .navicon{font-size:20px}.bottom-nav .nav-btn.active{background:linear-gradient(170deg,#802aff66,#0989e833)}.form-grid{grid-template-columns:1fr 1fr}.mobile-only{display:block}.chart{height:150px}.command{padding:7px}.command button{padding:12px}.glass h3{font-size:15px}}@media(max-width:370px){.staging-pill{display:none}.hero h1{font-size:35px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:span 1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.lite .aurora{animation:none;filter:blur(45px);opacity:.3}body.lite .aurora.b{display:none}


/* JESSIE 0.5.1 — TWO DEVICE EXPERIENCES
   One application, one authenticated Supabase workspace; CSS isolates paint budgets.
   Cinematic desktop: richer hover/glow, 2 drifting light layers.
   Mobile Eco: 1 subtle transform-only aurora layer, no expensive filters or backdrop blur.
*/
html{color-scheme:dark}
:root{--motion-speed:1;--surface-blur:14px}
.cosmos{contain:paint;pointer-events:none;isolation:isolate;z-index:-1}
.cosmos:before{background-image:linear-gradient(145deg,rgba(11,4,41,.25),rgba(65,14,137,.13)),url('./assets/reference-atmosphere.webp')}
body:not(.lite):not(.experience-mobile) .aurora{will-change:transform;filter:blur(16px)}
body:not(.lite):not(.experience-mobile) .aurora.a{animation:drift 35s ease-in-out infinite alternate}
body:not(.lite):not(.experience-mobile) .aurora.b{animation:driftB 46s ease-in-out infinite alternate}
@keyframes driftB{to{transform:translate3d(-2%,2%,0) rotate(24deg) scale(1.055)}}
@keyframes appear-soft{from{opacity:.5;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@media(min-width:761px){
  body.experience-desktop:not(.lite) #screen>.hero,
  body.experience-desktop:not(.lite) #screen>.layout{animation:appear-soft .5s ease-out both}
  body.experience-desktop .glass{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;background-image:linear-gradient(135deg,rgba(27,20,83,.91),rgba(13,23,68,.89))}
  body.experience-desktop .glass:hover{transform:translate3d(0,-3px,0);border-color:rgba(193,118,255,.65);box-shadow:0 18px 46px rgba(33,8,98,.5),0 0 26px rgba(130,50,255,.12)}
  body.experience-desktop .glass:focus-within{border-color:#91beff}
  body.experience-desktop .hero{isolation:isolate}
  body.experience-desktop .hero:before{content:'';position:absolute;top:-28px;right:6%;width:min(27vw,350px);height:160px;background:radial-gradient(ellipse,rgba(157,62,255,.18),transparent 75%);pointer-events:none;z-index:-1}
  body.experience-desktop .primary:hover,body.experience-desktop .chip:hover{filter:brightness(1.13)}
}
/* Keep content visible even if the GPU stops rendering animated ribbons. */
body.experience-mobile .cosmos{background:linear-gradient(150deg,#09051f 0%,#211052 46%,#071833 100%)}
body.experience-mobile .cosmos:before{opacity:.57;background-size:cover;background-position:center top}
body.experience-mobile .aurora.a{
  display:block;position:absolute;top:-4%;left:-15%;width:120%;height:70%;
  border-radius:0;background-image:linear-gradient(150deg,rgba(90,13,170,.26),rgba(70,39,228,.14) 35%,rgba(36,191,230,.12) 70%,transparent),url('./assets/aurora-currents.webp');
  background-position:center;background-size:cover;filter:none!important;mask-image:none!important;
  opacity:.19;transform:translate3d(0,0,0) scale(1.04);animation:eco-float 42s ease-in-out infinite alternate!important;
  will-change:transform;
}
@keyframes eco-float{to{transform:translate3d(-2%,1%,0) scale(1.065)}}
body.experience-mobile .aurora.b{display:none!important}
body.experience-mobile .stars{opacity:.15;background-size:127px 143px,181px 197px}
body.experience-mobile .glass,body.experience-mobile .sidebar{box-shadow:0 8px 20px rgba(3,2,23,.22);backdrop-filter:none!important}
body.experience-mobile .bottom-nav{backdrop-filter:none!important;background:#080d2ff5}
body.experience-mobile .overlay{backdrop-filter:none!important;background:rgba(2,2,16,.89)}
body.experience-mobile .command{box-shadow:0 0 14px rgba(106,47,224,.22)}
body.experience-mobile .glass:hover{transform:none!important}
/* Ultra-light mode: still cosmic, but zero continuous movement. */
body.lite .aurora,body.lite .aurora.a,body.lite .aurora.b{animation:none!important;filter:none!important;will-change:auto!important}
body.lite .aurora.b{display:none!important}
body.lite .aurora.a{opacity:.13;mask-image:none!important;background:linear-gradient(160deg,transparent 8%,rgba(127,64,238,.35),rgba(23,156,227,.17),transparent 80%);border-radius:30%}
body.lite .glass,body.lite .bottom-nav{backdrop-filter:none!important;transition:none!important}
body.lite .glass:hover{transform:none!important}
.device-status{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(160,109,255,.4);background:rgba(39,18,92,.55);border-radius:999px;padding:7px 12px;font-size:11px;color:#ddd0ff;white-space:nowrap}
.device-status:before{content:'';width:6px;height:6px;background:#5be8f4;border-radius:50%;box-shadow:0 0 8px #5be8f488}
.appearance-preset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.preset-box{padding:14px;border-radius:16px;background:linear-gradient(145deg,rgba(112,28,189,.24),rgba(9,33,82,.48));border:1px solid rgba(165,124,245,.35);min-width:0}
.preset-box b{display:block;font-size:14px;color:#f5eaff;margin-bottom:7px}
.preset-box small{display:block;font-size:12px;color:#b8badc;line-height:1.55}
.appearance-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.appearance-line select{min-height:42px;border-radius:10px;border:1px solid #7b6cca;color:#f6efff;background:#10133c;padding:8px}
.device-hero-tag{display:inline-block;margin:6px 0 2px;color:#e1c7ff;font-size:11px;letter-spacing:.07em}
@media(max-width:760px){
  .device-status{font-size:10px;padding:5px 9px}
  .topbar{gap:5px}
  .topbar .staging-pill{display:none}
  .topbar .right-actions{margin-left:auto}
  .glass{background:linear-gradient(140deg,rgba(13,19,59,.96),rgba(30,13,69,.95));border-color:rgba(161,104,250,.38)}
  .hero{padding-bottom:14px}
  .hero h1{font-size:clamp(34px,10vw,42px)}
  .focus-art{background-position:center}
  .command{border-color:rgba(134,89,242,.7)}
  .bottom-nav{border-top:1px solid rgba(131,81,231,.55)}
  .appearance-preset{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .aurora,.aurora.a,.aurora.b{animation:none!important;filter:none!important;will-change:auto!important}
  .glass, .chip, .primary, #screen{animation:none!important;transition:none!important}
}

/* Preserve the flagship landscape card after mobile/desktop glass paint overrides. */
body.experience-desktop .glass.focus-art,
body.experience-mobile .glass.focus-art,
body.lite .glass.focus-art{
  background-image:linear-gradient(90deg,rgba(15,8,56,.85) 0%,rgba(20,9,69,.35) 67%,rgba(11,8,48,.1)),url('./assets/focus-reference.webp');
  background-position:center;
  background-size:cover;
  border-color:rgba(171,119,255,.5);
}
body.experience-desktop .glass.focus-art h2,
body.experience-mobile .glass.focus-art h2{color:#fff;text-shadow:0 2px 16px rgba(6,3,30,.5)}
@media(max-width:760px){
 body.experience-mobile .glass.focus-art{min-height:222px}
 .device-status{letter-spacing:-.02em}
 .appearance-line{align-items:stretch;flex-direction:column}
 .appearance-line select{width:100%}
}