/* ORBITA 12.0 · CINEMATIC DEPTH
   High-definition visual treatment with lightweight CSS layers.
   No large images, WebGL, or continuous heavy filters are required. */
:root{
  --orbita-aura-cyan:rgba(83,231,245,.18);
  --orbita-aura-violet:rgba(182,108,255,.20);
  --orbita-edge:rgba(159,128,214,.24);
  --orbita-glass:rgba(12,13,27,.82);
}
#app-shell{position:relative;isolation:isolate;background:#080914}
#app-shell .topbar{
  background:linear-gradient(105deg,rgba(9,9,20,.96),rgba(15,11,29,.94) 48%,rgba(7,15,25,.95));
  border-bottom:1px solid rgba(117,213,245,.20);
  box-shadow:0 10px 34px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
#app-shell .topbar:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(83,231,245,.55),rgba(182,108,255,.62),transparent);
  opacity:.72;pointer-events:none
}
#app-shell .mini-orbit-image{
  border-radius:13px;border:1px solid rgba(116,226,255,.34);
  box-shadow:0 0 18px rgba(83,231,245,.16),0 0 32px rgba(182,108,255,.12)
}
#app-shell .brand-lockup{text-shadow:0 0 18px rgba(83,231,245,.10)}
#app-shell .brand-lockup b{color:#76edff;text-shadow:0 0 18px rgba(83,231,245,.35)}
#app-shell .app-layout{
  position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse at 78% 4%,rgba(64,94,184,.13),transparent 36%),
    radial-gradient(ellipse at 16% 36%,rgba(144,63,205,.11),transparent 38%),
    linear-gradient(155deg,#090914 0%,#0b0b18 52%,#080d16 100%);
}
#app-shell .app-layout:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background-image:
    radial-gradient(circle at 11% 13%,rgba(255,255,255,.72) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 26%,rgba(102,227,255,.70) 0 1px,transparent 1.8px),
    radial-gradient(circle at 43% 71%,rgba(197,139,255,.62) 0 1px,transparent 1.8px),
    linear-gradient(rgba(130,158,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,158,255,.035) 1px,transparent 1px);
  background-size:173px 173px,229px 229px,197px 197px,48px 48px,48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,black,rgba(0,0,0,.46) 72%,transparent);
  mask-image:linear-gradient(to bottom,black,rgba(0,0,0,.46) 72%,transparent)
}
#app-shell .sidebar{
  background:linear-gradient(180deg,rgba(15,13,29,.97),rgba(8,11,20,.98));
  border-right:1px solid rgba(123,197,235,.13);
  box-shadow:inset -1px 0 rgba(255,255,255,.018),12px 0 35px rgba(0,0,0,.12)
}
#app-shell .nav-item{border:1px solid transparent}
#app-shell .nav-item.active{
  border-color:rgba(83,231,245,.15);
  background:linear-gradient(100deg,rgba(127,69,190,.22),rgba(53,178,205,.10));
  box-shadow:inset 2px 0 #6cecff,0 7px 24px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.05)
}
#app-shell .main-content{position:relative;z-index:1}
#app-shell .hero-row{
  isolation:isolate;position:relative;overflow:hidden;
  padding:clamp(22px,3vw,36px);
  border:1px solid rgba(133,182,239,.20);border-radius:26px;
  background:
    radial-gradient(ellipse at 82% 45%,rgba(70,114,218,.17),transparent 42%),
    radial-gradient(ellipse at 18% 0%,rgba(155,82,219,.16),transparent 46%),
    linear-gradient(128deg,rgba(24,20,42,.96),rgba(9,15,29,.94) 64%,rgba(10,18,31,.97));
  box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08),inset 0 0 42px rgba(103,140,230,.045)
}
#app-shell .hero-row:before{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 70% 50%,rgba(83,231,245,.13),transparent 34%),radial-gradient(ellipse at 27% 35%,rgba(182,108,255,.13),transparent 38%);
}
#app-shell .hero-row:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.48;
  background-image:radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.5px);
  background-size:71px 71px;
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,black 72%);
  mask-image:linear-gradient(90deg,transparent 4%,black 72%)
}
#app-shell .hero-row h1{text-shadow:0 5px 28px rgba(0,0,0,.34)}
#app-shell .hero-row h1 span{
  background:linear-gradient(100deg,#d9b7ff 0%,#a982ff 38%,#75efff 78%,#d4fbff 100%);
  background-clip:text;-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(83,231,245,.18))
}
#app-shell .hero-row .muted{max-width:590px}
#app-shell .hero-orbit-art{filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
#app-shell .hero-orbit-art .orbit-ring{
  border-width:1.5px;
  box-shadow:0 0 18px rgba(83,231,245,.10),inset 0 0 14px rgba(182,108,255,.07)
}
#app-shell .hero-orbit-art .ring-a{border-color:rgba(205,151,255,.78);box-shadow:0 0 24px rgba(182,108,255,.20),inset 0 0 12px rgba(182,108,255,.10)}
#app-shell .hero-orbit-art .ring-b{border-color:rgba(83,231,245,.72);box-shadow:0 0 22px rgba(83,231,245,.19)}
#app-shell .hero-orbit-art .ring-c{border-color:rgba(210,190,255,.46);border-style:dashed}
#app-shell .hero-orbit-art .orbit-sun{
  position:relative;
  background:radial-gradient(circle at 31% 24%,#fff 0 4%,#e8d8ff 10%,#c48cff 30%,#7842bf 58%,#211b49 100%);
  border:1px solid rgba(235,220,255,.68);
  box-shadow:0 0 24px rgba(194,125,255,.64),0 0 60px rgba(83,231,245,.18),inset -9px -10px 20px rgba(5,5,20,.45),inset 4px 4px 10px rgba(255,255,255,.30)
}
#app-shell .hero-orbit-art .orbit-sun:after{
  content:"";position:absolute;inset:-11px;border:1px solid rgba(105,232,255,.28);
  border-radius:50%;box-shadow:0 0 25px rgba(83,231,245,.18)
}
#app-shell .metric-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(29,23,48,.96),rgba(10,15,27,.97));
  border:1px solid rgba(146,137,221,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.065),inset 0 -18px 34px rgba(48,65,125,.06)
}
#app-shell .metric-card:before{
  content:"";position:absolute;width:160px;height:120px;right:-70px;top:-74px;
  background:radial-gradient(ellipse,rgba(83,231,245,.16),transparent 68%);pointer-events:none
}
#app-shell .metric-card strong{
  color:#f5f5ff;text-shadow:0 0 22px rgba(83,231,245,.20)
}
#app-shell .metric-card:nth-child(2) strong{color:#d9c1ff;text-shadow:0 0 22px rgba(182,108,255,.24)}
#app-shell .metric-card:nth-child(3) strong{color:#9af4ff}
#app-shell .panel{
  border-color:rgba(147,126,201,.20);
  box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045),inset 0 -22px 44px rgba(50,82,145,.035)
}
#app-shell .panel-heading h2,#app-shell .panel h2{text-shadow:0 2px 16px rgba(130,109,206,.14)}
#app-shell .panel-icon{text-shadow:0 0 20px currentColor}
#app-shell .impulse-panel{
  border-color:rgba(91,207,235,.27);
  box-shadow:0 22px 54px rgba(0,0,0,.28),0 0 36px rgba(83,231,245,.055),inset 0 1px rgba(255,255,255,.09)
}
#app-shell .shortcut-card,#app-shell .explore-card{
  border-color:rgba(142,124,196,.24);
  background:linear-gradient(145deg,rgba(31,23,51,.96),rgba(9,16,29,.97));
  box-shadow:0 14px 35px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.055)
}
#app-shell .field{
  background:linear-gradient(145deg,rgba(9,10,21,.98),rgba(15,13,27,.98));
  border-color:rgba(147,130,187,.42);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.26)
}
#app-shell .field:focus{
  border-color:rgba(102,231,255,.84);
  box-shadow:0 0 0 3px rgba(83,231,245,.11),0 0 24px rgba(83,231,245,.10),inset 0 2px 8px rgba(0,0,0,.24)
}
#app-shell .btn-primary{
  background:linear-gradient(108deg,#6336ad 0%,#9850dc 46%,#287f9d 100%);
  border:1px solid rgba(222,196,255,.24);
  box-shadow:0 9px 26px rgba(93,49,156,.34),inset 0 1px rgba(255,255,255,.26),inset 0 -2px rgba(0,0,0,.14)
}
#app-shell .btn-quiet{border-color:rgba(146,157,206,.22);background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(83,231,245,.025))}
#app-shell .cloud-state{text-shadow:0 0 13px currentColor}
#app-shell .orbita-view-loading{background:rgba(5,7,17,.78)}
#app-shell .orbita-view-loading-orbit{filter:drop-shadow(0 0 14px rgba(83,231,245,.38))}
#app-shell .mobile-nav{
  background:linear-gradient(100deg,rgba(8,8,20,.98),rgba(17,12,30,.97),rgba(7,15,25,.98));
  border-top:1px solid rgba(92,219,247,.22);
  box-shadow:0 -12px 35px rgba(0,0,0,.34),0 -1px 18px rgba(83,231,245,.07);
}
#app-shell .mobile-nav button.active{
  color:#a8f6ff;text-shadow:0 0 18px rgba(83,231,245,.40)
}
#app-shell .mobile-nav button.active span{filter:drop-shadow(0 0 8px rgba(83,231,245,.62))}
@media(hover:hover){
  #app-shell .panel,#app-shell .metric-card,#app-shell .shortcut-card,#app-shell .explore-card{
    transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease
  }
  #app-shell .panel:hover,#app-shell .metric-card:hover,#app-shell .shortcut-card:hover,#app-shell .explore-card:hover{
    border-color:rgba(111,225,255,.38);
    box-shadow:0 22px 52px rgba(0,0,0,.28),0 0 28px rgba(83,231,245,.07),inset 0 1px rgba(255,255,255,.07)
  }
  #app-shell .shortcut-card:hover,#app-shell .explore-card:hover{transform:translateY(-3px)}
}
@media(max-width:700px){
  #app-shell .topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  #app-shell .hero-row{padding:20px 17px;border-radius:21px}
  #app-shell .hero-row:after{background-size:53px 53px;opacity:.26}
  #app-shell .hero-orbit-art{filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
  #app-shell .metric-card{box-shadow:0 10px 25px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.055)}
  #app-shell .panel{box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.04)}
}
@media(prefers-reduced-motion:reduce){
  #app-shell *,#app-shell *:before,#app-shell *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(prefers-reduced-data:reduce){
  #app-shell .app-layout:before{opacity:.12}
  #app-shell .hero-orbit-art{filter:none}
}