*{box-sizing:border-box} html,body{margin:0;height:100%}
#login{display:none;position:fixed;inset:0;z-index:2000;background:#16263a;align-items:center;justify-content:center}
.login-card{display:flex;flex-direction:column;gap:10px;width:300px;padding:28px 24px;background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.login-logo{font-size:20px;font-weight:700;color:#16263a;text-align:center}
.login-sub{font-size:12px;color:#789;text-align:center;margin-bottom:6px}
.login-card input{font-size:14px;padding:9px 11px;border:1px solid #cdd6e0;border-radius:6px}
.login-card input:focus{outline:none;border-color:#2bb3ff}
.login-card button{font-size:14px;font-weight:600;padding:9px;background:#16263a;color:#fff;border:none;border-radius:6px;cursor:pointer}
.login-card button:disabled{opacity:.6;cursor:default}
.login-err{font-size:12px;color:#d62728;min-height:16px;text-align:center}
#busy{display:none;position:fixed;top:54px;left:50%;transform:translateX(-50%);z-index:1500;background:rgba(22,38,58,.94);color:#fff;padding:6px 16px;border-radius:16px;font-size:13px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
body{font-family:system-ui,sans-serif;display:flex;flex-direction:column;height:100vh}
header{display:flex;gap:10px;align-items:center;padding:8px 12px;background:#16263a;color:#fff;flex:none}
header .spacer{flex:1} header input,header select,header button,header .btn{font-size:13px}
.btn{background:#2d7;color:#04361f;padding:4px 10px;border-radius:4px;text-decoration:none}
#search{width:220px;padding:3px 8px;border-radius:4px;border:1px solid #456}
#main{flex:1;display:grid;grid-template-columns:180px 1fr 300px;min-height:0}
#layers,#station{overflow:auto;padding:10px;border-right:1px solid #ddd}
#station{border-right:none;border-left:1px solid #ddd}
#layers h4,#station h4{margin:10px 0 4px} #layers label{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:13px}
#layers i{width:12px;height:12px;border-radius:50%;display:inline-block}
.hint{color:#888;font-size:12px}
#map{height:100%}
footer{flex:none;height:180px;border-top:1px solid #ccc;padding:6px 10px;display:flex;flex-direction:column;overflow:hidden}
.flowhead{font-size:13px;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.flowhead button{font-size:13px;padding:3px 10px;cursor:pointer}
#loadsat{background:#16263a;color:#fff;border:none;border-radius:4px}
#sattabs{display:inline-flex;gap:4px}
.sattab{font-size:12px;padding:3px 9px;border:1px solid #16263a;background:#fff;color:#16263a;border-radius:4px;cursor:pointer}
.sattab.active{background:#16263a;color:#fff}
#period{width:160px}
#filmstrip{display:flex;gap:8px;flex:1;overflow-x:auto;overflow-y:hidden}
#filmstrip figure{margin:0;text-align:center;font-size:11px;flex:none}
#filmstrip img{width:120px;height:120px;object-fit:cover;border:1px solid #999;background:#eef;display:block}
#filmstrip figure{cursor:pointer;border:2px solid transparent;border-radius:3px;padding:2px}
#filmstrip figure.active{border-color:#0a84ff}
table.attr{font-size:12px;border-collapse:collapse;width:100%} table.attr td{border-bottom:1px solid #eee;padding:2px 4px}
#minis{display:flex;flex-direction:column;gap:8px}
.mini{border:1px solid #eee;border-radius:4px;padding:4px 4px 2px}
.mini-t{font-size:11px;font-weight:600;margin-bottom:2px}
.mini-c{height:84px}
.mini-c canvas{width:100%!important}
#params{max-height:160px;overflow:auto;display:flex;flex-direction:column;gap:1px;border:1px solid #eee;border-radius:4px;padding:4px}
.pchk{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.pchk input{margin:0}