*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:#008080;font:12px/1.4 "MS UI Gothic","ＭＳ Ｐゴシック","MS PGothic","Meiryo",sans-serif;color:#000;padding:8px}
.win{background:#d4d0c8;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080,inset 1px 1px #d4d0c8;padding:2px;max-width:980px;margin:0 auto;height:calc(100vh - 16px);max-height:760px;display:flex;flex-direction:column}
.titlebar{background:linear-gradient(90deg,#0a246a,#a6caf0);color:#fff;font-weight:bold;padding:3px 4px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.tt small{font-weight:normal;font-size:10px;margin-left:8px;opacity:.9}
.tbtns{display:flex;gap:2px;flex:none}
.tb{width:16px;height:14px;padding:0;font:bold 10px/1 sans-serif;background:#d4d0c8;border:2px solid;border-color:#fff #404040 #404040 #fff;cursor:pointer;line-height:8px}
.menubar{display:flex;gap:12px;align-items:center;padding:2px 6px;border-bottom:1px solid #808080;flex-wrap:wrap}
.btn{font:inherit;background:#d4d0c8;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080;padding:3px 12px;cursor:pointer;min-height:24px}
.btn.sm{padding:0 10px;min-height:20px;margin-left:auto}
.btn:active:not(:disabled){border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080;padding:4px 11px 2px 13px}
.btn:disabled{color:#808080;text-shadow:1px 1px #fff;cursor:default}
.btn:focus-visible,.tab:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.tabs{display:flex;flex-wrap:wrap;gap:0;padding:4px 4px 0}
.tab{font:inherit;background:#d4d0c8;border:2px solid;border-color:#fff #404040 transparent #fff;border-bottom:0;padding:3px 10px;cursor:pointer;margin-right:-1px;position:relative;top:0}
.tab.active{font-weight:bold;padding-bottom:5px;top:2px;z-index:2;margin-top:-2px}
.panels{flex:1;min-height:0;border:2px solid;border-color:#fff #404040 #404040 #fff;margin:0 4px;position:relative;z-index:1;padding:6px;overflow:auto;display:flex;flex-direction:column}
.panel{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1}
.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:120px}
.txt{font:inherit;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040;padding:2px 4px;min-height:22px}
.note{padding:2px 2px}
.tblwrap{flex:1;min-height:120px;overflow:auto;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}
.tbl{border-collapse:collapse;width:100%;min-width:560px;white-space:nowrap}
.tbl th{position:sticky;top:0;background:#d4d0c8;border:1px solid;border-color:#fff #808080 #808080 #fff;text-align:left;padding:2px 6px;font-weight:normal}
.tbl td{padding:1px 6px;border-right:1px solid #eee}
.tbl tr.sel td{background:#0a246a;color:#fff}
.tbl tr.near td{color:#0a246a;font-weight:bold}
.tbl tr.sel.near td{color:#fff}
.tbl tr.bad td{color:#a00}
.tbl tr.sel.bad td{color:#fff}
.pbar{height:14px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;min-width:90px;padding:1px}
.pfill{height:100%;background:repeating-linear-gradient(90deg,#0a246a 0 6px,#fff 6px 8px)}
.cgrid{display:grid;grid-template-columns:repeat(32,1fr);gap:1px;background:#808080;border:2px solid;border-color:#808080 #fff #fff #808080;padding:1px;max-width:640px;width:100%}
.cgrid div{aspect-ratio:1;background:#fff}
.cgrid .c1,.legend .c1{background:#2a5fd6}.cgrid .c2,.legend .c2{background:#e08a1e}.cgrid .c3,.legend .c3{background:#3a9a4a}.cgrid .c4{background:#d22}
.legend{display:flex;flex-wrap:wrap;gap:12px}
.legend i{display:inline-block;width:10px;height:10px;border:1px solid #404040;margin-right:4px;vertical-align:-1px;background:#fff}
.logbox{flex:1;min-height:160px;overflow:auto;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040;padding:4px;font-family:"MS Gothic","ＭＳ ゴシック",monospace;white-space:pre-wrap;word-break:break-all}
.logbox .warn{color:#b00}.logbox .ok{color:#0a246a}
.fs{border:2px groove #fff;margin:0;padding:6px 8px}
.row{display:flex;gap:6px;align-items:center;margin:3px 0;flex-wrap:wrap}
.row label{min-width:140px}
.status{display:flex;gap:2px;padding:3px 4px 2px;flex-wrap:wrap}
.sp{border:1px solid;border-color:#808080 #fff #fff #808080;padding:1px 8px;flex:1;min-width:110px;white-space:nowrap}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.dlgwin{height:auto;max-height:none;width:340px;max-width:100%;margin:0}
.dlgbody{padding:14px 12px 10px}
.dlgbody p{margin:0 0 12px;white-space:pre-wrap}
.dlgbtns{display:flex;gap:8px;justify-content:center}
.desktop{position:fixed;inset:0;background:#008080;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;text-align:center}
.deskmsg{font-size:14px}
@media (max-width:600px){
  body{padding:0}
  .win{height:100vh;max-height:none;border-width:1px}
  .tt small{display:block;margin-left:0}
  .row label{min-width:100%}
  .tab{padding:3px 6px}
}