body{overflow:hidden;display:grid;grid-template-columns:232px 1fr 250px;grid-template-rows:56px 1fr;grid-template-areas:"top top top" "left view right";height:100dvh}
.top{grid-area:top;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--char);border-bottom:1px solid var(--line);z-index:5}
.top .name{width:200px;font-weight:600}
.grow{flex:1}
.left,.right{background:var(--char);overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.left{grid-area:left}
.right{grid-area:right;border-right:0;border-left:1px solid var(--line)}
.sec{padding:8px 0;border-bottom:1px solid #1b2433}
.sec:last-child{border-bottom:0}
.h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;font-weight:700}
.dim{color:var(--mute);font-weight:500;letter-spacing:0;text-transform:none}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tools .btn{padding:7px 4px;font-size:12px}
.pgroup{margin-bottom:8px}
.pgroup .gh{font-size:12px;color:#c3d3ea;margin:4px 0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pal{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-radius:9px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:10.5px;color:#d9e6f7;line-height:1.1;text-align:center}
.pal:hover{border-color:#3a4c6a}
.pal.on{border-color:var(--cyan);background:#0f2430;color:#fff}
.pal svg{width:34px;height:28px}
.mats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.mat{aspect-ratio:1;border-radius:7px;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mat.on{border-color:#fff;box-shadow:0 0 0 2px var(--cyan)}
.row2{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:8px}
.row2.lbl{font-size:13px;color:#c3d3ea;justify-content:space-between}
.row2 b{min-width:40px;text-align:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel);border:0;padding:5px 9px;font-size:12px;cursor:pointer;color:#c3d3ea}
.seg button.on{background:#0f2430;color:var(--cyan)}
label.f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:#c3d3ea;margin-bottom:7px}
label.f .sel{width:140px;padding:6px 8px;font-size:13px}
.stats{font-size:12px;color:var(--mute);line-height:1.5}
#view{grid-area:view;position:relative;min-width:0;min-height:0}
#c{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.hint{position:absolute;left:12px;bottom:10px;right:12px;font-size:12px;color:#9fb2cc;pointer-events:none;text-shadow:0 1px 3px #000}
.hint b{color:#fff}
.phone{display:none!important}
@media (max-width:820px){
  body{grid-template-columns:1fr;grid-template-rows:52px 1fr;grid-template-areas:"top" "view"}
  .top{gap:6px;padding:0 8px}
  .top .name,.desk{display:none!important}
  .mark .w small{display:none}
  .left{display:none}
  .right{position:fixed;inset:52px 0 0 auto;width:min(320px,88vw);z-index:20;transform:translateX(105%);transition:transform .2s;box-shadow:-20px 0 40px rgba(0,0,0,.5)}
  .right.open{transform:none}
  .phone{display:block!important}
  .mobbar{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(11,13,16,.92) 30%);padding:18px 8px calc(8px + env(safe-area-inset-bottom))}
  .mobtools{display:flex;gap:5px;margin-bottom:6px;overflow-x:auto}
  .strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
  .strip .pal{flex:0 0 64px}
  .strip .matdot{flex:0 0 34px;height:34px;align-self:center;border-radius:8px;border:2px solid transparent}
  .strip .matdot.on{border-color:#fff}
  .hint{bottom:auto;top:8px;font-size:11px}
  .btn{padding:8px 10px}
}
.left,.right{background:linear-gradient(180deg,#0f141c,#0b0f15)}
.top{background:linear-gradient(90deg,#0b0f15,#0f1624 60%,#0b0f15);box-shadow:0 1px 0 rgba(0,229,255,.12),0 8px 24px rgba(0,0,0,.35)}
.pal{transition:transform .12s,border-color .12s,box-shadow .12s;background:linear-gradient(180deg,#141b26,#10161f)}
.pal:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,229,255,.12)}
.pal.on{box-shadow:0 0 0 1px var(--cyan),0 0 16px rgba(0,229,255,.25)}
.pgroup .gh{display:flex;align-items:center;gap:6px;font-weight:600}
.pgroup .gh::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.btn{transition:background .12s,border-color .12s,box-shadow .12s,transform .08s}
.btn:active{transform:scale(.97)}
.btn.on{border-color:var(--cyan);color:var(--cyan);background:#0f2430}
.mat{transition:transform .1s}
.mat:hover{transform:scale(1.1)}
.selinfo{font-size:12px;color:#9fb2cc;background:#0e1520;border:1px solid #1b2433;border-radius:8px;padding:7px 9px;margin-bottom:8px;line-height:1.35}
.seg.wrap{display:flex;flex-wrap:wrap;margin-bottom:8px}
.seg.wrap button{flex:1 0 30%}
.tpaint{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.tpaint button{display:flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:#c3d3ea;font-size:11px;padding:5px;cursor:pointer}
.tpaint button.on{border-color:var(--cyan);color:#fff}
.tpaint i{width:14px;height:14px;border-radius:4px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
input[type=range]{accent-color:#00e5ff;width:130px}
.biome{display:flex;flex-direction:column;gap:2px}
.biome .btn{align-self:flex-end}
.small{font-size:12px;line-height:1.4}
label.f.col{flex-direction:column;align-items:stretch}
.marquee{position:absolute;border:1.5px dashed var(--cyan);background:rgba(0,229,255,.08);pointer-events:none;border-radius:4px}
.tcard img.pic{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
em.new{font-style:normal;font-size:10px;letter-spacing:.1em;background:var(--cyan);color:#001;padding:1px 5px;border-radius:5px;vertical-align:middle}
.hint{background:linear-gradient(transparent,rgba(5,8,12,.55));padding:10px 10px 2px;border-radius:0 0 8px 8px}
@media (max-width:820px){ .tools{grid-template-columns:repeat(3,1fr)} .hint{background:none} }