:root{--bg:#050b18;--p:rgba(10,20,40,.78);--p2:rgba(18,32,58,.82);--ln:rgba(120,160,220,.22);--tx:#eef4ff;--mu:#9db2d6;--ac:#1d7bff;--ac2:#4aa3ff;--gr:#17b24a;--am:#f0a21b;--rd:#e5484d}
*{box-sizing:border-box}
html,body{margin:0;background:#02050c;color:var(--tx);font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif;overflow-x:clip}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:relative;margin:0 auto;width:min(100vw,calc(100dvh * 1.7767));aspect-ratio:1672/941;container-type:inline-size;overflow:hidden;background:var(--bg)}
#cGlobe{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,6,16,.7) 0,rgba(2,6,16,0) 22%),linear-gradient(0deg,rgba(2,6,16,.9) 0,rgba(2,6,16,0) 28%),linear-gradient(270deg,rgba(2,6,16,.55) 0,rgba(2,6,16,0) 34%)}
.glass{background:var(--p);border:1px solid var(--ln);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:1.1cqw;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.45)}
#brand{position:absolute;left:1.8%;top:1.6%;display:flex;align-items:center;gap:1.2cqw;pointer-events:none}
#brand svg{width:6.6cqw;height:6.6cqw;filter:drop-shadow(0 0 .5cqw rgba(80,160,255,.5))}
#ttl1{font-weight:800;font-size:3.1cqw;line-height:1;letter-spacing:.06cqw;color:#fff}
#ttl2{font-weight:800;font-size:3.5cqw;line-height:1;letter-spacing:.05cqw;background:linear-gradient(90deg,#d6ecff,#4aa3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#tag{font-size:.95cqw;letter-spacing:.32cqw;margin-top:.5cqw;color:#dfeaff}
#menu{position:absolute;left:.9%;top:17.8%;width:15.2%;height:56.4%;display:flex;flex-direction:column;background:var(--p);border:1px solid var(--ln);border-radius:1.1cqw;padding:.2cqw;backdrop-filter:blur(8px)}
#menu button{flex:1;display:flex;align-items:center;gap:1cqw;background:none;border:0;border-bottom:1px solid rgba(120,160,220,.12);padding:0 1.1cqw;font-size:1.2cqw;text-align:left;color:#e6eefc;border-radius:.7cqw}
#menu button:last-child{border-bottom:0}
#menu button svg{width:1.7cqw;height:1.7cqw;flex:none;fill:currentColor}
#menu button.on{background:linear-gradient(180deg,#2b86ff,#1566e0);color:#fff;box-shadow:0 0 1.2cqw rgba(30,120,255,.55)}
#menu button:hover:not(.on){background:rgba(80,130,220,.18)}
#finfo{position:absolute;left:39.7%;top:28.8%;width:12.2%;padding:.9cqw 1.2cqw;font-size:1.05cqw;border-radius:.9cqw;background:rgba(8,16,34,.82)}
#finfo .r1{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.25cqw;margin-bottom:.5cqw}
#finfo .st{font-size:.8cqw;background:var(--gr);color:#fff;border-radius:.4cqw;padding:.15cqw .6cqw;font-weight:700}
#finfo .st.late{background:var(--am)}#finfo .st.bad{background:var(--rd)}
#finfo .rt{font-size:1.2cqw;font-weight:600;margin:.2cqw 0 .6cqw}#finfo .rt b{margin:0 .5cqw}
#finfo .kv{white-space:nowrap;display:flex;justify-content:space-between;line-height:1.7;color:#cbd9f2}#finfo .kv span:last-child{color:#fff}
.aplbl{position:absolute;pointer-events:none;font-weight:700;font-size:1.25cqw;text-shadow:0 0 .6cqw #000;transform:translate(.9cqw,-.9cqw);white-space:nowrap}
.aplbl small{display:block;font-weight:500;font-size:.95cqw;color:#dbe8ff}
#vApron{position:absolute;left:16.2%;top:48.4%;width:48.7%;height:30.3%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent 0,#000 12%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent 0,#000 12%,#000 100%);mask-composite:intersect}
#cApron{width:100%;height:100%;display:block;touch-action:none}
#apHud{position:absolute;left:8%;bottom:4%;font-size:.95cqw;color:#fff;text-shadow:0 0 .5cqw #000;line-height:1.5;pointer-events:none}
.panel{position:absolute;left:64.9%;width:34%}
#pAc{top:1.9%;height:40.8%;padding:.8cqw 1cqw}
.panel h3{margin:0;font-weight:600;font-size:1.45cqw}

#hero{position:absolute;left:0;top:3.1cqw;width:73.5%;height:12.7cqw;border-radius:.9cqw 0 0 .9cqw;overflow:hidden}
#cHero{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#acList{position:absolute;right:.7cqw;top:3.1cqw;bottom:.8cqw;width:24.2%;display:flex;flex-direction:column;gap:.35cqw}
.acb{flex:1;border:1px solid transparent;background:rgba(30,50,90,.5);border-radius:.6cqw;padding:.2cqw .3cqw;position:relative;text-align:left;overflow:hidden;min-height:0}
.acb img{width:100%;height:76%;object-fit:cover;display:block;border-radius:.4cqw}
.acb span{font-size:.78cqw;color:#cfdcf5;position:absolute;left:.4cqw;bottom:.1cqw}
.acb.on{border:.18cqw solid #3d95ff;box-shadow:0 0 1cqw rgba(50,130,255,.65)}
.acb.lock::after{content:"\1F512";position:absolute;right:.3cqw;top:.1cqw;font-size:.9cqw}
#pAc h2{position:absolute;left:1.1cqw;top:15.9cqw;margin:0;font-size:1.8cqw;font-weight:700}
#acStats{position:absolute;left:1cqw;width:67.5%;bottom:.8cqw;display:flex;border-top:1px solid var(--ln);padding-top:.5cqw}
#acStats div{flex:1;display:flex;align-items:center;gap:.5cqw;border-right:1px solid var(--ln);padding-left:.6cqw}#acStats div:last-child{border:0}
#acStats svg{width:1.9cqw;height:1.9cqw;flex:none;fill:none;stroke:#e8f0ff;stroke-width:1.6}
#acStats b{display:block;font-size:1.05cqw;font-weight:600;white-space:nowrap}#acStats small{font-size:.8cqw;color:var(--mu);white-space:nowrap}
#pPlan{top:43.8%;height:17.3%;padding:.5cqw 1cqw}
.ph{display:flex;justify-content:space-between;align-items:center}
.tg{display:flex;align-items:center;gap:.8cqw;font-size:1.05cqw;cursor:pointer}.tg input{display:none}
.tg i{width:3.2cqw;height:1.7cqw;background:#3a4a68;border-radius:1cqw;position:relative;transition:.2s}.tg i::after{content:"";position:absolute;left:.2cqw;top:.2cqw;width:1.3cqw;height:1.3cqw;border-radius:50%;background:#fff;transition:.2s}
.tg input:checked+i{background:#1d7bff;box-shadow:0 0 1cqw rgba(30,120,255,.7)}.tg input:checked+i::after{left:1.7cqw}
#planRows{margin-top:.2cqw;background:rgba(14,26,50,.55);border-radius:.6cqw;border:1px solid rgba(120,160,220,.12)}
.pr>span:first-child{width:1.8cqw;height:1.8cqw;display:block}.pr{display:grid;grid-template-columns:2.4cqw 3.6cqw 1fr auto;align-items:center;padding:.15cqw .9cqw;font-size:1.1cqw;cursor:pointer;gap:.4cqw;border-bottom:1px solid rgba(120,160,220,.08)}.pr:last-child{border:0}
.pr:hover{background:rgba(80,130,220,.15)}.pr b{font-weight:700}.pr span{color:#cfdcf5}.pr em{font-style:normal;color:#e9f1ff}
#pCargo{top:62.5%;height:15.2%;overflow:hidden;padding:0}
#cargoImg{position:absolute;left:0;top:0;width:55%;height:100%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
#pCargo h3{position:absolute;left:1.5cqw;top:.7cqw;z-index:2;text-shadow:0 0 .6cqw #000;font-size:1.5cqw}
#cargoChecks{position:absolute;left:66.5%;right:1%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly}
.ck{display:flex;align-items:center;gap:.8cqw;font-size:1.15cqw;background:none;border:0;text-align:left;padding:0}.ck i{width:1.5cqw;height:1.5cqw;border:.15cqw solid #c9d6ee;border-radius:.3cqw;display:grid;place-items:center;font-style:normal;font-size:1.1cqw;line-height:1;flex:none}
.ck.on i{background:#e9f1ff;color:#0a1830;border-color:#e9f1ff}
#cards{position:absolute;left:.9%;top:78.9%;width:98.2%;height:19.9%;display:grid;grid-template-columns:repeat(6,1fr);gap:.8cqw}
.card{position:relative;border:1px solid var(--ln);border-radius:.9cqw;overflow:hidden;background:#0a1428;padding:0;text-align:center;display:flex;flex-direction:column}
.card .im{flex:1;background-size:cover;background-position:center;min-height:0}
.card .tx{padding:.6cqw .3cqw .7cqw;background:rgba(8,16,34,.92)}.card b{display:block;font-size:1.3cqw}.card small{font-size:1.05cqw;color:#cfdcf5}
.card.on{border:.2cqw solid #2f8bff;box-shadow:0 0 1.3cqw rgba(40,130,255,.7)}.card:hover{filter:brightness(1.12)}
#sheet{position:absolute;left:17%;top:14%;width:47%;height:64%;z-index:20;display:flex;flex-direction:column;background:rgba(7,14,30,.93);overflow:hidden}
#sheet[hidden]{display:none}
.sh{display:flex;justify-content:space-between;align-items:center;padding:.7cqw 1.2cqw;border-bottom:1px solid var(--ln)}.sh h2{margin:0;font-size:1.5cqw}
.x{background:none;border:0;font-size:2.2cqw;line-height:1;color:#cfe0ff}
#shB{flex:1;overflow:auto;padding:1cqw 1.2cqw;font-size:1.05cqw;line-height:1.45}
#shB h4{margin:1cqw 0 .4cqw;font-size:1.15cqw;color:#9fd0ff}
#shB table{width:100%;border-collapse:collapse}#shB td,#shB th{padding:.25cqw .5cqw;border-bottom:1px solid rgba(120,160,220,.12);text-align:left}#shB th{color:var(--mu);font-weight:500}
.row{display:flex;gap:1cqw;flex-wrap:wrap;align-items:center;margin:.4cqw 0}
.btn{background:#16335f;border:1px solid #2e5ea8;border-radius:.6cqw;padding:.45cqw 1cqw;font-size:1.05cqw}.btn:hover{background:#1f4a8c}.btn.pri{background:linear-gradient(180deg,#2b86ff,#1566e0);border-color:#4aa3ff;font-weight:700}.btn.sm{padding:.2cqw .6cqw;font-size:.95cqw}.btn[disabled]{opacity:.4;cursor:not-allowed}
select,input[type=range]{font:inherit;color:inherit}select{background:#0f2342;border:1px solid #2e5ea8;border-radius:.4cqw;padding:.25cqw .5cqw}
input[type=range]{accent-color:#2b86ff;vertical-align:middle}
.ok{color:#4be07f}.bad{color:#ff6b70}.warn{color:#ffc04a}.mu{color:var(--mu)}
.bar{height:.9cqw;background:#13233f;border-radius:.5cqw;position:relative;overflow:hidden}.bar i{position:absolute;top:0;bottom:0;border-radius:.5cqw}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.chip{display:inline-block;border:1px solid var(--ln);border-radius:1cqw;padding:.15cqw .7cqw;margin:.15cqw;background:rgba(30,50,90,.5);font-size:.95cqw;cursor:pointer}.chip.on{background:#1d6bd6;border-color:#58a8ff}
.slot{display:inline-block;width:5.2cqw;height:3cqw;border:1px dashed #4a6aa0;border-radius:.4cqw;margin:.15cqw;text-align:center;font-size:.8cqw;line-height:1.25;padding-top:.25cqw;cursor:pointer;background:rgba(20,40,80,.4)}
.slot.full{border-style:solid;background:#17407f}.uld{display:inline-block;border:1px solid #58a8ff;border-radius:.4cqw;padding:.25cqw .6cqw;margin:.15cqw;cursor:pointer;background:#13335f;font-size:.95cqw}.uld.sel{background:#2b86ff}.uld.placed{opacity:.35}
details{background:rgba(20,36,66,.55);border-radius:.5cqw;padding:.3cqw .8cqw;margin:.5cqw 0}summary{cursor:pointer;font-weight:600;color:#bfe0ff}
canvas.gr{width:100%;height:9cqw;background:#0a1630;border-radius:.5cqw}
#toast{position:absolute;left:50%;top:9%;transform:translateX(-50%);background:rgba(8,18,40,.95);border:1px solid #3a78d0;border-radius:.8cqw;padding:.6cqw 1.4cqw;font-size:1.1cqw;opacity:0;transition:.3s;pointer-events:none;z-index:40;max-width:60%}
#toast.on{opacity:1}
:focus-visible{outline:.15cqw solid #7fc0ff;outline-offset:.1cqw}
/* ---------- mobile / narrow: stacked layout ---------- */
@media (max-width:900px){
 #app{width:100%;aspect-ratio:auto;height:auto;container-type:normal;overflow:visible;font-size:14px}
 body.embed-mode #app{height:auto}
 #app>*:not(#brand):not(.aplbl):not(#finfo):not(#toast):not(#sheet){position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin:8px}
 #cGlobe{position:relative!important;height:62vw!important;min-height:300px;margin:0!important;width:100%!important}
 #gshade{display:none}
 #brand{margin:0!important;position:absolute!important;top:8px;left:8px;z-index:3}#brand svg{width:44px;height:44px}#ttl1{font-size:20px}#ttl2{font-size:22px}#tag{font-size:8px;letter-spacing:2px;margin-top:3px}
 #menu{flex-direction:row;overflow-x:auto;padding:4px}#menu button{flex:none;padding:10px 12px;font-size:13px;border:0;white-space:nowrap;gap:8px}#menu button svg{width:18px;height:18px}
 #finfo{position:absolute!important;left:8px!important;top:calc(62vw - 40px)!important;width:auto!important;font-size:11px;padding:6px 10px;margin:0!important}
 #finfo .r1,#finfo .rt{font-size:12px}
 .aplbl{font-size:11px;position:absolute!important;margin:0!important}.aplbl small{font-size:9px}
 #vApron{height:52vw!important;min-height:220px;-webkit-mask-image:none;mask-image:none}#apHud{font-size:10px}
 .panel{width:auto!important}.glass{border-radius:12px}
 .panel h3{font-size:15px}#pAc{height:auto!important;padding:10px 10px 12px}#hero{position:relative!important;width:100%!important;height:46vw!important;min-height:170px;margin:6px 0!important;border-radius:10px}#acList{position:relative!important;width:auto!important;flex-direction:row!important;overflow-x:auto;height:64px;right:auto!important;top:auto!important;bottom:auto!important}.acb{flex:none;width:110px}#pAc h2{position:relative!important;left:auto!important;top:auto!important;margin:6px 0!important}#acStats{position:relative!important;left:auto!important;width:auto!important;bottom:auto!important}.acb span{font-size:9px}#pAc h2{font-size:18px}#acStats b{font-size:13px}#acStats small{font-size:10px}#acStats svg{width:22px;height:22px}
 #hero{margin:0}.tg{font-size:12px;gap:8px}.tg i{width:38px;height:20px}.tg i::after{width:16px;height:16px;left:2px;top:2px}.tg input:checked+i::after{left:20px}
 .pr{font-size:13px;padding:8px;grid-template-columns:26px 40px 1fr auto}
 #pPlan{height:auto!important;padding:10px}#pCargo{height:150px!important}#pCargo h3{font-size:15px;left:12px;top:8px}.ck{font-size:13px;gap:8px}.ck i{width:18px;height:18px;border-width:2px;font-size:13px}
 #cards{grid-template-columns:repeat(2,1fr);gap:8px;height:auto!important}.card{height:130px}.card b{font-size:14px}.card small{font-size:11px}
 #sheet{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:auto!important;height:auto!important;margin:0!important;border-radius:0;z-index:50}
 .sh h2{font-size:17px}#shB{font-size:13px;padding:10px}#shB h4{font-size:14px}.x{font-size:28px}
 .btn{font-size:13px;padding:8px 12px}.btn.sm{font-size:12px;padding:5px 9px}.chip{font-size:12px;padding:4px 10px}.slot{width:62px;height:40px;font-size:10px}.uld{font-size:12px;padding:5px 8px}canvas.gr{height:110px}
 #toast{font-size:12px;padding:8px 12px;position:fixed!important;top:10px!important;max-width:90%!important;margin:0!important}
 .grid2{grid-template-columns:1fr}.bar{height:10px}
}