/* FT420 observatory: visual layer only. The shell still owns navigation and iframe state. */
:root{--obs-ink:#edf5f2;--obs-muted:#a9bdc1;--obs-teal:#68d9d0;--obs-edge:rgba(146,207,211,.23);--obs-glass:rgba(5,22,31,.82)}
html,body{background:#06121a}
body{
  background:radial-gradient(ellipse at 50% 0%,rgba(25,68,75,.18),transparent 55%),#06151e;
  color:var(--obs-ink)
}
.app-header{
  height:56px;padding:0 clamp(16px,2vw,32px);gap:clamp(16px,3vw,48px);
  border-bottom:1px solid var(--obs-edge);
  background:linear-gradient(90deg,rgba(3,17,25,.95),rgba(7,28,36,.91));
  box-shadow:0 10px 32px rgba(0,0,0,.24);backdrop-filter:blur(18px)
}
.app-header .brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:175px}
.app-header .brand .logo{font-size:1.65rem;line-height:1.05;letter-spacing:-.06em;color:var(--obs-ink);font-weight:700}
.brand-sub{font-size:.56rem;letter-spacing:.18em;color:var(--obs-muted);font-weight:700}
.tabbar{height:100%;gap:4px;align-items:stretch}
.tabbar button{
  position:relative;gap:10px;padding:0 25px;border-radius:0;background:transparent;
  font-size:.9rem;font-weight:600;color:var(--obs-muted);transition:color .18s ease,background .18s ease
}
.tabbar button .material-symbols-outlined{font-size:20px;font-weight:300}
.tabbar button:hover{color:var(--obs-ink);background:rgba(255,255,255,.03)}
.tabbar button.active{color:var(--obs-teal);background:rgba(73,199,195,.06);box-shadow:none}
.tabbar button.active::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--obs-teal);box-shadow:0 0 14px rgba(104,217,208,.55)}
.app-header a.back{margin-left:auto;padding:9px 14px;border-color:var(--obs-edge);border-radius:9px;color:var(--obs-ink);font-size:.8rem;background:rgba(255,255,255,.035)}
.app-header a.back:hover{color:var(--obs-teal);border-color:var(--obs-teal)}
.frame-wrap{height:calc(100dvh - 56px)}
.frame-wrap iframe{background:transparent}
#shellSignalAlert{background:rgba(1,8,13,.71);backdrop-filter:blur(6px)}
#shellSignalAlertCard{
  max-width:390px;padding:22px;border:1px solid var(--obs-edge);border-radius:18px;
  background:linear-gradient(155deg,rgba(11,37,46,.97),rgba(3,17,25,.98));
  box-shadow:0 28px 74px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.07);color:var(--obs-ink)
}
.ssa-label{color:var(--obs-teal);font-size:.71rem}.ssa-meta,.ssa-close{color:var(--obs-muted)}
.ssa-dir-buy{color:#60dbac}.ssa-dir-sell{color:#ff888d}
.ssa-trade-btn{background:var(--obs-teal);color:#072227}.ssa-dismiss-btn{border-color:var(--obs-edge);color:var(--obs-ink)}
.app-header button:focus-visible,.mobile-bottomnav button:focus-visible,.more-sheet a:focus-visible,.app-header a:focus-visible{outline:2px solid var(--obs-teal);outline-offset:-3px}
@media (max-width:767px){
  .app-header{height:62px;padding:0 16px;background:rgba(3,19,27,.95)}
  .app-header .brand{min-width:0}.app-header .brand .logo{font-size:1.45rem}
  .brand-sub{font-size:.49rem}
  .frame-wrap{height:calc(100dvh - 62px - 70px - env(safe-area-inset-bottom))}
  .mobile-bottomnav{
    height:calc(70px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);
    background:rgba(3,18,27,.96);border-top:1px solid var(--obs-edge);
    box-shadow:0 -14px 38px rgba(0,0,0,.38);backdrop-filter:blur(18px)
  }
  .mobile-bottomnav button{position:relative;gap:2px;font-size:.65rem;font-weight:600;color:var(--obs-muted);min-width:0}
  .mobile-bottomnav button .material-symbols-outlined{font-size:22px;font-weight:300}
  .mobile-bottomnav button.active{color:var(--obs-teal)}
  .mobile-bottomnav button.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--obs-teal);box-shadow:0 0 12px var(--obs-teal)}
  .more-sheet[data-open="1"]{
    bottom:calc(70px + env(safe-area-inset-bottom) + 8px);left:10px;right:10px;
    background:rgba(7,28,38,.97);border-color:var(--obs-edge);border-radius:16px;
    box-shadow:0 -18px 45px rgba(0,0,0,.58);backdrop-filter:blur(20px)
  }
  .more-sheet a{color:var(--obs-ink);font-size:.9rem;min-height:46px}
  #shellSignalAlert{align-items:flex-end;padding:12px 12px calc(80px + env(safe-area-inset-bottom))}
  #shellSignalAlertCard{max-width:none}
}
@media (prefers-reduced-motion:reduce){.tabbar button{transition:none}}