:root{--num:"JetBrains Mono","Inter","SF Pro Text",system-ui,monospace;--ac:#2D385F;--ac-bg:#eceff6;--pri:#2D385F;--pri-h:#384878;--okc:#c8a878;--loc:#f0a020;--ngc:#d7301f}
.top .mark{background:#2D385F}
.wb{word-break:keep-all;overflow-wrap:anywhere}
.ww{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.v3c{overflow:hidden}
.v3{position:relative;height:620px;background:#e9ebef}
.v3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.hud{position:absolute;left:14px;top:14px;background:#fff;border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;box-shadow:0 0 0 1px #d6d9df}
.lg{position:absolute;left:14px;bottom:14px;display:flex;gap:14px;background:#fff;border-radius:10px;padding:9px 14px;font-size:12.5px;box-shadow:0 0 0 1px #d6d9df}
.lg i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:5px;vertical-align:-2px}
.lg i.ok{background:var(--okc)}.lg i.lo{background:var(--loc)}.lg i.ng{background:var(--ngc)}
.pin{position:absolute;transform:translate(-50%,-100%);background:#141416;color:#fff;border-radius:10px;padding:10px 14px;font-size:12.5px;white-space:nowrap;border-left:6px solid var(--ngc);pointer-events:none}
.pin b{display:block;font-size:17px}.pin small{color:#c9cbd2;font-size:11.5px}
.pin.ok{border-left-color:var(--okc)}.pin.lo{border-left-color:var(--loc)}
.vops{display:flex;gap:10px;padding:12px 14px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--ln)}
.fb{position:absolute;inset:70px 14px 60px;display:grid;gap:10px;align-content:start;overflow:auto}
.fbr{display:grid;grid-template-columns:28px repeat(12,1fr);gap:3px;align-items:center;font:600 12px var(--num)}
.fbr button{height:26px;border:0;border-radius:3px;padding:0}
.c-ok{background:var(--okc)}.c-lo{background:var(--loc)}.c-ng{background:var(--ngc)}
.big2{font:800 34px var(--num);margin:4px 0}.big2 small{font-size:15px;margin-left:4px}
.selp{font-size:13px;color:var(--mu)}
.lvb{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.lvb div{display:grid;grid-template-columns:56px 1fr 70px;gap:10px;align-items:center;font-size:12.5px}
.lvb div.on{font-weight:700}
.lvb .meter b.lo{background:var(--loc)}.lvb .meter b.ng{background:var(--ngc)}.lvb .meter b.ok{background:#9c7c4e}
.sb2{display:grid;gap:8px;margin-top:12px}.sb2 .btn{height:40px}
.days{display:inline-block;font:700 12px var(--num);padding:2px 8px;border-radius:4px}.days.ng{background:var(--bad-bg);color:var(--bad)}.days.lo{background:var(--warn-bg);color:var(--warn)}
tr.ordered td{color:var(--mu)}
@media (max-width:1100px){.ww{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.v3{height:440px}.hud{padding:8px 10px}.lg{gap:8px;font-size:11.5px;padding:7px 10px}.vops .seg{width:100%;overflow-x:auto}.vops .seg button{flex:1}.pin{font-size:11px;padding:7px 10px}.pin b{font-size:14px}}
.selp .sep{display:inline-block;width:1px;height:10px;background:currentColor;opacity:.35;margin:0 8px;vertical-align:0}
/* スマホの上部バー（タブを2段目に） */
@media (max-width:640px){
  .top-in{flex-wrap:wrap;height:auto;padding:10px 12px 0;row-gap:4px}
  .tabs{order:3;width:100%;margin:0;height:40px}.tabs button{flex:1;justify-content:center;padding:0 4px;font-size:12px}.tabs button svg.i{display:none}
}