:root {
  color-scheme: dark;
  --bg: #07101d;
  --panel: #0d1726;
  --panel-2: #111e30;
  --surface: rgba(10, 20, 34, .9);
  --line: rgba(255, 255, 255, .11);
  --muted: #91a1b6;
  --text: #f7fafc;
  --sun: #ffbd3e;
  --sunset: #ff684f;
  --moon: #5dd5f2;
  --blue: #5d8cff;
  --green: #53d7a2;
  --subject: #aa7cff;
  --light-preview-color: rgba(0, 0, 0, 0);
  --light-phase-accent: #b7dce6;
  --light-phase-glow: rgba(183, 220, 230, .08);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { height: 100dvh; position: relative; overflow: hidden; background: radial-gradient(circle at 75% -10%, var(--light-phase-glow), transparent 32%), var(--bg); transition: background-color .2s linear; }
.screen { position: absolute; inset: 0 0 calc(66px + var(--safe-bottom)); overflow: hidden; }
.planner-screen { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }

.topbar { min-height: calc(66px + var(--safe-top)); padding: calc(10px + var(--safe-top)) 16px 10px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #0d1828, #0a1422); border-bottom: 1px solid var(--line); z-index: 20; }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px; position: relative; overflow: hidden; background: conic-gradient(from 210deg, var(--moon), var(--blue), #253b6c 43%, var(--sun) 44%, var(--sunset) 58%, #253b6c 59%, var(--moon)); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.28); }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.brand-mark span { position: absolute; z-index: 1; left: 18px; top: 5px; width: 2px; height: 28px; background: linear-gradient(var(--sun), var(--moon)); transform: rotate(27deg); border-radius: 2px; }
.brand-lockup h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 760; }
.brand-lockup p { margin: 2px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 58vw; }
.top-actions { display: flex; gap: 6px; }
.icon-btn { width: 42px; height: 42px; border: 0; border-radius: 13px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.icon-btn:active { background: rgba(255,255,255,.08); transform: scale(.96); }
.icon-btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.top-info-panel { position: relative; height: 92px; min-height: 92px; overflow: hidden; background: rgba(13,23,38,.97); border-bottom: 1px solid var(--line); z-index: 16; }
.sky-summary { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 11px; }
#moonPhase { width: 52px; height: 52px; }
.summary-body { min-width: 0; }
.summary-row { display: grid; grid-template-columns: 45px 23px minmax(61px,1fr) 23px minmax(61px,1fr); align-items: center; font-size: 13px; line-height: 25px; white-space: nowrap; }
.summary-row strong { font-size: 13px; }
.summary-row .rise-icon, .summary-row .set-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; line-height: 1; font-weight: 800; }
.sun-row .rise-icon { background: var(--sun); color: #312200; }.sun-row .set-icon { background: var(--sunset); color: #35100a; }
.moon-row .rise-icon { background: var(--blue); color: #071432; }.moon-row .set-icon { background: var(--moon); color: #05212a; }
.phase-caption { margin: 1px 0 0 47px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.map-stage { position: relative; min-height: 0; background: #142233; }
#map { position: absolute; inset: 0; z-index: 1; background: #142233; }
.light-preview { position: absolute; inset: 0; z-index: 450; pointer-events: none; background: var(--light-preview-color); transition: background-color .16s linear; }
.leaflet-control-attribution { background: rgba(4,10,17,.73) !important; color: #b8c4d3 !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: #dbe7f5 !important; }
.leaflet-control-zoom { display: none; }
.leaflet-tile-pane { filter: saturate(.9) contrast(1.04); }
.satellite-layer .leaflet-tile-pane { filter: saturate(.78) brightness(.83) contrast(1.1); }

.planner-marker { background: transparent; border: 0; }
.camera-pin, .subject-pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 5px 16px rgba(0,0,0,.48); border: 2px solid #fff; }
.camera-pin { background: var(--sunset); }.subject-pin { background: var(--subject); }
.camera-pin::after, .subject-pin::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

.pin-mode { position: absolute; left: 12px; top: 12px; z-index: 500; background: rgba(7,16,29,.9); border: 1px solid rgba(255,255,255,.15); border-radius: 13px; padding: 3px; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.pin-mode button { height: 35px; border: 0; background: transparent; border-radius: 10px; padding: 0 10px; color: #b6c2d2; font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pin-mode button.active { background: rgba(255,255,255,.12); color: #fff; }
.pin-dot { width: 8px; height: 8px; border-radius: 50%; }.camera-dot { background: var(--sunset); }.subject-dot { background: var(--subject); }
.history-actions { position:absolute;z-index:500;left:12px;top:58px;display:flex;overflow:hidden;border-radius:11px; }.history-actions button{width:37px;height:31px;border:0;border-right:1px solid var(--line);background:transparent;color:#eef4fb;font-size:20px;line-height:1}.history-actions button:last-child{border-right:0}.history-actions button:disabled{color:#66768a;opacity:.55}.history-actions button:not(:disabled):active{background:rgba(255,255,255,.1)}

.light-phase-badge { position: absolute; right: 12px; top: 12px; z-index: 500; min-height: 42px; max-width: 158px; border-radius: 13px; padding: 7px 10px 7px 9px; display: flex; align-items: center; gap: 8px; }
.light-phase-badge > i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--light-phase-accent); box-shadow: 0 0 13px var(--light-phase-accent); transition: background-color .16s linear, box-shadow .16s linear; }
.light-phase-badge span { min-width: 0; }
.light-phase-badge strong, .light-phase-badge small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.light-phase-badge strong { color: #fff; font-size: 11px; font-weight: 750; }
.light-phase-badge small { margin-top: 2px; color: #b8c5d4; font-size: 9px; }

.glass-panel { background: rgba(7,16,29,.78); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.info-panel-track { width: 100%; height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
.info-panel-track::-webkit-scrollbar { display: none; }
.info-panel-page { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: center; padding: 7px 39px 15px; }
.info-panel-page.sky-summary { padding: 8px 39px 15px 14px; }
.info-panel-page > header { position: relative; min-height: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.info-panel-page > header strong { color: #eaf1f8; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.info-panel-page > header > span { position: absolute; right: 8px; color: #718296; font-size: 8px; }
.info-panel-page > header button { height: 18px; border: 0; border-radius: 8px; background: rgba(170,124,255,.14); color: #d9caff; padding: 0 7px; font-size: 8px; font-weight: 760; }
.info-panel-metrics { min-height: 43px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; }
.info-panel-metrics > div, .info-panel-metrics > label { min-width: 0; padding: 0 7px; border-right: 1px solid var(--line); }
.info-panel-metrics > :last-child { border-right: 0; }
.info-panel-metrics span, .info-panel-metrics strong { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-panel-metrics > div > span, .height-readout > span:first-child { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.info-panel-metrics strong { margin-top: 3px; font-size: 11px; }
.info-panel-metrics .sun-info strong { color: #ffe092; }.info-panel-metrics .moon-info strong { color: #9beaff; }
.height-input { width: 58px; max-width: 100%; height: 25px; margin-top: 2px; display: grid !important; grid-template-columns: minmax(0,1fr) 15px; align-items: center; overflow: hidden !important; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(4,11,20,.74); }
.height-input input { min-width: 0; width: 100%; height: 23px; border: 0; outline: 0; background: transparent; color: #fff; padding: 0 2px 0 6px; font-size: 11px; font-weight: 760; }
.height-input em { color: var(--muted); font-size: 8px; font-style: normal; }
.info-panel-arrow { position: absolute; z-index: 3; top: 23px; width: 31px; height: 43px; border: 0; background: transparent; color: #c8d4e1; font-size: 27px; line-height: 1; }
.info-panel-arrow:disabled { visibility: hidden; }.info-panel-arrow:not(:disabled):active { color: var(--moon); background: rgba(255,255,255,.05); }.info-panel-previous { left: 0; }.info-panel-next { right: 0; }
.info-panel-dots { position: absolute; z-index: 4; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; gap: 5px; pointer-events: auto; }
.info-panel-dots button { width: 4px; height: 4px; border: 0; border-radius: 50%; background: #526176; padding: 0; transition: width .16s, background-color .16s; }
.info-panel-dots button.active { width: 12px; border-radius: 3px; background: var(--moon); }
.map-actions { position: absolute; z-index: 500; right: 12px; bottom: 12px; display: grid; gap: 8px; }
.map-fab { width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,.19); background: rgba(7,16,29,.9); box-shadow: 0 10px 24px rgba(0,0,0,.32); display: grid; place-items: center; cursor: pointer; }
.map-fab:active { transform: scale(.94); }.map-fab svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.north-reset > span { width: 30px; height: 30px; position: relative; display: grid; place-items: start center; transform: rotate(var(--north-rotation, 0deg)); transition: transform .08s linear; }
.north-reset b { color: #ff7561; font-size: 10px; line-height: 10px; }
.north-reset i { position: absolute; left: 50%; top: 10px; width: 2px; height: 17px; background: linear-gradient(#ff7561 0 50%, #d9e3ef 50%); transform: translateX(-50%); }
.north-reset i::before { content: ""; position: absolute; top: -4px; left: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #ff7561; }
.map-notice { position: absolute; z-index: 600; top: 58px; left: 50%; transform: translateX(-50%); background: rgba(133,49,35,.94); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 9px 13px; font-size: 11px; white-space: nowrap; }

.timeline-card { position: relative; background: #0c1625; border-top: 1px solid var(--line); z-index: 15; padding: 7px 10px 8px; }
.timeline-window { position: relative; }
#timeline { width: 100%; height: 75px; display: block; border-radius: 9px; touch-action: none; cursor: ew-resize; }
.timeline-pointer { position: absolute; z-index: 4; left: 50%; bottom: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 13px solid #0c1625; pointer-events: none; }
.timeline-now { position: absolute; z-index: 5; top: 7px; right: 34px; height: 25px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(7,16,29,.78); color: #d9edfa; padding: 0 9px; font-size: 9px; font-weight: 750; backdrop-filter: blur(8px); }
.timeline-precision{position:absolute;z-index:5;top:7px;left:34px;height:25px;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(7,16,29,.78);color:#d9edfa;padding:0 9px;font-size:9px;font-weight:750;backdrop-filter:blur(8px)}.timeline-precision.active{border-color:rgba(93,213,242,.7);background:rgba(93,213,242,.17);color:#fff}.precision-step-buttons{position:absolute;z-index:5;left:50%;top:7px;transform:translateX(-50%);display:flex;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(7,16,29,.8)}.precision-step-buttons button{height:23px;min-width:38px;border:0;border-right:1px solid var(--line);background:transparent;color:#fff;font-size:9px;font-weight:780}.precision-step-buttons button:last-child{border-right:0}
.date-time-main { width: 100%; min-height: 49px; border: 0; background: transparent; display: grid; grid-template-columns: minmax(74px,1fr) auto minmax(64px,1fr); align-items: center; gap: 8px; padding: 2px 3px 0; text-align: left; cursor: pointer; }
.date-time-main > strong { font-size: 18px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.date-time-main > span:last-child { color: #f4f7fb; font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
.time-center { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.time-center small { color: #d2dae5; font-size: 10px; }
.time-center b { font-size: 20px; letter-spacing: .01em; }
.mini-clock { width: 31px; height: 31px; flex: 0 0 31px; position: relative; display: block; border-radius: 50%; background: #f7fafc; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.mini-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #0b1421; transform: translate(-50%,-50%); }
#clockHand { position: absolute; left: calc(50% - 1px); top: 5px; width: 2px; height: 11px; border-radius: 2px; background: #0b1421; transform-origin: 50% 10.5px; transform: rotate(var(--clock-angle, 0deg)); }

.bottom-nav { position: absolute; z-index: 1000; left: 0; right: 0; bottom: 0; height: calc(66px + var(--safe-bottom)); padding: 5px 8px var(--safe-bottom); background: rgba(8,16,28,.98); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5,1fr); }
.bottom-nav button { border: 0; background: transparent; color: #76879c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 650; cursor: pointer; }
.bottom-nav button.active { color: var(--moon); }.bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app-shell.help-active .bottom-nav { display: none; }
.help-screen { inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: radial-gradient(circle at 86% 8%, rgba(93,140,255,.13), transparent 25%), var(--bg); }
.help-header { justify-content: flex-start; gap: 8px; }
.help-header .help-back { flex: 0 0 42px; margin-left: -8px; }
.help-header .help-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.help-header h2 { font-size: clamp(19px,5vw,25px); }
.help-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.help-article { width: min(100%,960px); margin: 0 auto; padding: 22px 16px calc(34px + var(--safe-bottom)); }
.help-intro { margin: 0; padding: 17px; border: 1px solid rgba(93,213,242,.2); border-radius: 17px; background: linear-gradient(145deg,rgba(93,213,242,.08),rgba(93,140,255,.045)); color: #d9e4ef; font-size: 14px; line-height: 1.65; }
.help-step { margin-top: 22px; }
.help-step-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.help-step-heading > span { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,var(--sunset),var(--sun)); color: #241109; font-size: 17px; font-weight: 850; box-shadow: 0 7px 22px rgba(255,104,79,.22); }
.help-step-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.help-step-layout { display: grid; gap: 18px; }
.help-step-copy > p { margin: 0 0 13px; color: #d6e0eb; font-size: 14px; line-height: 1.58; }
.help-step-copy > p:first-child { color: #fff; }
.help-gesture-tip { margin-top: 18px; padding: 15px; border: 1px solid rgba(170,124,255,.26); border-radius: 15px; background: rgba(170,124,255,.07); }
.help-gesture-tip strong { color: #d7c4ff; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.help-gesture-tip p { margin: 7px 0 0; color: #d9e1ec; font-size: 13px; line-height: 1.55; }
.help-figure { margin: 0; }
.help-figure > button { position: relative; width: 100%; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #0a1422; padding: 0; box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.help-figure img { width: 100%; height: auto; display: block; }
.help-figure button > span { position: absolute; right: 10px; bottom: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(5,13,23,.82); padding: 7px 10px; color: #fff; font-size: 10px; font-weight: 750; backdrop-filter: blur(10px); }
.help-figure figcaption { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.settings-help-button { width: 100%; min-height: 68px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 8px 0; text-align: left; }
.settings-help-button > span:nth-child(2) strong,.settings-help-button > span:nth-child(2) small { display: block; }
.settings-help-button > span:nth-child(2) strong { font-size: 13px; }
.settings-help-button > span:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.settings-help-button > span:last-child { color: var(--muted); font-size: 25px; }
.settings-help-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(93,213,242,.28); border-radius: 12px; background: rgba(93,213,242,.09); color: var(--moon); font-size: 17px; font-weight: 850; }
.help-image-viewer { position: fixed; z-index: 5000; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: rgba(2,7,13,.98); }
.help-image-viewer > header { min-height: calc(58px + var(--safe-top)); padding: calc(8px + var(--safe-top)) 13px 8px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #0b1524; }
.help-image-viewer > header strong { font-size: 15px; }
.help-image-viewer > header button { height: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.07); padding: 0 14px; font-size: 12px; font-weight: 750; }
.help-image-pan { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.help-image-pan img { width: 720px; max-width: none; height: auto; display: block; margin: 0 auto; }
body.help-image-open { overscroll-behavior: none; }

html.ar-native, body.ar-native { background: transparent !important; }
.app-shell.ar-active { background: transparent; }
.ar-screen { inset: 0; background: transparent; }
.ar-stage { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(rgba(5,12,21,.18), rgba(5,12,21,.04) 48%, rgba(5,12,21,.38)); }
.ar-topbar { position: absolute; z-index: 40; left: 0; right: 0; top: 0; min-height: calc(62px + var(--safe-top)); padding: calc(8px + var(--safe-top)) 12px 8px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; background: linear-gradient(180deg,rgba(3,9,17,.78),rgba(3,9,17,.12)); }
.ar-round-btn { width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(5,13,23,.68); display: grid; place-items: center; backdrop-filter: blur(13px); box-shadow: 0 8px 24px rgba(0,0,0,.24); }
.ar-round-btn svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-title { min-width: 0; border: 0; background: transparent; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.ar-title span,.ar-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ar-title span { font-size: 17px; font-weight: 800; }.ar-title strong { margin-top: 2px; color: #dce7f2; font-size: 10px; font-weight: 650; }
.ar-overlay { position: absolute; z-index: 10; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.52)); }
.ar-grid-line { fill: none; stroke: rgba(233,242,249,.46); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.ar-grid-meridian { stroke: rgba(226,238,247,.38); }
.ar-grid-label-disc { fill: rgba(230,239,247,.22); stroke: rgba(255,255,255,.2); stroke-width: .8; }
.ar-grid-label { fill: rgba(250,252,255,.85); font-size: 9px; font-weight: 760; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(3,9,16,.82); stroke-width: 3px; }
.ar-horizon-line { fill: none; stroke: rgba(236,246,255,.88); stroke-width: 1.4; stroke-dasharray: 8 7; }
#arCompassLabels text { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: rgba(3,9,16,.9); stroke-width: 4px; stroke-linejoin: round; }
.ar-sun-path,.ar-moon-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }.ar-sun-path { stroke: #ffd34f; stroke-width: 2.8; }.ar-moon-path { stroke: #72dff6; stroke-width: 2.4; stroke-dasharray: 7 6; }
.ar-sun-hour-dot { stroke: rgba(255,255,255,.7); stroke-width: 1; }
.ar-sun-hour-label { font-size: 11px; font-weight: 820; paint-order: stroke; stroke: rgba(3,9,16,.92); stroke-width: 4px; stroke-linejoin: round; }
.ar-event-line { stroke-width: 1.3; stroke-dasharray: 5 6; opacity: .88; }.ar-event-text { fill: #fff; font-size: 9px; font-weight: 780; text-anchor: middle; paint-order: stroke; stroke: rgba(3,9,16,.9); stroke-width: 4px; }
.ar-celestial-marker text { fill: #fff; font-size: 10px; font-weight: 850; text-anchor: middle; paint-order: stroke; stroke: rgba(3,9,16,.9); stroke-width: 4px; }.ar-celestial-marker .orbit-ring { fill: none; stroke-width: 1.3; opacity: .68; }
.ar-sun-marker > circle:first-child { fill: #ffd34f; filter: drop-shadow(0 0 10px rgba(255,189,62,.9)); }.ar-sun-marker .orbit-ring { stroke: #ffd34f; }
.ar-moon-marker > circle:first-child { fill: #e6f8ff; filter: drop-shadow(0 0 10px rgba(93,213,242,.85)); }.ar-moon-marker .orbit-ring { stroke: #78e4f9; }
.ar-reticle path,.ar-reticle circle { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1; }
.ar-readout { position: absolute; z-index: 30; top: calc(69px + var(--safe-top)); left: 12px; right: 12px; min-height: 45px; border-radius: 14px; padding: 7px 10px; display: grid; grid-template-columns: repeat(4,1fr); }
.ar-readout span { min-width: 0; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }.ar-readout span:last-child { border: 0; }.ar-readout small,.ar-readout strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ar-readout small { color: #bdc9d7; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }.ar-readout strong { margin-top: 3px; font-size: 11px; }
.ar-accuracy { position: absolute; z-index: 45; top: calc(123px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: min(88%,390px); border: 1px solid rgba(255,189,62,.45); border-radius: 13px; background: rgba(61,42,8,.86); padding: 9px 12px; text-align: center; backdrop-filter: blur(10px); }.ar-accuracy strong,.ar-accuracy span { display: block; }.ar-accuracy strong { font-size: 11px; }.ar-accuracy span { margin-top: 2px; color: #f1dba6; font-size: 9px; }
.ar-body-alignment { position: absolute; z-index: 58; left: 50%; bottom: calc(244px + var(--safe-bottom)); transform: translateX(-50%); width: min(91%,430px); border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: rgba(6,14,25,.94); padding: 12px; box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(16px); }.ar-body-alignment header { display: flex; align-items: center; justify-content: space-between; }.ar-body-alignment header strong { font-size: 13px; }.ar-body-alignment header button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(255,255,255,.08); font-size: 21px; line-height: 1; }.ar-body-alignment p { margin: 7px 0 10px; color: #c5d0dd; font-size: 10px; line-height: 1.45; }.ar-body-alignment>div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.ar-body-alignment>div button { min-height: 39px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; font-size: 11px; font-weight: 800; }.sun-align { color: #342200; background: linear-gradient(135deg,#ffe07a,#ffb532); }.moon-align { color: #061b28; background: linear-gradient(135deg,#a8edff,#6d9cff); }.ar-body-alignment small { display: block; margin-top: 9px; color: #e8caa0; font-size: 8px; line-height: 1.35; }
.ar-alignment-countdown { position: absolute; z-index: 59; left: 50%; top: calc(120px + var(--safe-top)); transform: translateX(-50%); min-width: 210px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(5,13,23,.88); padding: 10px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; box-shadow: 0 14px 42px rgba(0,0,0,.4); backdrop-filter: blur(13px); }.ar-alignment-countdown strong { font-size: 12px; }.ar-alignment-countdown span { grid-row: 1/3; grid-column: 2; color: var(--sun); font-size: 31px; font-weight: 850; line-height: 1; }.ar-alignment-countdown small { color: #bac7d6; font-size: 8px; }
.ar-edge-marker { position: absolute; z-index: 24; width: 58px; margin: -20px 0 0 -29px; text-align: center; pointer-events: none; text-shadow: 0 2px 5px #000; }.ar-edge-marker i { width: 0; height: 0; margin: 0 auto 3px; display: block; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid currentColor; transform: rotate(var(--edge-angle,0deg)); }.ar-edge-marker span { font-size: 9px; font-weight: 800; }.sun-edge { color: #ffd34f; }.moon-edge { color: #78e4f9; }
.ar-permission-card { position: absolute; z-index: 55; left: 50%; top: 46%; transform: translate(-50%,-50%); width: min(86%,390px); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(8,18,31,.94); padding: 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); }.ar-permission-card strong { font-size: 16px; }.ar-permission-card p { color: var(--muted); font-size: 11px; line-height: 1.5; }.ar-permission-card button { margin-top: 5px; }
.ar-bottom-panel { position: absolute; z-index: 38; left: 0; right: 0; bottom: calc(66px + var(--safe-bottom)); padding: 8px 10px 7px; background: linear-gradient(180deg,rgba(5,12,21,.05),rgba(5,12,21,.88) 18%,rgba(5,12,21,.96)); }
.ar-quick-toggles { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; margin-bottom: 6px; }.ar-quick-toggles button { height: 29px; min-width: 0; padding: 0 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(7,16,29,.62); color: #aebbc9; font-size: 9px; font-weight: 750; backdrop-filter: blur(8px); }.ar-quick-toggles button.active { background: rgba(93,213,242,.18); border-color: rgba(93,213,242,.68); color: #fff; }
.ar-timeline-window { position: relative; }.ar-timeline-window #arTimeline { width: 100%; height: 72px; display: block; border-radius: 9px; touch-action: none; cursor: ew-resize; }.ar-timeline-window .timeline-pointer { border-bottom-color: rgba(5,12,21,.96); }
.ar-time-button { width: 100%; min-height: 35px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 0; background: transparent; padding: 1px 6px 0; text-align: left; }.ar-time-button span { font-size: 11px; font-weight: 650; }.ar-time-button span:last-child { text-align: right; color: var(--light-phase-accent); }.ar-time-button strong { font-size: 18px; }
.ar-calibration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0 12px; }.ar-calibration-actions button:last-child { grid-column: 1/-1; color: #ff9b8a; }
.ar-calibration-status { display: grid; grid-template-columns: 1fr auto; gap: 7px 15px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.035); font-size: 11px; }.ar-calibration-status span { color: var(--muted); }.ar-help { margin-top: 14px; }

.section-header { min-height: calc(82px + var(--safe-top)); padding: calc(17px + var(--safe-top)) 20px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#101c2d,#0b1524); }
.section-header h2, .sheet header h2 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.03em; }.eyebrow { margin: 0; color: var(--moon); text-transform: uppercase; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.text-btn, .primary-small { min-width: 58px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); padding: 0 12px; font-size: 12px; }.primary-small { background: var(--blue); border-color: transparent; color: #07101d; font-weight: 750; }

.compass-screen { overflow-y: auto; background: radial-gradient(circle at 50% 38%, rgba(93,140,255,.18), transparent 40%), var(--bg); padding-bottom: 20px; }
.compass-copy { text-align: center; padding: 18px 25px 5px; }.compass-copy p { margin: 0; color: var(--muted); font-size: 12px; }.compass-copy strong { display: block; margin-top: 7px; font-size: 15px; }
.compass-wrap { display: grid; place-items: center; padding: 14px; }
.compass-dial { width: min(73vw,340px); aspect-ratio: 1; border-radius: 50%; position: relative; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(circle, rgba(22,38,59,.94) 0 36%, rgba(10,20,34,.95) 37% 68%, rgba(20,34,53,.95) 69%); box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.35); }
.compass-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); transition: transform .1s linear; }
.compass-ring > span { position: absolute; font-weight: 800; font-size: 13px; color: #aab7c8; }.compass-ring .north { top: 5px; left: 50%; transform: translateX(-50%); color: var(--sunset); }.east { right: 8px; top: 50%; transform: translateY(-50%); }.south { bottom: 5px; left: 50%; transform: translateX(-50%); }.west { left: 8px; top: 50%; transform: translateY(-50%); }
.tick { position: absolute; left: calc(50% - 1px); top: 2px; width: 2px; height: 9px; background: rgba(255,255,255,.35); transform-origin: 1px calc(50% - 2px); }.t45{transform:rotate(45deg)}.t90{transform:rotate(90deg)}.t135{transform:rotate(135deg)}.t180{transform:rotate(180deg)}.t225{transform:rotate(225deg)}.t270{transform:rotate(270deg)}.t315{transform:rotate(315deg)}
.bearing-needle { position: absolute; inset: 9%; border-radius: 50%; pointer-events: none; transition: transform .1s linear; }.bearing-needle span { position: absolute; top: 1%; left: calc(50% - 5px); width: 10px; height: 10px; transform: rotate(45deg); }.subject-needle span { background: var(--subject); box-shadow: 0 0 14px rgba(170,124,255,.8); }.sun-needle span { border-radius: 50%; background: var(--sun); box-shadow: 0 0 16px rgba(255,189,62,.9); }.moon-needle span { border-radius: 50%; background: var(--moon); box-shadow: 0 0 16px rgba(93,213,242,.9); }
.device-arrow { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: 22px; height: 35px; }.device-arrow span { display: block; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 26px solid #fff; filter: drop-shadow(0 2px 6px rgba(255,255,255,.25)); }
.compass-center { position: absolute; inset: 35%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgba(7,16,29,.8); border: 1px solid rgba(255,255,255,.12); }.compass-center strong { font-size: 26px; }.compass-center span { color: var(--muted); font-size: 10px; }
.compass-legend { display: flex; justify-content: center; gap: 20px; font-size: 11px; color: var(--muted); }.compass-legend span { display:flex;align-items:center;gap:6px}.compass-legend i { width:8px;height:8px;border-radius:50%; }.legend-subject{background:var(--subject)}.legend-sun{background:var(--sun)}.legend-moon{background:var(--moon)}
.compass-stats { margin: 18px 16px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.compass-stats article { padding: 13px 10px; text-align:center; border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}.compass-stats span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.compass-stats strong{display:block;margin-top:5px;font-size:15px}
.permission-card { margin: 16px; border-radius: 14px; border: 1px solid rgba(255,104,79,.3); background: rgba(255,104,79,.08); padding: 14px; }.permission-card p{color:var(--muted);font-size:12px;margin:5px 0 0}.compass-accuracy-warning{border-color:rgba(255,189,62,.35);background:rgba(255,189,62,.09)}

.plans-screen { overflow-y: auto; padding-bottom: 20px; }.plans-list { padding: 14px; display: grid; gap: 10px; }.plan-card { border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border-radius: 17px; padding: 15px; }.plan-card header { display:flex;justify-content:space-between;gap:10px}.plan-card h3{margin:0;font-size:16px}.plan-card time{color:var(--sun);font-size:11px}.plan-card p{margin:7px 0 0;color:var(--muted);font-size:11px}.plan-card footer{display:flex;gap:8px;margin-top:13px}.plan-card button{height:35px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:0 13px;font-size:11px}.plan-card .load-plan{background:var(--blue);color:#07101d;border-color:transparent;font-weight:750}.plan-card .delete-plan{margin-left:auto;color:#ff8d7b}
.empty-state { height: calc(100% - 100px); min-height: 380px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.empty-state h3{margin:22px 0 5px}.empty-state p{margin:0 0 20px;color:var(--muted);font-size:13px;max-width:310px;line-height:1.5}.empty-orbit{width:86px;height:86px;border-radius:50%;border:1px solid rgba(93,213,242,.3);position:relative;box-shadow:inset 0 0 30px rgba(93,140,255,.12)}.empty-orbit::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--sun);top:8px;right:5px;box-shadow:0 0 18px rgba(255,189,62,.6)}.empty-orbit::after{content:"";position:absolute;left:23px;top:23px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--moon),#1e5470)}

.primary-btn,.secondary-btn { min-height: 46px; border-radius: 13px; padding: 0 17px; border: 0; font-weight: 760; font-size: 13px; cursor:pointer}.primary-btn{background:linear-gradient(135deg,var(--moon),var(--blue));color:#06101e}.secondary-btn{background:rgba(255,255,255,.07);border:1px solid var(--line)}.full-btn{width:100%;margin-top:14px}

.sheet-backdrop { position:fixed;inset:0;z-index:1900;background:rgba(0,5,12,.66);backdrop-filter:blur(3px);animation:fadeIn .2s ease-out}.sheet { position:fixed;z-index:2000;left:0;right:0;bottom:0;max-height:min(78dvh,720px);overflow-y:auto;background:linear-gradient(180deg,#142235,#0b1524 55%);border-radius:24px 24px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0;padding:8px 18px calc(20px + var(--safe-bottom));box-shadow:0 -24px 70px rgba(0,0,0,.5);animation:sheetUp .28s cubic-bezier(.2,.85,.25,1)}.compact-sheet{max-height:min(62dvh,560px)}
.sheet-handle{width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 12px}.sheet header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.sheet .close-sheet{font-size:28px;color:var(--muted)}.sheet-help{color:var(--muted);font-size:12px;line-height:1.5;margin:-4px 0 16px}
.field{display:block;margin:12px 0}.field>span{display:block;margin:0 0 6px;color:#c5d0de;font-size:11px;font-weight:700}.field input,.field select{width:100%;height:48px;border-radius:13px;border:1px solid var(--line);background:#0a1422;color:#fff;padding:0 13px;font-size:14px}.field small{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:5px}.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.location-search>label{display:block;margin:0 0 7px;color:#c5d0de;font-size:11px;font-weight:700}.location-search-box{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;height:52px;padding:0 5px 0 13px;border:1px solid rgba(93,213,242,.32);border-radius:15px;background:#081321;box-shadow:0 0 0 0 rgba(93,213,242,0);transition:border-color .2s,box-shadow .2s}.location-search-box:focus-within{border-color:rgba(93,213,242,.85);box-shadow:0 0 0 3px rgba(93,213,242,.1)}.location-search-box svg{width:20px;height:20px;fill:none;stroke:var(--moon);stroke-width:1.8}.location-search-box input{min-width:0;height:48px;border:0;outline:0;background:transparent;color:#fff;font-size:14px}.location-search-box input::placeholder{color:#66778a}.location-search-box input::-webkit-search-cancel-button{filter:invert(1);opacity:.65}.location-search-box button{height:42px;min-width:70px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--moon),var(--blue));color:#06101e;font-size:12px;font-weight:800}.location-search-box button:disabled{opacity:.58}.search-status{min-height:17px;margin:8px 2px 5px;color:var(--muted);font-size:10px;line-height:1.5}.search-status.error{color:#ff9b8a}.search-status.success{color:#81e4bb}.search-results{display:grid;gap:7px;margin:8px 0 12px}.search-result{width:100%;min-height:60px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;text-align:left;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.search-result:active{background:rgba(93,213,242,.09);border-color:rgba(93,213,242,.55)}.search-result-pin{width:31px;height:31px;display:grid;place-items:center;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:rgba(255,104,79,.16);border:1px solid rgba(255,104,79,.55);color:var(--sunset)}.search-result-pin>i{width:7px;height:7px;border-radius:50%;background:currentColor;transform:rotate(45deg)}.search-result-copy{min-width:0}.search-result-copy strong,.search-result-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-copy strong{font-size:13px}.search-result-copy small{margin-top:4px;color:var(--muted);font-size:10px}.search-result-type{max-width:82px;color:#a7b8ca;font-size:9px;text-transform:capitalize;text-align:right}.recent-searches{margin:10px 0 12px;padding-top:10px;border-top:1px solid var(--line)}.sheet .recent-searches>header{min-height:28px;margin:0 0 5px}.recent-searches>header strong{font-size:11px}.recent-searches>header button{border:0;background:transparent;color:var(--moon);font-size:10px}.recent-searches>div{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.recent-searches>div::-webkit-scrollbar{display:none}.recent-place{max-width:190px;min-width:130px;height:37px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 12px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.045);color:#d7e0ea;font-size:10px}.coordinate-entry{margin-top:12px;padding:0 12px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.coordinate-entry summary{padding:13px 0;color:#b9c6d5;font-size:11px;font-weight:700;cursor:pointer}.coordinate-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.coordinate-fields .field{margin:0}.coordinate-entry .full-btn{margin-top:10px}.find-location-button{margin-top:10px}.search-attribution{margin:12px 0 0;text-align:center;color:#718296;font-size:9px}.search-attribution a{color:#91a8bd;text-decoration:underline}
.choice-list{display:grid;gap:9px}.choice-list>button{display:grid;grid-template-columns:50px 1fr 22px;gap:12px;align-items:center;text-align:left;min-height:65px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.035);padding:8px}.choice-list>button.active{border-color:rgba(93,213,242,.6);background:rgba(93,213,242,.07)}.choice-list strong,.choice-list small{display:block}.choice-list small{color:var(--muted);font-size:10px;margin-top:3px}.choice-list i{font-style:normal;color:var(--moon);opacity:0}.choice-list button.active i{opacity:1}.layer-preview{width:50px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.15)}.street-preview{background:linear-gradient(35deg,#25394b 47%,#9aaab3 48% 52%,#324d42 53%)}.satellite-preview{background:radial-gradient(circle at 30% 40%,#a59c68 0 7%,transparent 8%),linear-gradient(35deg,#274832,#1d2c3e 48%,#45614a)}.topo-preview{background:repeating-radial-gradient(ellipse at 30% 70%,#9cb589 0 2px,#4d6850 3px 8px)}
.switch-row{min-height:67px;display:grid;grid-template-columns:1fr 48px;gap:12px;align-items:center;border-bottom:1px solid var(--line);position:relative}.switch-row strong,.switch-row small{display:block}.switch-row strong{font-size:13px}.switch-row small{color:var(--muted);font-size:10px;margin-top:3px}.switch-row input{position:absolute;opacity:0}.switch-row>i{width:44px;height:25px;border-radius:20px;background:#26364a;position:relative;transition:.2s}.switch-row>i::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#a8b4c3;transition:.2s}.switch-row input:checked+i{background:var(--blue)}.switch-row input:checked+i::after{transform:translateX(19px);background:#fff}
.quick-times{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.quick-times button{height:40px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.05);font-size:11px}.save-summary{display:grid;gap:5px;padding:12px;border-radius:13px;background:rgba(255,255,255,.04);color:var(--muted);font-size:11px}.privacy-note{display:flex;gap:11px;padding:14px;margin-top:16px;border:1px solid rgba(83,215,162,.24);background:rgba(83,215,162,.06);border-radius:15px}.privacy-note svg{width:25px;height:25px;fill:none;stroke:var(--green);stroke-width:1.8}.privacy-note strong,.privacy-note small{display:block}.privacy-note small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.4}
.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.event-card{padding:13px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-align:left}.event-card:not(:disabled):active{border-color:rgba(93,213,242,.55);background:rgba(93,213,242,.08)}.event-card:disabled{opacity:.6}.event-card span{display:block;color:var(--muted);font-size:10px}.event-card strong{display:block;font-size:16px;margin-top:4px}.event-card small{display:block;color:#bfccdb;font-size:9px;margin-top:4px}.event-card.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center}
.object-height-field{margin-top:-2px;margin-bottom:16px}.subject-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}.subject-metrics article{min-height:82px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.subject-metrics span,.subject-metrics strong,.subject-metrics small{display:block}.subject-metrics span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.subject-metrics strong{margin-top:6px;font-size:14px}.subject-metrics small{margin-top:5px;color:#9eacbd;font-size:9px;line-height:1.3}.subject-metrics .sun-metric{border-color:rgba(255,189,62,.18)}.subject-metrics .moon-metric{border-color:rgba(93,213,242,.18)}.geometry-note{margin:13px 2px 0}
.alignment-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.alignment-fields .field:nth-child(3){grid-column:1/-1}.alignment-status{min-height:19px;margin:12px 2px 8px;color:#bdc9d7;font-size:10px;line-height:1.5}.alignment-results{display:grid;gap:7px}.alignment-result{width:100%;min-height:61px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);text-align:left}.alignment-result:active{border-color:rgba(93,213,242,.58);background:rgba(93,213,242,.08)}.alignment-result>span:last-child{text-align:right}.alignment-result strong,.alignment-result small{display:block}.alignment-result strong{font-size:12px}.alignment-result small{margin-top:4px;color:var(--muted);font-size:9px}

.toast{position:fixed;z-index:3000;left:50%;bottom:calc(82px + var(--safe-bottom));transform:translateX(-50%);max-width:min(88vw,420px);background:#e9f6ff;color:#06101e;border-radius:13px;padding:11px 15px;font-size:12px;font-weight:700;box-shadow:0 14px 40px rgba(0,0,0,.45);animation:toastIn .25s ease-out}.loading-overlay{position:fixed;z-index:4000;inset:0;background:#08111f;display:grid;place-content:center;text-align:center;transition:opacity .35s}.loading-overlay p{color:var(--muted);font-size:12px;margin-top:18px}.orbit-loader{width:54px;height:54px;border:1px solid rgba(93,213,242,.3);border-radius:50%;position:relative;animation:spin 1.2s linear infinite}.orbit-loader::after{content:"";position:absolute;top:2px;left:25px;width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 13px var(--sun)}.startup-error{width:min(84vw,390px);padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#101d2e;box-shadow:0 18px 55px rgba(0,0,0,.4)}.startup-error strong{display:block;font-size:16px}.startup-error p{overflow-wrap:anywhere;line-height:1.5}.startup-error button{min-width:120px;height:42px;margin-top:8px;border:0;border-radius:12px;background:var(--moon);color:#06101e;font-weight:780}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes spin{to{transform:rotate(360deg)}}

@media (orientation: landscape) and (max-height: 650px) {
  .planner-screen{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto minmax(0,1fr)}
  .topbar{grid-column:1/3;min-height:calc(56px + var(--safe-top));padding-top:calc(6px + var(--safe-top));padding-bottom:6px}.top-info-panel{grid-column:2;grid-row:2;height:86px;min-height:86px}.map-stage{grid-column:1;grid-row:2/4}.timeline-card{grid-column:2;grid-row:3;padding:9px}.map-actions{bottom:12px;grid-auto-flow:column}.pin-mode{top:10px}.history-actions{top:56px}.phase-caption{margin-left:0}.summary-row{grid-template-columns:39px 20px 1fr 20px 1fr;font-size:11px}.info-panel-page{padding-top:5px;padding-bottom:13px}.info-panel-page.sky-summary{padding-top:6px;padding-bottom:13px}.info-panel-arrow{top:20px}.compass-dial{width:min(47vh,290px)}.section-header{min-height:calc(64px + var(--safe-top));padding-top:calc(8px + var(--safe-top));padding-bottom:8px}
  .ar-topbar{right:auto;width:220px;background:linear-gradient(90deg,rgba(3,9,17,.82),transparent)}.ar-readout{left:225px;top:calc(8px + var(--safe-top));right:12px}.ar-bottom-panel{left:auto;width:330px;top:calc(61px + var(--safe-top));bottom:calc(66px + var(--safe-bottom));padding-top:12px;background:linear-gradient(90deg,rgba(5,12,21,.9),rgba(5,12,21,.97))}.ar-timeline-window #arTimeline{height:96px}.ar-quick-toggles{display:grid;grid-template-columns:1fr 1fr}.ar-time-button{margin-top:7px}.ar-accuracy{top:auto;bottom:calc(80px + var(--safe-bottom));left:12px;transform:none;width:min(48%,390px)}.ar-body-alignment{left:12px;bottom:calc(80px + var(--safe-bottom));transform:none;width:min(48%,420px)}
  .help-step-layout{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:start}.help-article{padding-top:16px}.help-intro{font-size:13px;padding:14px}.help-step{margin-top:16px}.help-step-copy>p{font-size:12px;margin-bottom:9px}.help-gesture-tip{margin-top:11px;padding:12px}.help-gesture-tip p{font-size:11px}.help-figure button>span{display:none}
}

@media (max-width: 380px) {
  .sky-summary{grid-template-columns:48px 1fr;gap:8px}.summary-row{grid-template-columns:40px 21px minmax(65px,1fr) 21px minmax(65px,1fr);font-size:11px}.phase-caption{margin-left:42px}.info-panel-page{padding-left:31px;padding-right:31px}.info-panel-page.sky-summary{padding-left:10px;padding-right:31px}.info-panel-metrics>div,.info-panel-metrics>label{padding-left:4px;padding-right:4px}.info-panel-metrics strong{font-size:10px}.date-time-main{grid-template-columns:1fr auto}.date-time-main span:last-child{display:none}.precision-step-buttons{top:36px}.timeline-precision{left:28px}.timeline-now{right:28px}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }

/* Browser/PWA camera layer. The existing AR SVG and controls remain above it. */
.ar-camera-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; background:#030811; }
.ar-camera-video[hidden] { display:none; }
.web-camera-active .ar-stage { background:#030811; }
.web-camera-active .ar-stage::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(rgba(5,12,21,.18),rgba(5,12,21,.04) 48%,rgba(5,12,21,.38)); }
.web-camera-active .ar-overlay { z-index:10; }


/* Create23 visual refinement v482
   Styling-only pass: preserve the existing planner layout, dimensions and controls. */
:root{
  --c23-green:#7FF454;
  --sun:#f2c65b;
  --sunset:#f27660;
  --moon:#78d6e8;
  --blue:#6f91f5;
  --subject:#9d82f3;
}

/* Sun / Moon summary: same two-row structure, more Create23-specific icon language. */
.summary-row .rise-icon,
.summary-row .set-icon{
  width:21px;
  height:21px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font-size:13px;
}
.sun-row .rise-icon{background:rgba(242,198,91,.96);color:#261d08}
.sun-row .set-icon{background:rgba(242,118,96,.96);color:#2b100b}
.moon-row .rise-icon{background:rgba(111,145,245,.96);color:#09132d}
.moon-row .set-icon{background:rgba(120,214,232,.96);color:#062128}
.phase-caption{color:#8d9caf}

/* Map pins: retain the same anchor footprint but use a circular locator + short pointer. */
.camera-pin,
.subject-pin{
  width:28px;
  height:28px;
  position:relative;
  border-radius:50%;
  transform:none;
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 5px 16px rgba(0,0,0,.48),0 0 0 2px rgba(6,14,25,.26);
}
.camera-pin::before,
.subject-pin::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:8px;
  height:8px;
  background:inherit;
  border-right:2px solid rgba(255,255,255,.96);
  border-bottom:2px solid rgba(255,255,255,.96);
  transform:translateX(-50%) rotate(45deg);
  border-radius:0 0 2px 0;
}
.camera-pin::after,
.subject-pin::after{
  width:7px;
  height:7px;
  position:relative;
  z-index:1;
  background:#fff;
  box-shadow:0 0 0 2px rgba(6,14,25,.12);
}

/* Same Camera / Subject control and location; active state is now brand-led. */
.pin-mode{border-color:rgba(255,255,255,.13);background:rgba(7,16,29,.92)}
.pin-mode button{border-radius:9px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.pin-mode button.active{
  background:rgba(127,244,84,.09);
  color:#fff;
  box-shadow:inset 0 -2px 0 rgba(127,244,84,.78);
}
.pin-dot{border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* Keep all map tools in place, only refine their visual treatment. */
.map-fab{
  border-radius:13px;
  border-color:rgba(255,255,255,.15);
  background:rgba(7,16,29,.92);
  box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
}
.map-fab:active{border-color:rgba(127,244,84,.55);background:rgba(17,34,28,.94)}
.light-phase-badge{border-radius:11px;border-color:rgba(255,255,255,.12)}
.light-phase-badge>i{border-radius:3px;box-shadow:0 0 10px var(--light-phase-accent)}
.history-actions{border-radius:9px}

/* Same timeline dimensions and controls; only the surface styling changes. */
#timeline{
  border-radius:8px;
  background:#081321;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.timeline-now,
.timeline-precision,
.precision-step-buttons{
  border-radius:7px;
  border-color:rgba(255,255,255,.16);
  background:rgba(6,15,27,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.timeline-precision.active{
  border-color:rgba(127,244,84,.48);
  background:rgba(127,244,84,.1);
  color:#f7fff3;
}

/* Keep weekday / timezone / time / date exactly where they are. */
.date-time-main{border-radius:9px}
.date-time-main:active{background:rgba(255,255,255,.035)}
.time-center small{color:#aebccb}
.mini-clock{
  background:#0a1625;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 2px rgba(127,244,84,.05),0 2px 8px rgba(0,0,0,.22);
}
.mini-clock::after{background:var(--c23-green);width:4px;height:4px}
#clockHand{background:#e8f3e3}

/* Keep the five-item navigation and all hit areas; change only the active treatment. */
.bottom-nav button{position:relative;transition:color .16s ease,background-color .16s ease}
.bottom-nav button.active{color:var(--c23-green)}
.bottom-nav button.active::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:20px;
  height:2px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--c23-green);
  box-shadow:0 0 10px rgba(127,244,84,.24);
}
.bottom-nav button:active{background:rgba(255,255,255,.025)}