:root{--panel:#02080b;--border:#33424a;--green:#78ff3b;--cyan:#4fc3ff;--white:#f8f8f8;--muted:#9aa2a8;--amber:#ffbf38;--red:#ff4b4b;--blue:#60a5ff;--purple:#ff67ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:var(--white);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.app{min-height:100vh;padding:18px;padding-top:calc(18px + env(safe-area-inset-top));background:radial-gradient(circle at top,#071119,#000 58%)}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}h1{font-size:clamp(30px,5vw,56px);letter-spacing:3px;margin:0;font-weight:900}.sub{color:var(--muted);font-size:clamp(14px,2vw,24px);letter-spacing:3px}
.top-status{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;padding:12px 16px;background:#02080b}.status-light{width:18px;height:18px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px var(--amber)}.status-light.live{background:var(--green);box-shadow:0 0 18px var(--green)}.status-light.fail{background:var(--red);box-shadow:0 0 18px var(--red)}.status-title{color:var(--cyan);font-weight:900}.status-small{color:var(--white);font-size:14px}
.grid{display:grid;grid-template-columns:1fr 1fr .95fr;gap:10px}.second,.raw,.footer{margin-top:10px}.panel{background:linear-gradient(#02080b,#010304);border:1.5px solid var(--border);border-radius:14px;padding:18px;box-shadow:inset 0 0 18px rgba(79,195,255,.05)}
.title{color:var(--green);text-align:center;font-size:clamp(20px,2.5vw,30px);font-weight:800;margin-bottom:8px}.left{text-align:left;color:var(--cyan);margin:0}.big{min-height:245px;display:flex;flex-direction:column;justify-content:center}.huge{font-size:clamp(64px,11vw,135px);font-weight:900;text-align:center;line-height:.95}.unit{color:var(--green);font-size:clamp(26px,4vw,44px);font-weight:800;text-align:center}.small,.trend{color:var(--muted);text-align:center;font-size:clamp(16px,2vw,24px)}.trend.up{color:var(--green)}.trend.down{color:var(--amber)}
.windwrap{display:flex;align-items:center;gap:16px;justify-content:center}.compass{width:min(240px,28vw);height:min(240px,28vw);border:3px solid var(--muted);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}.card{position:absolute;color:white;font-size:28px;font-weight:900}.n{top:10px}.s{bottom:10px}.e{right:12px}.w{left:12px}.needle{position:absolute;width:8px;height:42%;background:var(--amber);bottom:50%;left:calc(50% - 4px);transform-origin:bottom center;border-radius:6px;transition:transform .4s ease}.winddir{color:var(--green);font-size:clamp(34px,5vw,56px);font-weight:900;z-index:2}.label{color:var(--green);font-size:16px;text-align:center}.num{font-size:48px;text-align:center;font-weight:900}
.category{font-size:clamp(56px,8vw,88px);font-weight:900;color:var(--green);text-align:center;background:rgba(120,255,59,.16);border-radius:10px;padding:6px;margin-bottom:14px}.category.mvfr{color:var(--blue);background:rgba(96,165,255,.16)}.category.ifr{color:var(--red);background:rgba(255,75,75,.16)}.category.lifr{color:var(--purple);background:rgba(255,103,255,.16)}
.row{display:flex;gap:10px;align-items:center;border-top:1px solid #24323a;padding:12px 0;font-size:clamp(16px,2vw,24px)}.row span{color:var(--cyan);min-width:145px}.row b{margin-left:auto;text-align:right}.runway-select{text-align:center;margin:10px 0 18px}select{background:#06161d;color:var(--green);border:1px solid var(--border);border-radius:10px;padding:8px 16px;font:inherit;font-weight:900}
.raw-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.raw .metar{color:var(--green);font-size:clamp(18px,2.4vw,30px);font-weight:800;line-height:1.5;margin-top:10px}.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.foot{display:flex;align-items:center;gap:14px;min-height:80px}.foot span{color:var(--cyan)}.foot b{display:block}.ico{font-size:36px;color:var(--green)!important}button{background:#06161d;border:1px solid var(--border);color:var(--green);border-radius:12px;padding:12px 18px;font:inherit;font-weight:900;cursor:pointer}
@media (max-width:900px){header{flex-direction:column;text-align:center}.grid,.footer{grid-template-columns:1fr}.compass{width:220px;height:220px}.windwrap{flex-direction:column}.raw-head{flex-direction:column;align-items:stretch}}