:root{--ink:#17283e;--muted:#7f8ea3;--line:#e5ebf3;--navy:#10243d;--blue:#3678f6;--cyan:#52d3e2;--amber:#f4bc55;--green:#49b98a;--canvas:#f4f7fb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e7edf5;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone-shell{position:relative;display:flex;flex-direction:column;width:min(100%,30rem);height:100dvh;min-height:35rem;margin:auto;overflow:hidden;background:var(--canvas)}
.air-header{position:relative;flex:none;min-height:7.25rem;padding:.68rem .85rem .6rem;overflow:hidden;color:#fff;background:var(--navy)}
.header-map{position:absolute;inset:0;background:url("assets/illustrations/airspace-hero.jpg") center 40%/cover;opacity:.58;filter:saturate(.9)}
.header-scrim{position:absolute;inset:0;background:linear-gradient(105deg,#10243df2 0%,#173755dd 55%,#1e5a69a8 100%)}
.header-row,.air-status,.header-foot{position:relative;z-index:1}
.header-row{display:flex;align-items:center;gap:.42rem;min-width:0}
.brand{display:flex;align-items:center;gap:.42rem;flex:1;min-width:0}
.brand-mark{display:grid;place-items:center;flex:none;width:2.05rem;height:2.05rem;border:1px solid #ffffff55;border-radius:.68rem;color:#113250;background:linear-gradient(140deg,#a3eff0,#4bc9dd);box-shadow:0 .28rem .7rem #36bbcf42;font-size:.9rem}
.brand-copy{display:grid;gap:.12rem;min-width:0}
.brand-copy strong{overflow:hidden;color:#f5fbff;font-size:.82rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.brand-copy small{overflow:hidden;color:#b6cedc;font-size:.52rem;letter-spacing:.025rem;text-overflow:ellipsis;white-space:nowrap}
.region{display:flex;align-items:center;gap:.22rem;flex:none;padding:.32rem .4rem;border:1px solid #ffffff45;border-radius:1rem;color:#e6f4f9;background:#ffffff16;font-size:.54rem;white-space:nowrap}
.region>i:first-child{color:#79e0e9}
.region>i:last-child{font-size:.46rem}
.icon-button,.avatar{position:relative;display:grid;place-items:center;flex:none;width:1.65rem;height:1.65rem;border:1px solid #ffffff40;border-radius:50%;color:#f2fbff;background:#ffffff16;font-size:.68rem}
.icon-button b{position:absolute;top:.03rem;right:.03rem;width:.34rem;height:.34rem;border:1px solid #15344e;border-radius:50%;background:#ff6967;font-size:0}
.avatar{color:#b8edf1;font-size:.62rem;font-weight:700}
.air-status{display:flex;align-items:center;gap:.3rem;margin:.67rem 0 .35rem;padding:.35rem .48rem;border:1px solid #ffffff30;border-radius:.5rem;background:#061b2c54;color:#e1f5f7;font-size:.55rem}
.live-dot,.flight-state i{width:.35rem;height:.35rem;border-radius:50%;background:#5ce0ac;box-shadow:0 0 .45rem #5ce0ac99}
.air-status>i{width:1px;height:.5rem;margin:0 .12rem;background:#ffffff45}
.air-status>span:nth-of-type(2){color:#bcd3df}
.weather{display:flex;align-items:center;gap:.18rem;margin-left:auto;color:#ffdf93!important}
.header-foot{display:flex;justify-content:space-between;color:#a8c1d0;font-size:.47rem;letter-spacing:.025rem}
.app-body{flex:1;min-height:0;overflow:auto;padding:.62rem .82rem 1rem;scrollbar-width:none}
.app-body::-webkit-scrollbar{display:none}
.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin:.05rem 0 .55rem}
.eyebrow{color:#98a7ba;font-size:.46rem;font-weight:800;letter-spacing:.075rem}
.welcome-row h1{margin:.18rem 0 .12rem;font-size:.91rem;font-weight:750;letter-spacing:-.02rem}
.welcome-row h1 span{font-size:.72rem}
.welcome-row p{margin:0;color:#8090a5;font-size:.45rem}
.date-button{display:flex;align-items:center;gap:.22rem;flex:none;padding:.32rem .43rem;border:1px solid #e1e9f2;border-radius:.48rem;color:#64768d;background:#fff;font-size:.43rem;box-shadow:0 .15rem .4rem #1c38500a}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;margin-bottom:.25rem}
.kpi{display:grid;gap:.2rem;min-width:0;padding:.43rem .36rem .4rem;border:1px solid #e5ebf3;border-radius:.65rem;background:#fff;box-shadow:0 .22rem .65rem #213c5a09}
.kpi>span{overflow:hidden;color:#8392a7;font-size:.49rem;text-overflow:ellipsis;white-space:nowrap}
.kpi strong{color:#1b2e47;font-size:.98rem;line-height:1.1}
.kpi strong small{margin-left:.1rem;color:#8292a5;font-size:.48rem;font-weight:550}
.kpi em{overflow:hidden;color:#42a982;font-size:.4rem;font-style:normal;white-space:nowrap}
.kpi em.cyan{color:#269bb2}.kpi em.amber{color:#ce9230}.kpi em.danger{color:#db5b55}.kpi em.good{color:#329d75}.alert-kpi{border-color:#f0dede;background:linear-gradient(155deg,#fff,#fff9f8)}
.map-card{position:relative;height:11.3rem;margin-bottom:.75rem;overflow:hidden;border:1px solid #dbe5ef;border-radius:.86rem;background:#dce8ed;box-shadow:0 .4rem 1.05rem #1837571b}
.map-card>img{display:block;width:100%;height:100%;object-fit:cover}
.map-card:after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,#0d2b473d,transparent 36%,transparent 70%,#0d2b4773);pointer-events:none}
.map-top,.map-label,.map-expand,.map-legend{position:absolute;z-index:1}
.map-top{top:.48rem;right:.5rem;left:.5rem;display:flex;align-items:center;justify-content:space-between}
.map-live,.map-top button{display:flex;align-items:center;gap:.22rem;padding:.24rem .38rem;border:1px solid #ffffff7a;border-radius:1rem;color:#f5fcff;background:#102c4c73;backdrop-filter:blur(8px);font-size:.48rem}
.map-live i{width:.3rem;height:.3rem;border-radius:50%;background:#60e0ad;box-shadow:0 0 .4rem #60e0ad}
.map-label{display:flex;align-items:center;gap:.2rem;padding:.3rem .42rem;border:1px solid #ffffff8c;border-radius:.45rem;color:#183a58;background:#ffffffd9;box-shadow:0 .2rem .6rem #193b581e;font-size:.49rem}
.map-label i{color:#3384ed}.map-label b{display:grid;place-items:center;width:.9rem;height:.9rem;border-radius:50%;color:#fff;background:#327df0;font-size:.42rem}
.label-north{top:28%;left:7%}.label-south{right:7%;bottom:26%}.map-expand{right:.5rem;bottom:1.65rem;display:grid;justify-items:center;gap:.12rem;width:2.15rem;height:2.15rem;align-content:center;border:1px solid #ffffff9c;border-radius:.65rem;color:#fff;background:#153c5fbd;font-size:.72rem;box-shadow:0 .2rem .55rem #16385640}.map-expand span{font-size:.4rem}
.map-legend{right:.45rem;bottom:.42rem;left:.45rem;display:flex;gap:.48rem;color:#f0f7fa;font-size:.42rem;text-shadow:0 1px 3px #18324d}
.map-legend span{display:flex;align-items:center;gap:.18rem}.map-legend i{width:.36rem;height:.12rem;border-radius:1rem}.legend-blue{background:#58c8ff}.legend-yellow{background:#ffd267}.legend-dot{width:.28rem!important;height:.28rem!important;border-radius:50%!important;background:#f8fcff;box-shadow:0 0 .35rem #fff}
.section-title{display:flex;align-items:end;justify-content:space-between;margin:.65rem 0 .36rem}
.map-heading{margin:.42rem 0 .38rem}
.section-title h2{margin:.14rem 0 0;font-size:.88rem;font-weight:750}
.section-title button{color:#3979d3;font-size:.54rem}
.flight-list{overflow:hidden;border:1px solid #e4eaf2;border-radius:.72rem;background:#fff}
.flight-row{display:flex;align-items:center;gap:.38rem;min-height:3.08rem;padding:.43rem .45rem;border-bottom:1px solid #eef2f6}
.flight-row:last-child{border-bottom:0}
.flight-icon{display:grid;place-items:center;flex:none;width:1.7rem;height:1.7rem;border-radius:.55rem;font-size:.73rem}
.flight-icon.blue{color:#367ee8;background:#e8f1ff}.flight-icon.violet{color:#7869dc;background:#f0edff}.flight-icon.amber-bg{color:#bd8526;background:#fff5df}
.flight-info{display:grid;flex:1;gap:.18rem;min-width:0}
.flight-info strong{overflow:hidden;color:#24364c;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}
.flight-info small{overflow:hidden;color:#8795a7;font-size:.49rem;text-overflow:ellipsis;white-space:nowrap}
.flight-state{display:flex;align-items:center;gap:.18rem;flex:none;padding:.2rem .28rem;border-radius:1rem;color:#30956f;background:#e9f7f0;font-size:.44rem;white-space:nowrap}
.flight-state i{width:.27rem;height:.27rem;box-shadow:none}.flight-state.ready{color:#a87924;background:#fff5df}
.flight-row>button{display:grid;place-items:center;flex:none;width:1.1rem;height:1.35rem;color:#9aa6b5;font-size:.62rem}
.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.02rem 0 .7rem}
.quick-actions button{display:flex;align-items:center;justify-content:center;gap:.35rem;min-width:0;padding:.62rem .28rem;border:1px solid #dce7f3;border-radius:.62rem;color:#315e8a;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:0 .2rem .5rem #20395709}
.quick-actions i{font-size:.84rem;color:#347de2}.quick-actions span{overflow:hidden;max-width:100%;color:#49647e;font-size:.57rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.quick-actions .emergency-action{border-color:#f1d4d1;color:#bb514c;background:linear-gradient(145deg,#fff,#fff5f4)}.quick-actions .emergency-action i{color:#e45e56}.quick-actions .emergency-action span{color:#b24c48}
footer{padding:.72rem 0 .1rem;color:#8d9bac;font-size:.48rem}footer span{display:block;margin-top:.18rem;color:#a4afbc;font-size:.42rem}
.bottom-nav{position:relative;z-index:2;display:flex;flex:none;align-items:center;justify-content:space-around;padding:.38rem .16rem max(.44rem,env(safe-area-inset-bottom));border-top:1px solid #e5ebf2;background:#fff}
.bottom-nav button{position:relative;display:grid;justify-items:center;gap:.14rem;min-width:2.2rem;color:#9aa7b8;font-size:.5rem}
.bottom-nav button>i{font-size:.75rem}.bottom-nav button.active{color:#3678e8}
.bottom-nav button.nav-center{width:2.55rem;height:2.55rem;margin-top:-.85rem;border:3px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(145deg,#4e9bff,#376ee7);box-shadow:0 .3rem .75rem #2f70df55}
.bottom-nav button.nav-center>i{font-size:.8rem}.bottom-nav button.nav-center>span{font-size:.4rem;color:#fff}
.bottom-nav button>b{position:absolute;top:-.15rem;right:.22rem;display:grid;place-items:center;width:.68rem;height:.68rem;border:1px solid #fff;border-radius:50%;color:white;background:#ed726a;font-size:.4rem}
.toast{position:absolute;z-index:9;bottom:4.4rem;left:50%;max-width:88%;padding:.5rem .68rem;border-radius:.55rem;color:#fff;background:#152a42eF;font-size:.58rem;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,.45rem);transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-wrap{position:absolute;inset:0;z-index:10;display:none;align-items:end;background:#10223891;backdrop-filter:blur(2px)}
.modal-wrap.open{display:flex}.modal{position:relative;width:100%;max-height:78%;overflow:auto;padding:1.3rem 1rem 1.35rem;border-radius:1rem 1rem 0 0;background:#fff;box-shadow:0 -.5rem 1.6rem #0b1c3026}
.close{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;color:#7f8c9e;background:#f1f4f8}
.modal h2{margin:0 2rem .35rem 0;color:#21354b;font-size:.95rem}.modal p{margin:.2rem 0 .8rem;color:#8491a2;font-size:.62rem;line-height:1.7}
.modal-row{display:flex;justify-content:space-between;gap:.4rem;margin:.36rem 0;padding:.55rem .62rem;border-radius:.5rem;color:#52647b;background:#f3f6fa;font-size:.62rem}
.modal-primary{width:100%;margin-top:.6rem;padding:.62rem;border-radius:.55rem;color:#fff;background:linear-gradient(100deg,#438af2,#3470df);font-size:.68rem;font-weight:650}
@media(min-width:600px){body{display:grid;min-height:100dvh;place-items:center;padding:1rem}.phone-shell{width:26rem;height:min(56rem,calc(100dvh - 2rem));border:.58rem solid #151b26;border-radius:2.1rem;box-shadow:0 1.5rem 3.2rem #1c334b3d}.bottom-nav{border-radius:0 0 1.48rem 1.48rem}.modal-wrap{border-radius:1.5rem}}
@media(max-width:360px){.air-header{padding-right:.68rem;padding-left:.68rem}.app-body{padding-right:.68rem;padding-left:.68rem}.region{padding:.3rem .32rem;font-size:.48rem}.brand{gap:.34rem}.brand-mark{width:1.9rem;height:1.9rem}.map-card{height:9.5rem}.kpi{gap:.16rem;padding:.39rem .22rem .35rem}.kpi>span{font-size:.42rem}.kpi strong{font-size:.86rem}.kpi em{font-size:.34rem}.quick-actions button{gap:.24rem;padding:.58rem .18rem}.quick-actions span{font-size:.48rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}

.phone-shell,.app-shell{position:relative}.modal-wrap,.modal-backdrop{background:rgba(20,32,45,.34);backdrop-filter:none}.modal,.app-modal{max-height:68%}