:root{
  --bg:#061018;--panel:#0a1720;--panel2:#0e1d27;--line:#244050;--text:#f5f9fb;--muted:#8ea7b5;
  --cyan:#66d3ff;--green:#45d58a;--yellow:#f0ce56;--orange:#ff9f43;--red:#f05a62;--shadow:0 22px 70px rgba(0,0,0,.38);
  --safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#02080d;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}body{background:radial-gradient(circle at 50% -20%,#143549 0,#061018 36%,#03080c 72%);overflow-x:hidden}.shell{width:min(100%,620px);min-height:100dvh;margin:0 auto;background:linear-gradient(180deg,#07131b,#071019);position:relative;box-shadow:0 0 80px #0009}

/* Brand header: show the real LOTAR FARM mark at a readable size. */
.safety-shell{height:78px;padding:calc(6px + var(--safe-top)) 10px 6px;display:grid;grid-template-columns:minmax(112px,132px) minmax(76px,1fr) auto;gap:7px;align-items:center;position:sticky;top:0;z-index:30;background:#07131bf2;border-bottom:1px solid #1d3441;backdrop-filter:blur(18px)}.brand-block{display:flex;align-items:center;min-width:0;overflow:visible}.brand-logo{width:132px;height:67px;display:block;object-fit:contain;object-position:left center;background:#fff;border:1px solid #203844;border-radius:8px;padding:0;box-shadow:0 4px 14px #0004}.brand-copy{display:none!important}.location-chip{justify-self:center;max-width:164px;display:flex;align-items:center;gap:6px;border:1px solid #315769;background:#0a1c26;color:#e8f4f8;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.location-chip #locationText{overflow:hidden;text-overflow:ellipsis}.pin-dot{width:8px;height:8px;flex:0 0 auto;border:2px solid #6fd4ff;border-radius:50%;box-shadow:0 0 0 4px #6fd4ff14}.top-actions{display:flex;align-items:center;gap:6px}.compass-wrap{display:grid;place-items:center;line-height:1}.compass{width:38px;height:38px;border-radius:50%;border:1px solid #476273;background:radial-gradient(circle,#102532,#07131b);display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 4px #0b1d27}.compass .needle{font-size:16px;color:#78d8ff;transform-origin:50% 55%;transition:transform .35s ease}.compass .north{position:absolute;top:2px;font-size:6px;color:#a9c0cc}.compass-wrap small{font-size:6px;color:var(--muted);margin-top:2px}.sos-mini{height:38px;width:42px;border-radius:13px;border:1px solid #9d4047;background:#42191f;color:#ffd9dc;font-weight:900;font-size:11px;box-shadow:0 0 0 0 rgba(240,90,98,.3)}

@media(max-width:460px){.safety-shell{height:74px;padding-inline:7px;grid-template-columns:105px minmax(66px,1fr) auto;gap:5px}.brand-logo{width:105px;height:54px;border-radius:7px}.location-chip{max-width:94px;padding:6px 7px;font-size:8px}.top-actions{gap:4px}.compass{width:36px;height:36px}.sos-mini{width:39px;height:36px;font-size:10px}}
@media(max-width:365px){.safety-shell{grid-template-columns:92px minmax(58px,1fr) auto;padding-inline:5px}.brand-logo{width:92px;height:47px}.location-chip{max-width:78px;padding:5px 6px;font-size:7px}.pin-dot{width:7px;height:7px}.compass{width:34px;height:34px}.sos-mini{width:37px;height:34px;font-size:9px}}