:root{color-scheme:dark;--bg:#041020;--surface:rgba(12,34,57,.88);--surface2:rgba(18,48,76,.78);--line:rgba(110,195,255,.42);--text:#f4f8ff;--muted:#b9cfe5;--green:#7dff69;--blue:#69c8ff;--gold:#ffd85a;--purple:#b9a0ff;--danger:#ff6678;--radius:20px}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;overflow-x:hidden}body{overscroll-behavior:none}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.app{min-height:100dvh;background:radial-gradient(circle at 50% 12%,#123d60 0,transparent 38%),linear-gradient(180deg,#061528,#071c31 65%,#041020)}
.topbar{height:clamp(66px,9dvh,82px);position:relative;z-index:20;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:calc(env(safe-area-inset-top) + 5px) 12px 5px;background:rgba(4,14,27,.42);backdrop-filter:blur(16px)}
.brand{text-align:center;min-width:0}.brand h1{margin:0;font-size:clamp(23px,6vw,31px);line-height:1.05;letter-spacing:-.5px}.brand p{margin:3px 0 0;color:#bdd8ef;font-size:13px}.icon-btn,.back-btn{width:44px;height:44px;border-radius:50%;background:rgba(17,49,78,.7);border:1px solid var(--line);display:grid;place-items:center;font-size:22px}.icon-btn.small{width:42px;height:42px}
main{width:min(100%,780px);margin:auto;padding:5px 12px calc(14px + env(safe-area-inset-bottom))}.view{display:none;animation:fade .18s ease}.view.active{display:block}@keyframes fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.home-view{height:calc(100dvh - clamp(66px,9dvh,82px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);overflow:hidden;display:none}.home-view.active{display:flex;flex-direction:column}
.globe-card{position:relative;flex:0 0 min(58dvh,520px);width:min(100%,520px);height:min(58dvh,520px);margin:0 auto 10px;border-radius:50%;overflow:hidden;background:#020b15;box-shadow:0 0 42px rgba(65,190,255,.26),inset 0 0 32px rgba(90,220,255,.12);touch-action:none}
.globe-host{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:50%}.globe-host canvas{display:block;width:100%!important;height:100%!important}.globe-waiting{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;min-width:max-content;color:#dcecff;font-size:14px;font-weight:700;text-shadow:0 2px 12px #000;pointer-events:none}.globe-waiting.hidden{display:none}
.location-glow{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--green);border:3px solid rgba(235,255,230,.95);box-shadow:0 0 0 6px rgba(125,255,105,.2),0 0 20px 7px rgba(125,255,105,.75)}.globe-status{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:999px;background:rgba(2,13,24,.52);border:1px solid rgba(130,205,255,.2);color:#c9def0;font-size:10px;pointer-events:none;backdrop-filter:blur(8px)}
.globe-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#bcd5e9;background:radial-gradient(circle,#0c2e47,#020b15);font-weight:700;padding:25px}.globe-fallback small{font-weight:500;color:#8faec7}
.earth-marker{display:flex;align-items:center;gap:9px;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-shadow:0 2px 10px #000;filter:drop-shadow(0 0 8px rgba(125,255,105,.45))}.earth-marker-dot{width:17px;height:17px;border-radius:50%;background:#7dff69;border:3px solid #efffe9;box-shadow:0 0 0 6px rgba(125,255,105,.2),0 0 20px 7px rgba(125,255,105,.8);flex:0 0 17px}.earth-marker-copy{display:flex;flex-direction:column;line-height:1.05;background:transparent!important;padding:0!important;border:0!important;backdrop-filter:none!important}.earth-marker-copy b{font-size:15px}.earth-marker-copy strong{font-size:14px;margin-top:3px}.earth-marker-copy small{font-size:11px;color:#d6e9f8;margin-top:3px}
.home-grid{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:9px}.home-card{min-height:78px;padding:10px;display:grid;grid-template-columns:42px 1fr 18px;gap:7px;align-items:center;text-align:left;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.2)}.home-card:active{transform:scale(.985)}.home-card b{display:block;font-size:17px;line-height:1.05}.home-card small{display:block;color:var(--muted);margin-top:4px;font-size:11px}.home-card strong{font-size:28px;color:#bfe8ff}.home-icon{font-size:30px;text-align:center}.home-card.position{border-color:rgba(125,255,105,.68);background:linear-gradient(135deg,rgba(13,73,48,.9),rgba(12,40,58,.88))}.home-card.position .home-icon,.home-card.position strong{color:var(--green)}.home-card.gps{border-color:rgba(100,190,255,.62);background:linear-gradient(135deg,rgba(10,50,90,.9),rgba(12,39,65,.88))}.home-card.gps .home-icon,.home-card.gps strong{color:var(--blue)}.home-card.address{border-color:rgba(255,216,77,.62);background:linear-gradient(135deg,rgba(73,54,16,.9),rgba(39,39,34,.88))}.home-card.address .home-icon,.home-card.address strong{color:var(--gold)}.home-card.weather{border-color:rgba(187,161,255,.62);background:linear-gradient(135deg,rgba(45,32,89,.9),rgba(28,31,65,.88))}.home-card.weather .home-icon,.home-card.weather strong{color:var(--purple)}
body.detail-mode .topbar{display:none}body.detail-mode main{padding-top:env(safe-area-inset-top)}body.detail-mode .page-head{margin-top:0}
.page-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin:5px 0 12px;position:sticky;top:0;z-index:10;padding:6px 0;background:rgba(6,20,35,.94);backdrop-filter:blur(14px)}.page-head h2{margin:0;font-size:27px}.page-head p{margin:2px 0;color:var(--muted);font-size:13px}.back-btn{font-size:35px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.22);padding:16px;margin-bottom:12px}.position-hero{display:grid;grid-template-columns:145px 1fr;gap:16px;align-items:center}.mini-globe{aspect-ratio:1;border-radius:50%;overflow:hidden;background:#06111c;position:relative;touch-action:none}.mini-globe canvas{display:block;width:100%!important;height:100%!important}.hero-location b{display:block;font-size:20px}.hero-location strong{display:block;font-size:20px;margin:9px 0}.hero-location span{color:var(--muted);font-size:13px}
.data-grid,.weather-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.data-card{padding:14px;border-radius:17px;background:var(--surface2);border:1px solid rgba(140,210,255,.22);min-height:76px}.data-card label{display:block;color:#b9cee0;font-size:12px;margin-bottom:5px}.data-card b{font-size:17px;overflow-wrap:anywhere}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-title span{color:var(--muted);font-size:11px}.saved-scroll{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;scrollbar-width:none}.saved-scroll::-webkit-scrollbar{display:none}.saved-card{flex:0 0 150px;min-height:82px;text-align:left;padding:12px;border-radius:16px;background:rgba(7,25,40,.72);border:1px solid rgba(120,205,255,.22)}.saved-card b{display:block}.saved-card small{display:block;color:var(--muted);margin-top:6px}.empty-saved{color:var(--muted);font-size:13px;padding:10px 2px}
.action-bar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:15;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:8px;border-radius:20px;background:rgba(4,14,24,.9);border:1px solid rgba(130,205,255,.22);backdrop-filter:blur(18px)}.action{min-height:46px;border-radius:13px;background:#17334d;border:1px solid rgba(130,205,255,.2);font-size:12px;font-weight:800}.action.primary{background:#245d35;color:#b9ffab;border-color:#6df15d}.action.danger{color:#ff9aa6}
.compass-panel{text-align:center}.compass-frame{display:grid;place-items:center;padding:15px}.compass-ring{position:relative;width:min(290px,78vw);aspect-ratio:1;border-radius:50%;border:2px solid #76d5ff;box-shadow:0 0 30px rgba(90,200,255,.15),inset 0 0 25px rgba(90,200,255,.1);display:grid;place-items:center;transition:transform 120ms linear;will-change:transform}.compass-dial{position:absolute;inset:0;transform:rotate(0deg);will-change:transform}.compass-dial>span{position:absolute;font-weight:800;font-size:18px}.compass-dial>span:nth-child(1){top:13px;left:50%;transform:translateX(-50%);color:#ff6c79}.compass-dial>span:nth-child(2){right:14px;top:50%;transform:translateY(-50%)}.compass-dial>span:nth-child(3){bottom:13px;left:50%;transform:translateX(-50%)}.compass-dial>span:nth-child(4){left:14px;top:50%;transform:translateY(-50%)}.compass-center{display:grid;place-items:center;position:relative;z-index:2;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(18,55,82,.68),rgba(4,19,34,.28) 72%,transparent 73%);transition:none}.compass-center b{display:block;font-size:35px}.compass-center small{color:var(--muted);font-size:16px}.wide-btn{width:100%;min-height:46px;border-radius:14px;background:#174362;border:1px solid rgba(120,205,255,.35);font-weight:700}
.address-text{font-size:17px;line-height:1.45;white-space:pre-wrap;min-height:110px}.status-line{color:var(--muted);font-size:12px;margin-bottom:10px}.detail-lines{display:grid;gap:8px}.detail-lines div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(150,210,255,.12);padding:7px 0}.weather-hero{display:flex;align-items:center;justify-content:space-between;min-height:130px}.big-temp{font-size:52px;font-weight:800;color:var(--gold);display:block}.weather-hero div span:nth-child(2){font-size:22px;display:block}.weather-hero small{display:block;color:var(--muted);margin-top:6px}.weather-icon{font-size:58px}.weather-grid{grid-template-columns:repeat(2,1fr)}.weather-card{min-height:92px;padding:13px;border-radius:17px;background:var(--surface2);border:1px solid rgba(140,210,255,.25);text-align:left}.weather-card label{display:block;color:#b9cee0;font-size:12px}.weather-card b{display:block;font-size:18px;margin-top:6px}.weather-card small{color:var(--muted)}.weather-tabs{display:flex;gap:7px;overflow-x:auto;margin:12px 0 4px;padding-bottom:4px}.weather-tabs button{flex:0 0 auto;padding:11px 18px;border-radius:999px;background:#17334d;border:1px solid rgba(120,205,255,.25)}.weather-tabs .active{background:#1765a3;border-color:#67caff}
@media(max-width:520px){main{padding-left:8px;padding-right:8px}.home-card{min-height:76px}.home-card b{font-size:16px}.home-card small{font-size:10.5px}.home-icon{font-size:28px}.position-hero{grid-template-columns:110px 1fr}.data-card b{font-size:16px}.earth-marker-copy b{font-size:14px}.earth-marker-copy strong{font-size:13px}.earth-marker-copy small{font-size:10px}}
@media(max-height:720px){.topbar{height:64px}.home-view{height:calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 6px)}.globe-card{flex-basis:min(52dvh,430px);height:min(52dvh,430px);margin-bottom:7px}.home-grid{gap:7px}.home-card{min-height:68px;padding:8px}.home-card b{font-size:15px}.home-card small{margin-top:2px;font-size:10px}.home-icon{font-size:25px}.globe-status{bottom:5px}}

/* Compass rotates as a frame/scale, with no needle. */
.compass-ring{overflow:hidden}



.compass-center{position:relative;z-index:2;display:grid;place-items:center;width:45%;aspect-ratio:1;border-radius:50%;background:rgba(5,24,43,.42);backdrop-filter:blur(2px)}
@media(max-width:520px){.globe-card{width:min(100%,calc(100vw - 18px));max-height:calc(100dvh - 290px)}}

/* Compass dial rotates; center degree/direction remain upright. */
.compass-ring{overflow:hidden}
.compass-dial{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);transition:transform .12s linear;will-change:transform}
.compass-dial>span{position:absolute;font-weight:800;font-size:18px}
.compass-dial>span:nth-child(1){top:13px;left:50%;transform:translateX(-50%);color:#ff6c79}.compass-dial>span:nth-child(2){right:14px;top:50%;transform:translateY(-50%)}.compass-dial>span:nth-child(3){bottom:13px;left:50%;transform:translateX(-50%)}.compass-dial>span:nth-child(4){left:14px;top:50%;transform:translateY(-50%)}
.compass-center{transform:none!important}
.earth-marker-copy{background:rgba(2,14,25,.58);padding:5px 7px;border-radius:10px;backdrop-filter:blur(6px)}

/* Globe viewport: always a true circular clipping surface. */
.globe-card,.globe-host{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.globe-host{touch-action:none}
.globe-host canvas{border-radius:50%;overflow:hidden}

.earth-marker{background:transparent!important}.earth-marker-dot{transform:translateZ(0)}

/* Final mobile globe sizing: keep the complete circular globe inside the Home composition. */
.globe-card{
  flex:0 0 min(56dvh,460px);
  width:min(100%,460px);
  height:min(56dvh,460px);
  max-width:460px;
  max-height:460px;
  margin:0 auto 10px;
}
.globe-host{width:100%;height:100%;max-width:100%;max-height:100%}
.globe-status{bottom:10px;z-index:5;font-size:11px;white-space:nowrap}
@media(max-width:520px){
  .globe-card{
    width:min(calc(100vw - 24px),460px);
    height:min(calc(100vw - 24px),460px);
    flex-basis:min(calc(100vw - 24px),460px);
    max-height:none;
  }
}
@media(max-height:720px){
  .globe-card{
    width:min(calc(100vw - 24px),400px);
    height:min(calc(100vw - 24px),400px);
    flex-basis:min(calc(100vw - 24px),400px);
    max-height:none;
  }
}

/* GPS marker anchor: Globe.gl's lat/lng must sit exactly under the green dot, not the center of the text label. */
.earth-marker{
  transform:translate(0,-50%) !important;
  transform-origin:left center;
}