.hst-app{--hst-brand:#176b4d;--hst-ink:#14231d;--hst-muted:#6c7a73;--hst-line:#dfe8e3;--hst-soft:#f5faf7;direction:rtl;color:var(--hst-ink);max-width:1180px;margin:0 auto;padding:18px 0 40px}.hst-app *{box-sizing:border-box}.hst-head{display:flex;gap:14px;align-items:center;padding:20px;border:1px solid var(--hst-line);border-radius:22px;background:linear-gradient(145deg,#fff,#f7fbf9)}.hst-head h1{margin:4px 0 7px;font-size:clamp(24px,4vw,38px)}.hst-head p{margin:0;color:var(--hst-muted);line-height:1.9}.hst-head span{font-size:12px;color:var(--hst-brand);font-weight:900}.hst-icon{width:54px;height:54px;border-radius:16px;background:#e9f5ef;color:var(--hst-brand);display:grid;place-items:center;font-size:26px;flex:none}.hst-privacy,.hst-status{margin-top:12px;padding:11px 14px;border-radius:13px;background:var(--hst-soft);border:1px solid var(--hst-line);font-size:12px;color:var(--hst-muted)}.hst-privacy b{color:var(--hst-brand);margin-left:8px}.hst-status.is-error{background:#fff2ef;border-color:#f1c9bf;color:#9b3323}.hst-status.is-ok{background:#eefaf3;border-color:#cbe8d7;color:#176b4d}.hst-grid{display:grid;gap:14px;margin-top:14px}.hst-grid-2{grid-template-columns:1fr 1fr}.hst-panel{margin-top:14px;padding:18px;border:1px solid var(--hst-line);border-radius:20px;background:#fff;box-shadow:0 8px 28px rgba(27,72,53,.04)}.hst-grid>.hst-panel{margin-top:0}.hst-panel h2{font-size:18px;margin:0 0 14px}.hst-field{display:grid;gap:6px;margin:10px 0}.hst-field span{font-size:12px;font-weight:800;color:#435249}.hst-field input,.hst-field select{width:100%;min-height:48px;border:1px solid #ccd9d2;border-radius:12px;background:#fff;color:var(--hst-ink);padding:0 12px;font:inherit}.hst-field input[type=range]{min-height:32px;padding:0;border:0}.hst-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.hst-btn{border:1px solid #cfdcd5;background:#fff;color:var(--hst-ink);border-radius:12px;min-height:44px;padding:0 14px;font:inherit;font-weight:800;cursor:pointer}.hst-btn.is-primary{background:var(--hst-brand);border-color:var(--hst-brand);color:#fff}.hst-btn:disabled{opacity:.55;cursor:not-allowed}.hst-big-value{text-align:center;padding:18px}.hst-big-value b{display:block;font-size:clamp(36px,7vw,64px);line-height:1.2}.hst-big-value small{color:var(--hst-muted)}.hst-mini-grid,.hst-live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hst-mini-grid>div,.hst-live-grid>div{padding:12px;border:1px solid var(--hst-line);border-radius:13px;background:var(--hst-soft);display:grid;gap:4px}.hst-mini-grid span,.hst-live-grid small{font-size:11px;color:var(--hst-muted)}.hst-mini-grid b,.hst-live-grid b{font-size:16px}.hst-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hst-live-main{grid-column:span 2;background:linear-gradient(145deg,#0d5d42,#187653)!important;color:#fff!important}.hst-live-main b{font-size:42px!important}.hst-live-main small,.hst-live-main span{color:#d9efe5!important}.hst-coordinates{display:grid;gap:8px;margin-top:14px}.hst-coordinates code{display:block;direction:ltr;text-align:left;padding:10px;border-radius:10px;background:#f5f7f8;overflow:auto}.hst-compass{position:relative;width:min(390px,88vw);aspect-ratio:1;margin:auto;border:1px solid var(--hst-line);border-radius:50%;background:radial-gradient(circle at center,#fff 0 53%,#f5faf7 54% 68%,#fff 69%);box-shadow:inset 0 0 0 10px #fff,0 14px 36px #173b2b12;overflow:hidden}
.hst-compass-face{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);transition:transform .12s linear;will-change:transform}
.hst-compass-ring{position:absolute;inset:7%;border:2px dashed #b8cbc0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#91aa9d 0 1deg,transparent 1deg 10deg);mask:radial-gradient(circle,transparent 0 79%,#000 80%)}
.hst-cardinal{position:absolute;font-size:12px;font-weight:900;color:#35584b;z-index:2;line-height:1}
.hst-cardinal-n{top:8%;left:50%;transform:translateX(-50%);color:#c52c2c}
.hst-cardinal-s{bottom:8%;left:50%;transform:translateX(-50%)}
.hst-cardinal-e{right:8%;top:50%;transform:translateY(-50%)}
.hst-cardinal-w{left:8%;top:50%;transform:translateY(-50%)}
.hst-forward-pointer{position:absolute;top:2.5%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid #183d31;z-index:5;filter:drop-shadow(0 2px 3px #0002)}
.hst-needle,.hst-bearing-marker{position:absolute;left:50%;top:50%;transform-origin:50% 100%;width:4px;height:36%;border-radius:999px;background:#c92d2d;transform:translate(-50%,-100%) rotate(0deg);z-index:3}
.hst-needle:after{content:"";position:absolute;left:0;top:50%;width:100%;height:50%;background:#1e6b50;border-radius:999px}
.hst-bearing-marker{height:43%;width:4px;background:#d89b18;z-index:4;transition:transform .12s linear;will-change:transform}
.hst-bearing-marker span{position:absolute;top:-23px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:900;color:#8b6100;background:#fff5cf;border:1px solid #ecd68d;border-radius:999px;padding:3px 7px;white-space:nowrap}
.hst-compass-center{position:absolute;inset:34%;z-index:6;border-radius:50%;background:#fff;border:1px solid var(--hst-line);display:grid;place-content:center;text-align:center;box-shadow:0 8px 25px #173b2b16}
.hst-compass-center b{font-size:28px}.hst-compass-center small{color:var(--hst-muted)}
.hst-qibla-turn,.hst-compass-quality{padding:10px 12px;border-radius:12px;background:#f6faf8;color:#52675d!important;font-size:12px!important;line-height:1.8!important}
.hst-level{position:relative;width:min(390px,88vw);aspect-ratio:1;margin:auto;border:1px solid var(--hst-line);border-radius:50%;background:radial-gradient(circle,#f8fcfa 0 10%,#fff 11% 46%,#eef6f2 47% 48%,#fff 49%);overflow:hidden}.hst-level-cross:before,.hst-level-cross:after{content:"";position:absolute;background:#d8e4de}.hst-level-cross:before{left:50%;top:10%;bottom:10%;width:1px}.hst-level-cross:after{top:50%;left:10%;right:10%;height:1px}.hst-bubble{position:absolute;width:34px;height:34px;border-radius:50%;background:#26a768;box-shadow:0 6px 14px #176b4d38;left:calc(50% - 17px);top:calc(50% - 17px);transition:.09s linear}.hst-angle-hand{position:absolute;left:50%;top:50%;height:42%;width:3px;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);background:#e09a20;border-radius:999px}.hst-ruler-controls{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.hst-ruler{overflow:auto;padding:22px 8px 34px;border:1px solid var(--hst-line);border-radius:14px;background:#fbfdfc}.hst-ruler-track{position:relative;width:2000px;height:84px;border-bottom:2px solid var(--hst-ink);background:repeating-linear-gradient(90deg,var(--hst-ink) 0 1px,transparent 1px 5px);background-size:5px 12px;background-position:bottom}.hst-ruler-track:before{content:'0        1        2        3        4        5        6        7        8        9        10        11        12        13        14        15        16        17        18        19        20';white-space:pre;position:absolute;bottom:-25px;left:0;font-size:11px;direction:ltr;letter-spacing:13px}.hst-camera-stage{position:relative;min-height:360px;border-radius:18px;overflow:hidden;background:#101715;display:grid;place-items:center}.hst-camera-stage video,.hst-camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.hst-camera-stage canvas{z-index:2;touch-action:none}.hst-camera-empty{color:#dce7e2;text-align:center;display:grid;gap:7px;padding:30px}.hst-camera-empty span{font-size:12px;color:#9eb2a8}.hst-meter-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.hst-meter-steps span{font-size:10px;padding:7px;border-radius:9px;background:#f2f5f3;color:#748179;text-align:center}.hst-meter-steps span.is-active{background:#e5f5ec;color:var(--hst-brand);font-weight:900}.hst-file-btn{display:inline-flex;align-items:center;position:relative;overflow:hidden}.hst-file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.hst-meter-result{margin-top:12px;padding:15px;border-radius:15px;background:#f4faf7;display:grid;text-align:center}.hst-meter-result b{font-size:32px}.hst-meter-result small{color:var(--hst-muted);margin-top:5px}.hst-sun-arc{display:grid;grid-template-columns:1fr auto 46px 1fr auto;align-items:center;gap:8px;padding:14px;border-radius:15px;background:linear-gradient(180deg,#eef6ff,#fff8e5)}.hst-sun-arc i{font-style:normal;font-size:30px}.hst-moon-result{text-align:center}.hst-moon{width:140px;height:140px;border-radius:50%;margin:8px auto 4px;background:#f3e9bb;box-shadow:inset -45px 0 #18232d,0 10px 26px #0002}.hst-control-panel p,.hst-panel>p{line-height:1.9;color:var(--hst-muted)}
@media(max-width:760px){.hst-app{padding:10px 0 28px}.hst-head{align-items:flex-start;padding:16px;border-radius:17px}.hst-icon{width:44px;height:44px}.hst-grid-2{grid-template-columns:1fr}.hst-panel{padding:14px;border-radius:16px}.hst-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hst-live-main{grid-column:1/-1}.hst-mini-grid{grid-template-columns:1fr 1fr}.hst-actions{display:grid;grid-template-columns:1fr 1fr}.hst-actions .hst-btn:first-child{grid-column:1/-1}.hst-btn{min-height:48px}.hst-ruler-controls{grid-template-columns:1fr}.hst-camera-stage{min-height:56vw;max-height:480px}.hst-meter-steps{grid-template-columns:1fr 1fr}.hst-compass,.hst-level{width:min(330px,86vw)}}
@media(max-width:430px){.hst-head h1{font-size:22px}.hst-head p{font-size:12px}.hst-live-grid,.hst-mini-grid{grid-template-columns:1fr 1fr}.hst-live-main b{font-size:36px!important}.hst-actions{grid-template-columns:1fr}.hst-actions .hst-btn:first-child{grid-column:auto}.hst-camera-stage{min-height:70vw}.hst-sun-arc{grid-template-columns:1fr auto 34px 1fr auto;font-size:11px}}


/* v17.9.0 — professional sensor confidence + travel UX */
.hst-quality-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0}
.hst-quality-row>span:not(.hst-quality-badge){font-size:11px;color:var(--hst-muted)}
.hst-quality-badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid transparent;white-space:nowrap}
.hst-quality-badge.is-good{background:#eaf8f0;border-color:#b8dfc8;color:#147548}
.hst-quality-badge.is-warn{background:#fff8e6;border-color:#ead89e;color:#86670d}
.hst-quality-badge.is-bad{background:#fff0ee;border-color:#efc0b8;color:#a03727}
.hst-gps-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.hst-gps-head h2{margin:0 0 4px}.hst-gps-head p{margin:0!important}
.hst-gps-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.hst-gps-extra>div{padding:10px;border:1px solid var(--hst-line);border-radius:12px;background:#fafcfb;display:grid;gap:4px}
.hst-gps-extra span{font-size:10px;color:var(--hst-muted)}.hst-gps-extra b{font-size:12px;overflow-wrap:anywhere}
.hst-step-chip{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--hst-brand);color:#fff;font-size:11px;font-weight:900;margin-bottom:8px}
.hst-compass-quality{margin-top:8px!important}
.hst-compass{user-select:none}
.hst-control-panel>.hst-btn.is-primary{width:100%;margin-top:4px}
@media(max-width:760px){
 .hst-gps-head{align-items:center}
 .hst-gps-extra{grid-template-columns:1fr 1fr}
 .hst-quality-row{justify-content:center}
 .hst-compass-quality{text-align:center}
}
@media(max-width:430px){
 .hst-gps-extra{grid-template-columns:1fr}
 .hst-quality-badge{width:100%}
}


/* v17.9.0 — compass layout hardening */
.hst-compass{height:min(390px,88vw)}
.hst-level{height:min(390px,88vw)}
.hst-qibla-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.hst-qibla-steps span{display:flex;align-items:center;gap:6px;padding:8px;border-radius:10px;background:#f7faf8;color:var(--hst-muted);font-size:10px;font-weight:800}
.hst-qibla-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--hst-brand);color:#fff;font-size:10px}
@media(max-width:760px){
 .hst-compass-layout .hst-control-panel{order:1}
 .hst-compass-layout .hst-compass-panel{order:2}
 .hst-compass,.hst-level{height:min(330px,86vw)}
}
@media(max-width:430px){
 .hst-qibla-steps{grid-template-columns:1fr}
}

/* v18.0.0 — advanced travel field tools */
.hst-saved-point{margin-top:12px;padding:12px;border:1px solid var(--hst-line);border-radius:13px;background:#f8fbf9;display:grid;gap:5px}.hst-saved-point b{font-size:13px;direction:ltr;text-align:left}.hst-saved-point span{font-size:11px;color:var(--hst-muted)}
.hst-nav-arrow{width:116px;height:116px;margin:4px auto 10px;border-radius:50%;border:1px solid var(--hst-line);background:radial-gradient(circle,#fff 0 48%,#eef6f2 49%);display:grid;place-items:center;box-shadow:0 9px 28px #173b2b12}.hst-nav-arrow span{display:block;font-size:62px;line-height:1;color:var(--hst-brand);transform-origin:50% 50%;transition:transform .18s linear}
.hst-multi-compass{isolation:isolate}.hst-multi-marker{position:absolute;left:50%;top:50%;height:43%;width:4px;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);z-index:4;border-radius:999px;transition:transform .12s linear}.hst-multi-marker span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:900;padding:3px 6px;border-radius:999px;background:#fff;border:1px solid currentColor;white-space:nowrap}.hst-multi-marker.is-qibla{background:#d89b18;color:#9a6c05}.hst-multi-marker.is-sun{background:#e88918;color:#a45b00}.hst-multi-marker.is-dest{background:#176b4d;color:#176b4d}.hst-multi-marker.is-wind{background:#3677b4;color:#24608f}.hst-legend{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:12px}.hst-legend span{font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px;background:#f4f7f5}.hst-legend .is-qibla{color:#9a6c05}.hst-legend .is-sun{color:#a45b00}.hst-legend .is-dest{color:#176b4d}.hst-legend .is-wind{color:#24608f}
.hst-details{margin-top:10px;border:1px solid var(--hst-line);border-radius:13px;padding:0 12px;background:#fbfdfc}.hst-details summary{cursor:pointer;padding:12px 0;font-size:12px;font-weight:900;color:#355348}.hst-details[open] summary{border-bottom:1px solid var(--hst-line);margin-bottom:8px}
.hst-track-map{position:relative;height:260px;margin:12px 0;border:1px solid var(--hst-line);border-radius:16px;background:linear-gradient(#f8fbf9,#fff);overflow:hidden;display:grid;place-items:center}.hst-track-map svg{position:absolute;inset:0;width:100%;height:100%}.hst-track-map polyline{fill:none;stroke:#176b4d;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.hst-track-map circle{fill:#d88c18;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.hst-track-map>span{font-size:12px;color:var(--hst-muted);padding:20px;text-align:center}.hst-local-note{font-size:11px!important;margin-bottom:0!important}
.hst-eta-progress{height:10px;border-radius:999px;background:#eef3f0;overflow:hidden;margin:16px 0}.hst-eta-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#176b4d,#35a06f);border-radius:inherit;transition:width .25s linear}
.hst-health-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding:14px;border-radius:15px;background:linear-gradient(145deg,#f3faf6,#fff);border:1px solid var(--hst-line)}.hst-health-hero>div{display:grid;gap:4px}.hst-health-hero small{color:var(--hst-muted);font-size:11px}.hst-health-hero b{font-size:36px}.hst-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.hst-health-grid>div{padding:12px;border:1px solid var(--hst-line);border-radius:13px;background:#fff;display:grid;gap:5px;min-height:108px}.hst-health-grid span{font-size:11px;font-weight:900}.hst-health-grid b{font-size:14px}.hst-health-grid small{font-size:10px;color:var(--hst-muted);line-height:1.6}.hst-health-grid>div[data-state="good"]{background:#f0faf4;border-color:#bfe3cd}.hst-health-grid>div[data-state="bad"]{background:#fff4f1;border-color:#efc8be}.hst-health-grid>div[data-state="unsupported"]{background:#f6f7f7;color:#77817c}.hst-health-log{margin-top:12px;padding:12px;border-radius:13px;background:#f6f9f7;color:var(--hst-muted);font-size:11px;line-height:1.8}
@media(max-width:760px){.hst-health-grid{grid-template-columns:1fr 1fr}.hst-track-map{height:220px}.hst-nav-layout .hst-panel:first-child{order:1}.hst-nav-layout .hst-panel:last-child{order:2}}
@media(max-width:430px){.hst-health-grid{grid-template-columns:1fr}.hst-health-hero{align-items:flex-start}.hst-track-map{height:190px}.hst-multi-marker span{font-size:8px}}