:root{
  --bg:#0b0d10; --panel:#14181d; --panel2:#1b2027; --line:#2a313a;
  --fg:#e6e9ee; --muted:#8b96a5; --accent:#e8113c; --accent2:#2f81f7;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}

/* ---------- top bar ---------- */
#topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;background:linear-gradient(180deg,#151a20,#0e1216);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.brand{font-weight:600;letter-spacing:.5px;white-space:nowrap}
.brand .m{color:var(--accent);font-weight:800;font-style:italic;margin-right:6px}
.brand b{color:#fff}
.brand .ver{color:var(--muted);font-weight:400;font-size:12px;margin-left:10px}
.status{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
  font:600 11px/1 var(--mono);letter-spacing:.4px;padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);color:var(--fg);white-space:nowrap;
}
button.chip{cursor:pointer}
.chip-off{color:var(--bad);border-color:#4a2226}
.chip-on{color:var(--ok);border-color:#1f4429}
.chip-info{color:var(--muted)}
.chip-flash{color:var(--muted)}
.chip-flash.warn{color:#0b0d10;background:var(--warn);border-color:var(--warn)}
.chip-flash.good{color:var(--ok);border-color:#1f4429}

/* ---------- tabs ---------- */
#tabs{display:flex;gap:2px;padding:0 10px;background:#0e1216;border-bottom:1px solid var(--line);overflow-x:auto}
#tabs button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font:600 12px/1 system-ui;letter-spacing:.8px;padding:12px 14px;cursor:pointer;white-space:nowrap;
}
#tabs button:hover{color:var(--fg)}
#tabs button.active{color:#fff;border-bottom-color:var(--accent)}

main{flex:1;min-height:0;overflow:hidden;position:relative}
.tab{display:none;height:100%;overflow:auto;padding:14px;flex-direction:column;gap:12px}
.tab.active{display:flex}

/* ---------- controls ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar label{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.sep{width:1px;height:22px;background:var(--line)}
.btn{
  background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:7px;
  padding:8px 13px;font:500 13px system-ui;cursor:pointer;white-space:nowrap;
}
.btn:hover:not(:disabled){background:#232a33;border-color:#3a434f}
.btn:disabled{opacity:.45;cursor:not-allowed}
input,select{
  background:#0e1216;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;font:13px var(--mono);
}
input[type=search]{min-width:260px;font-family:inherit}
.check{cursor:pointer}
.muted{color:var(--muted);font-size:12px}
.dirty{color:var(--warn);font:600 12px var(--mono)}

/* ---------- calibration split ---------- */
.split{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr;gap:12px}
.tree{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:auto;padding:6px;
}
.tree .cat{padding:7px 8px;color:var(--muted);font:600 11px var(--mono);letter-spacing:.4px;
  cursor:pointer;border-radius:6px;display:flex;justify-content:space-between;gap:8px}
.tree .cat:hover{background:var(--panel2);color:var(--fg)}
.tree .cat .n{opacity:.6}
.tree .item{padding:5px 8px 5px 20px;font:12px var(--mono);color:#c6ccd5;cursor:pointer;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree .item:hover{background:var(--panel2)}
.tree .item.sel{background:#243043;color:#fff}
.tree .empty{padding:14px;color:var(--muted);font-size:12px}

.gridwrap{display:flex;flex-direction:column;min-width:0;gap:8px}
.mapinfo{font:12px var(--mono);padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gridhost{flex:1;min-height:0;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:9px}
table.map{border-collapse:separate;border-spacing:0;font:12px var(--mono)}
table.map th,table.map td{border-right:1px solid #0b0d10;border-bottom:1px solid #0b0d10;padding:4px 7px;text-align:right;min-width:54px}
table.map thead th{position:sticky;top:0;background:#232a33;color:var(--muted);z-index:2}
table.map tbody th{position:sticky;left:0;background:#232a33;color:var(--muted);z-index:1}
table.map thead th:first-child{z-index:3;left:0}
table.map td{color:#0b0d10;font-weight:600}
table.map td[contenteditable]{cursor:text}
table.map td:focus{outline:2px solid var(--accent2);outline-offset:-2px}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px}
.panel h3{margin:0 0 10px;font:600 13px system-ui;letter-spacing:.4px}
.panel.danger{border-color:#4a2226}
.warn{color:var(--warn);font-size:12px;margin-left:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.row label{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.out{
  background:#0e1216;border:1px solid var(--line);border-radius:8px;padding:10px;
  font:12px var(--mono);color:#c6ccd5;max-height:340px;overflow:auto;white-space:pre-wrap;margin:0;
}
.out.log{max-height:none;flex:1}
#tab-log{height:100%}
table.data{border-collapse:collapse;font:12px var(--mono);width:100%}
table.data th,table.data td{border:1px solid var(--line);padding:5px 8px;text-align:left}
table.data th{background:var(--panel2);color:var(--muted)}

/* ---------- overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,6,9,.78);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay.hidden{display:none}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;min-width:420px;max-width:92vw}
.modal h3{margin:0 0 8px}
.bar{height:8px;background:#0e1216;border-radius:99px;overflow:hidden;margin:14px 0}
.bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff5c78);transition:width .15s}

@media (max-width:820px){
  .split{grid-template-columns:1fr;grid-template-rows:200px 1fr}
  .brand .ver{display:none}
}

/* ---------- tuning options ---------- */
.optgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.optgrid>div{overflow:auto}
.optgroup{margin-bottom:14px}
.optgroup>h4{margin:0 0 8px;font:600 11px/1 var(--mono);letter-spacing:.8px;color:var(--muted);
  text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--line)}
.opt{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:8px}
.opt.on{border-color:#4a5563;background:#171d24}
.opt .head{display:flex;align-items:center;gap:10px}
.opt .head label{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600;flex:1}
.opt input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.opt .hint{color:var(--muted);font-size:12px;margin:7px 0 0;line-height:1.5}
.opt .warnbox{margin-top:8px;padding:7px 9px;border-radius:6px;background:#2a1e12;border:1px solid #4a3a1c;
  color:#e3b341;font-size:12px}
.opt .params{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.opt .params label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.opt .params input{width:92px}
.opt .unit{color:var(--muted);font:11px var(--mono)}
.badge{font:600 10px var(--mono);padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.badge.ok{color:var(--ok);border-color:#1f4429}
table.diff{border-collapse:collapse;font:11px var(--mono);width:100%}
table.diff th,table.diff td{border-bottom:1px solid var(--line);padding:3px 6px;text-align:left;white-space:nowrap}
table.diff th{color:var(--muted);position:sticky;top:0;background:#0e1216}
table.diff td.to{color:var(--ok)}
table.diff td.from{color:var(--muted);text-decoration:line-through}
@media (max-width:900px){ .optgrid{grid-template-columns:1fr} }