/* LunaFlow · Orbit skin for the Luna app pages (2026-10-23). A visual layer only: it recolours and reshapes what the page already has,
   it never changes a button, a number or what the page does. Remove the two lines in the template to go back. */
html:root {
  --bg:#050b1f; --panel:#0e1c40; --panel2:#132654; --border:rgba(212,168,75,.26); --gold:#d4a84b; --gold-dim:#9b7a36;
  --text:#e3e9f6; --mut:#9aa9c8; --white:#f4f7fd; --grid:#16264d; --sk:#13234a; --sk2:#1c3163;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius:20px;
  --o-gold2:#f4dc9a; --o-serif:"Instrument Serif", Georgia, serif; --o-sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html { background:#050b1f; }
body { background:transparent !important; font-family:var(--o-sans); }
#orbit-dust { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.wrap { position:relative; z-index:1; }

/* header: serif wordmark, gold mono subline */
.head { border-bottom:1px solid rgba(212,168,75,.22) !important; }
.brand { font:400 30px/1 var(--o-serif) !important; letter-spacing:.01em !important; color:var(--white) !important; }
.brand small { font:700 10px var(--mono) !important; letter-spacing:.22em !important; color:var(--gold) !important; margin-top:6px !important; }
.px b, .num { font-family:var(--mono); }
.px b { color:var(--o-gold2); text-shadow:0 0 22px rgba(212,168,75,.35); }

/* panels become Orbit glass cards */
.panel { background:linear-gradient(165deg, rgba(21,41,90,.88) 0%, rgba(14,28,64,.86) 45%, rgba(9,21,51,.92) 100%) !important;
         border:1px solid rgba(212,168,75,.28) !important; border-radius:22px !important;
         box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); position:relative; overflow:hidden; }
.panel::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
                 background:radial-gradient(60% 45% at var(--gx,50%) var(--gy,0%), rgba(244,220,154,.10), transparent 70%); }
.panel > * { position:relative; }
.ph { font:800 11px var(--mono) !important; letter-spacing:.18em !important; color:var(--gold) !important; border-bottom-color:rgba(212,168,75,.2) !important; }
.kpi { border-radius:14px; }

/* buttons: gold pill with a glow, outline pills */
button, .btn { border-radius:999px !important; }
.b-pri { background:linear-gradient(180deg, #f1d896, #d4a84b) !important; color:#120d03 !important; box-shadow:0 6px 22px rgba(212,168,75,.28) !important; }
.b-pri:not(:disabled):hover { box-shadow:0 8px 30px rgba(212,168,75,.45) !important; }
.b-sec { border-color:rgba(212,168,75,.6) !important; color:var(--o-gold2) !important; background:rgba(212,168,75,.06) !important; }
.b-ter { border-radius:999px !important; }
.seg { border-radius:999px; }

/* skeleton shimmer in the Orbit colours */
.skl { background:linear-gradient(90deg, #13234a, #1c3163, #13234a) !important; background-size:200% 100% !important; }

/* colour mode: black & white */
html[data-tone="bw"] .wrap, html[data-tone="bw"] #orbit-dust { filter:grayscale(1) contrast(1.08); }

/* the gear (same settings as the Cards and start pages) */
#orbit-gear { position:fixed; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40;
  width:50px; height:50px; border-radius:50%; border:1.5px solid rgba(212,168,75,.7); background:rgba(9,18,45,.92); color:#d4a84b;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.5); padding:0 !important; }
#orbit-gear svg { width:22px; height:22px; transition:transform .5s; }
#orbit-gear[aria-expanded="true"] svg { transform:rotate(120deg); }
#orbit-panel { position:fixed; right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:41;
  width:min(300px, calc(100vw - 24px)); background:#0a1230; border:1.5px solid rgba(212,168,75,.55); border-radius:18px; padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); display:grid; gap:12px; color:#eef3fc; font-family:var(--o-sans); }
#orbit-panel[hidden] { display:none; }
#orbit-panel h2 { margin:0; font:800 12px var(--mono); letter-spacing:.2em; color:#d4a84b; }
#orbit-panel p { margin:0 0 6px; font-size:11px; color:#9aa9c8; }
#orbit-panel .o-seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#orbit-panel .o-seg button { min-height:44px; border-radius:10px !important; border:1.5px solid rgba(147,162,194,.25); background:transparent; cursor:pointer;
  font:700 13px var(--o-sans); color:#eef3fc; padding:0; letter-spacing:0; box-shadow:none; transform:none; }
#orbit-panel .o-seg button[aria-pressed="true"] { border-color:#d4a84b; color:#f4dc9a; background:rgba(212,168,75,.1); }
@media (prefers-reduced-motion: reduce) { #orbit-gear svg { transition:none; } }