:root { color-scheme: dark; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; background: #020507; color: #f4fbff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020507; }
button, select { font: inherit; }
button { color: inherit; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: calc(2.5rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(.45rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; background: #03070ae8; border-bottom: 1px solid #ffffff18; backdrop-filter: blur(14px); }
.brand { font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
.topbar nav { display: flex; gap: .15rem; }
.icon-button, .close-button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: .45rem; border: 0; border-radius: 50%; background: transparent; }
.icon-button:active, .close-button:active { background: #ffffff18; }
.icon-button svg, .close-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.camera-stage { position: fixed; inset: calc(2.5rem + env(safe-area-inset-top)) 0 0; overflow: hidden; background: radial-gradient(circle at center, #17323d, #020507 70%); }
.camera-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sky-objects { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.crosshair { position: absolute; left: 50%; top: 50%; z-index: 4; width: 1.4rem; height: 1.4rem; transform: translate(-50%, -50%); border: 1px solid #ffffffbb; border-radius: 50%; box-shadow: 0 0 .5rem #000; pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #ffffffbb; }
.crosshair::before { left: 50%; top: -.45rem; width: 1px; height: 2.2rem; }
.crosshair::after { top: 50%; left: -.45rem; width: 2.2rem; height: 1px; }

.start-button { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .8rem 1.25rem; border: 1px solid #8fffd9; border-radius: 999px; background: #03110de8; color: #8fffd9; font-weight: 800; box-shadow: 0 1rem 3rem #0009; }
.start-button[hidden] { display: none; }
.toast { position: absolute; z-index: 12; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); width: min(90%, 28rem); transform: translateX(-50%); margin: 0; padding: .55rem .7rem; border-radius: .6rem; background: #080d11e8; color: #fff; font-size: .78rem; text-align: center; box-shadow: 0 .5rem 2rem #000; }
.target-chip { position: absolute; z-index: 5; top: .6rem; left: 50%; max-width: calc(100% - 2rem); transform: translateX(-50%); padding: .4rem .65rem; border: 1px solid #7f919a; border-radius: .55rem; background: #05090dcc; text-align: center; backdrop-filter: blur(8px); }
.target-chip b, .target-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-chip b { color: #c0cbd0; font-size: .78rem; }
.target-chip span { margin-top: .12rem; color: #c7d9e2; font-size: .68rem; }
.target-chip.visible { border-color: #64f1c2; box-shadow: 0 0 .7rem #34c99a55; }
.target-chip.visible b { color: #72f2c6; }
.target-chip.waiting { border-color: #77858c; box-shadow: none; }
.direction-cue { position: absolute; z-index: 6; left: 50%; top: 50%; display: grid; place-items: center; gap: .15rem; transform: translate(-50%, -50%); color: #64f1c2; pointer-events: none; text-align: center; text-shadow: 0 1px 4px #000, 0 0 10px #000; }
.direction-cue[hidden] { display: none; }
.direction-cue span { display: block; font-size: 1.6rem; line-height: 1; transform-origin: center; filter: drop-shadow(0 0 5px #64f1c2); }
.direction-cue b { padding: .18rem .38rem; border-radius: 999px; background: #020507c7; font-size: .65rem; white-space: nowrap; }
.orientation { position: absolute; right: max(.65rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: .65rem; padding: .38rem .55rem; border-radius: .45rem; background: #020507b8; font: 700 .7rem ui-monospace, monospace; backdrop-filter: blur(8px); }

.sky-object { position: absolute; transform: translate(-50%, -50%); padding: .24rem .38rem; border: 1px solid currentColor; border-radius: 999px; background: #020507d8; color: #ffe290; font-size: .67rem; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.sky-object::before { content: ""; display: inline-block; width: .36rem; height: .36rem; margin-right: .25rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .55rem currentColor; }
.sky-object[data-kind="satellite"] { color: #64f1c2; }
.sky-object[data-kind="moon"] { color: white; }
.horizon-line { position: absolute; left: 0; width: 100%; height: 1px; border-top: 1px dashed #b3e9ff; color: #d6f4ff; font-size: .5rem; letter-spacing: .12em; text-align: right; text-shadow: 0 1px 3px #000; }
.cardinal { position: absolute; top: .4rem; transform: translateX(-50%); min-width: 1.5rem; padding: .15rem .25rem; border-radius: .3rem; background: #020507b8; font-size: .68rem; font-weight: 900; text-align: center; }

.sheet { width: min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 1rem), 34rem); max-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem); margin: max(.5rem, env(safe-area-inset-top)) auto max(.5rem, env(safe-area-inset-bottom)); padding: 0; border: 1px solid #29424f; border-radius: 1rem; background: #071017f2; color: white; box-shadow: 0 1rem 4rem #000; backdrop-filter: blur(18px); }
.sheet::backdrop { background: #0008; }
.sheet > header { position: sticky; top: 0; z-index: 1; height: 3rem; padding: 0 .4rem 0 1rem; display: flex; align-items: center; justify-content: space-between; background: #071017f4; border-bottom: 1px solid #ffffff16; }
.close-button { position: relative; width: 2rem; height: 2rem; padding: 0; border: 1px solid #ffffff14; background: #ffffff08; color: #d8e3e8; appearance: none; -webkit-appearance: none; }
.close-button svg { display: none; }
.close-button::before, .close-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: 1.5px; border-radius: 999px; background: currentColor; transform-origin: center; }
.close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pass-list { display: grid; gap: .5rem; padding: .7rem; overflow: auto; }
.pass-card { padding: .7rem; border: 1px solid #ffffff12; border-radius: .7rem; background: #0b1b25; }
.pass-card b, .pass-card span { display: block; }
.pass-card span { margin-top: .2rem; color: #a9c0cc; font-size: .76rem; }
.pass-card.below-limit { opacity: .42; filter: saturate(.3); }

.settings { display: grid; gap: .8rem; padding: .8rem; overflow: auto; }
.settings > label:not(.check) { display: grid; gap: .28rem; color: #a9c0cc; font-size: .75rem; }
select, .settings button { min-height: 2.6rem; padding: .6rem .7rem; border: 1px solid #35515f; border-radius: .6rem; background: #07131b; color: white; }
.settings fieldset { margin: 0; padding: .65rem; border: 1px solid #35515f; border-radius: .65rem; }
.settings legend { padding: 0 .3rem; color: #a9c0cc; font-size: .75rem; }
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.check { display: flex; align-items: center; gap: .45rem; font-size: .8rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: #28c995; }
.button-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.primary { background: #25c591 !important; border-color: #66f4c5 !important; color: #02100b !important; font-weight: 800; }
.small-status { min-height: 1rem; margin: -.3rem 0 0; color: #a9c0cc; font-size: .72rem; }

.manual-location { display: grid; gap: .55rem; margin-top: .55rem; }
.manual-location[hidden] { display: none; }
.manual-location label { display: grid; gap: .28rem; color: #a9c0cc; font-size: .75rem; }
.manual-location p { margin: 0; color: #a9c0cc; font-size: .7rem; }

.pass-details { display: grid; gap: .8rem; padding: .9rem; overflow: auto; }
.pass-details-title { display: grid; gap: .2rem; }
.pass-details-title b { color: #f4fbff; font-size: .95rem; }
.pass-details-title span { color: #9eb6c2; font-size: .75rem; }
.pass-sky-map { width: min(100%, 22rem); aspect-ratio: 1; margin: 0 auto; overflow: visible; }
.sky-grid { fill: none; stroke: #8eb4c52c; stroke-width: 1; }
.sky-cardinal { fill: #cbe5ee; font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.sky-altitude { fill: #7893a0; font-size: 9px; }
.pass-track { fill: none; stroke: #64f1c2; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #34c99a); }
.pass-peak { fill: #ffcf5c; stroke: #071017; stroke-width: 2; }
.pass-peak-label { fill: #ffdf7f; font-size: 11px; font-weight: 800; paint-order: stroke; stroke: #071017; stroke-width: 3px; stroke-linejoin: round; }
.pass-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pass-times span { display: grid; gap: .18rem; padding: .5rem; border: 1px solid #ffffff12; border-radius: .55rem; background: #0b1b25; color: #8fa8b4; font-size: .65rem; }
.pass-times b { color: #f3fbff; font-size: .78rem; }
.pass-visibility { margin: 0; padding: .5rem .65rem; border-radius: .5rem; background: #081820; color: #b8ccd5; font-size: .75rem; text-align: center; }
.pass-details > button { min-height: 2.7rem; border-radius: .65rem; }

@media (min-width: 700px) {
  .sheet { margin-bottom: auto; }
}

.intro { width: min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 2rem), 29rem); max-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem); margin: max(1rem, env(safe-area-inset-top)) auto max(1rem, env(safe-area-inset-bottom)); padding: 1.35rem; border: 1px solid #31505d; border-radius: 1.1rem; background: #071017f8; color: white; box-shadow: 0 1.5rem 5rem #000; }
.intro::backdrop { background: #010406ed; }
.intro-mark { width: 3rem; height: 3rem; display: grid; place-items: center; margin: 0 auto .55rem; border: 1px solid #64f1c2; border-radius: 50%; color: #64f1c2; font-size: 2rem; }
.intro h1 { margin: 0; font-size: 1.25rem; text-align: center; }
.intro p { margin: .75rem 0; color: #d8e7ed; font-size: .88rem; line-height: 1.45; }
.intro ul { margin: .75rem 0; padding-left: 1.2rem; color: #b9ccd5; font-size: .79rem; line-height: 1.45; }
.intro li + li { margin-top: .35rem; }
.install-note { display: grid; gap: .22rem; margin: .9rem 0; padding: .7rem; border: 1px solid #ffffff1f; border-radius: .65rem; background: #0b1b25; font-size: .76rem; }
.install-note b { margin-bottom: .18rem; color: #64f1c2; }
.intro > button { width: 100%; min-height: 2.8rem; border: 1px solid #66f4c5; border-radius: .65rem; }