:root{--ap:#3e9bff;--ok:#34d399;--warn:#ffb547}.legend i{border-radius:3px;width:9px;height:9px;display:inline-block}.status span{color:#a9d0ff;background:#3e9bff21;border-radius:999px;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;font-weight:500;transition:background .3s,color .3s;display:inline-flex}.status span:before{content:"";background:var(--ap);border-radius:50%;width:7px;height:7px}.status span.ok{color:#8eecc6;background:#34d3991f}.status span.ok:before{background:var(--ok)}.parts{right:var(--pad);bottom:calc(var(--dock-h) + var(--pad) * 2);width:min(760px, calc(100% - var(--pad) * 2));flex-direction:column;align-items:flex-end;gap:14px;display:flex;position:fixed}.detail{text-align:left;text-shadow:0 2px 18px #000000e6;width:100%;max-width:470px}.b-main .big.bad{color:#ff9aa4}.tile{text-align:left;background:#ffffff0a;border:1px solid #0000;border-radius:14px;flex-direction:column;justify-content:center;min-width:0;padding:9px 11px;transition:background .25s,border-color .25s;display:flex}.tile.pick{cursor:pointer}.tile.pick:hover{background:#ffffff14;border-color:#ffffff2e}.tile .n em{color:var(--dim);margin-left:auto;font-size:10.5px;font-style:normal}.foot{left:var(--pad);bottom:calc(var(--dock-h) + var(--pad) * 2 + 2px);color:var(--dim);pointer-events:none;font-size:11.5px;position:fixed}@media (width<=1100px){.dock{grid-template-columns:200px 1fr 330px}.dock>.b-tiles{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:6px}.tile{padding:6px 10px}.b-main .big{font-size:42px}}@media (width<=800px){:root{--dock-h:200px;--pad:12px}.head h1{font-size:24px}.head p,.legend,.foot,.detail p{display:none}.status span{padding:6px 10px;font-size:11.5px}.dock{grid-template-rows:1fr 56px;grid-template-columns:128px 1fr;padding:12px 2px}.dock>section{padding:0 14px}.b-main,.b-view{grid-row:1}.dock>.b-tiles{border-top:1px solid var(--line);scrollbar-width:none;flex-direction:row;grid-area:2/1/auto/-1;gap:8px;margin-top:10px;display:flex;overflow-x:auto;border-left:0!important;padding-top:10px!important}.dock>.b-tiles::-webkit-scrollbar{display:none}.tile{flex:none;min-width:112px}.b-main .big{font-size:34px}.b-main .big small{font-size:14px}.rows div:nth-child(n+2){display:none}.parts{align-items:stretch}.detail{max-width:none}.detail h2{font-size:19px}.metrics{gap:16px;margin-top:8px}.chip{padding:8px 11px;font-size:12.5px}}@media (width<=800px) and (height<=520px){.dock,.parts .detail{display:none}.parts{bottom:var(--pad)}}
