:root{
  --bg:#07110f;--panel:#0d1a17;--panel2:#11231e;--line:#1d342e;
  --text:#f4faf7;--muted:#8da79e;--green:#67f7a7;--green2:#19d878;
  --amber:#f4c95d;--red:#ff796f;--shadow:0 18px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{min-height:100vh;background:
radial-gradient(circle at 90% 0%,rgba(44,219,132,.12),transparent 28%),
linear-gradient(180deg,#081411,#07110f)}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{max-width:760px;margin:auto;min-height:100vh;padding-bottom:92px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 10px;position:sticky;top:0;z-index:5;background:rgba(7,17,15,.82);backdrop-filter:blur(16px)}
.brand{display:flex;gap:10px;align-items:center}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--green);color:#03110a;font-weight:900;display:grid;place-items:center;letter-spacing:-1px}
.brand-name{font-weight:800}.brand-sub{font-size:11px;color:var(--muted)}
.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);width:40px;height:40px;border-radius:12px;font-size:20px}
.page{padding:20px 18px 30px}
.hero{padding:24px 2px 18px}.hero h1,.page-head h1{margin:5px 0 10px;line-height:1.02;letter-spacing:-2px}
.hero h1{font-size:42px}.hero h1 span{color:var(--green)}.hero p{color:var(--muted);line-height:1.55;max-width:560px}
.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--green);font-weight:800}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.highlight-card{overflow:hidden;position:relative}.highlight-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(103,247,167,.08);right:-80px;top:-80px}
.card-topline,.page-head,.section-head,.big-score-row,.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.card h2,.modal h2{margin:4px 0}.muted{color:var(--muted);font-size:13px}
.score-pill{font-weight:800;font-size:12px;padding:7px 10px;border-radius:99px;background:rgba(103,247,167,.1);color:var(--green)}
.big-score-row{padding:20px 0}.big-score{font-size:58px;line-height:.9;font-weight:900;letter-spacing:-4px}.condition-label{font-weight:800;font-size:18px;color:var(--green)}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px}
.metric{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:12px}.metric span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.metric strong{font-size:16px}
.primary{width:100%;border:0;background:var(--green);color:#04120b;font-weight:900;padding:14px 16px;border-radius:14px}.primary.compact{width:auto;padding:10px 13px}
.section-head{margin:25px 2px 10px}.section-head h3{margin:0}.text-btn{border:0;background:none;color:var(--green);font-weight:700}
.stack{display:grid;gap:10px}
.track-row{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.track-row:hover{border-color:#315c4d}.track-main{display:flex;align-items:center;gap:12px}.track-icon{width:42px;height:42px;border-radius:13px;background:rgba(103,247,167,.08);display:grid;place-items:center;color:var(--green);font-size:20px}.track-name{font-weight:800}.track-meta{color:var(--muted);font-size:12px;margin-top:3px}.mini-score{font-weight:900;font-size:16px}
.search,input,select{width:100%;background:#0a1714;border:1px solid var(--line);color:var(--text);border-radius:13px;padding:13px;outline:none}.search{margin:5px 0 14px}.search:focus,input:focus,select:focus{border-color:#4f977c}
label{display:block;color:var(--muted);font-size:12px;margin-bottom:13px}label input,label select{margin-top:7px;color:var(--text)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.subhead{font-weight:800;margin:17px 0 11px}
.result-card{text-align:center}.result-wind{font-size:46px;font-weight:900;letter-spacing:-2px;color:var(--green);margin:10px 0 2px}.result-title{font-size:22px;font-weight:900}.result-details{margin-top:15px;text-align:left}
.bar{height:9px;border-radius:99px;background:#172923;overflow:hidden;margin-top:6px}.bar>span{display:block;height:100%;background:var(--green);border-radius:99px}
.split-list{display:grid;gap:7px;margin-top:12px}.split{display:grid;grid-template-columns:90px 1fr 58px;align-items:center;gap:8px;font-size:12px}.split .bar{margin:0}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#08130f;border:1px solid var(--line);padding:12px;border-radius:12px;margin-top:14px;color:#b8d3c8}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;max-width:760px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(7,17,15,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:10}
.nav-item{background:none;border:0;color:var(--muted);display:grid;gap:3px;place-items:center}.nav-item span{font-size:19px}.nav-item small{font-size:10px}.nav-item.active{color:var(--green)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:20;display:grid;place-items:end center;padding:12px}.hidden{display:none}.modal{background:#0b1815;border:1px solid var(--line);width:min(620px,100%);border-radius:25px 25px 18px 18px;padding:20px;max-height:92vh;overflow:auto}
.orientation-box{border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:10px}.orientation-copy{display:grid;gap:3px}.orientation-copy span,.hint{font-size:12px;color:var(--muted);line-height:1.5}
.compass{width:180px;height:180px;border:1px solid #315148;border-radius:50%;margin:18px auto;position:relative;background:radial-gradient(circle,#10231d 0,#0b1714 68%)}
.north,.east,.south,.west{position:absolute;font-size:11px;font-weight:800;color:var(--muted)}.north{top:8px;left:50%;transform:translateX(-50%)}.south{bottom:8px;left:50%;transform:translateX(-50%)}.east{right:9px;top:50%;transform:translateY(-50%)}.west{left:9px;top:50%;transform:translateY(-50%)}
.needle{position:absolute;left:50%;top:50%;width:4px;height:64px;background:var(--green);border-radius:4px;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(180deg)}.needle:before{content:"";position:absolute;top:-7px;left:-5px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--green)}
.centre-dot{width:10px;height:10px;background:var(--text);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.orientation-readout{display:flex;justify-content:center;gap:10px;font-size:17px;margin-top:8px}.orientation-readout span{color:var(--green);font-weight:900}
input[type=range]{padding:0;accent-color:var(--green)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#eafaf2;color:#07110f;padding:10px 14px;border-radius:999px;font-weight:800;font-size:12px;z-index:40;box-shadow:var(--shadow)}
@media(min-width:700px){.hero h1{font-size:56px}.page{padding-left:26px;padding-right:26px}}

body.modal-open{overflow:hidden}
@media(max-width:699px){.modal-backdrop{padding:0;place-items:stretch}.modal{width:100%;height:100dvh;max-height:none;border-radius:0;padding:calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal-head{position:sticky;top:calc(-14px - env(safe-area-inset-top));z-index:100;background:#0b1815;padding:14px 0 10px;margin-bottom:4px}.modal #map{height:min(48vh,430px)}}