:root{
  --bg: var(--dsl-background);
  --panel: var(--dsl-card);
  --border: var(--dsl-border);
  --ink: var(--dsl-foreground);
  --muted: var(--dsl-muted-foreground);
  --accent: var(--dsl-primary);
  --accent-soft: var(--dsl-muted);
  --danger: var(--dsl-state-error);
  --danger-soft: #fff5f5;
  --ok: var(--dsl-state-success);
  --row-alt: var(--dsl-muted);
  --drag-over: var(--monel-100);
  --shadow: var(--dsl-shadow-sm);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
  font-size:13px; line-height:1.45;
}
header.app-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:16px; flex:0 0 auto;
  margin-top:8px;
}
header.app-header h1{font-size:18px; margin:0; font-weight:600}
header.app-header .subtitle{color:var(--muted); font-size:12px}
.toolbar{display:flex; gap:8px; flex-wrap:wrap}
button{
  font-family:inherit; font-size:12px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel); color:var(--ink);
  padding:5px 10px; border-radius:4px; transition:background .12s, border-color .12s;
}
button:hover{background:var(--accent-soft); border-color:var(--accent)}
button:active{background:var(--accent); color:#fff}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
button.primary:hover{background:var(--monel-600)}
button.danger{color:var(--danger); border-color:var(--danger)}
button.danger:hover{background:var(--danger-soft)}

.rows-container{padding:16px}
#rows{display:flex; flex-direction:column; gap:10px}
.row{
  background:var(--panel); border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; box-shadow:var(--shadow);
}
.row.drag-over{outline:2px dashed var(--accent); outline-offset:-2px; background:var(--drag-over)}
.row-header{
  display:flex; align-items:center; gap:8px; padding-bottom:6px;
  border-bottom:1px solid var(--monel-50); margin-bottom:6px; cursor:grab;
  user-select:none;
}
.row-header:active{cursor:grabbing}
.drag-handle{
  display:inline-flex; flex-direction:column; gap:2px;
}
.drag-handle span{display:block; width:14px; height:2px; background:var(--muted); border-radius:1px}
.row-title{font-weight:600; font-size:12px; min-width:42px}
.row-symbols{color:var(--muted); font-size:11px; font-family:Consolas,Menlo,monospace; letter-spacing:.3px}
.row-tools{margin-left:auto; display:flex; gap:6px}

.row-fields{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end}
.field{display:flex; flex-direction:column; min-width:90px; flex:1 1 90px}
.field.field-binary{min-width:180px; flex:2 2 180px}
.field.field-signed-wrap{flex:1.4 1.4 130px}
.field label{font-size:10px; color:var(--muted); margin-bottom:2px; font-family:Consolas,Menlo,monospace}
.field input, .field select{
  font-family:Consolas,Menlo,monospace; font-size:13px;
  border:1px solid var(--border); border-radius:4px; padding:4px 6px;
  width:100%; background:var(--panel); color:var(--ink);
}
.field input{ text-align: right; }
.field input:focus, .field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.signed-input-wrap{display:flex; gap:4px}
.signed-input-wrap input{flex:1; min-width:0}
.signed-input-wrap select{width:auto; min-width:46px; padding:4px 2px; font-size:11px}
.row-actions{display:flex; gap:4px; align-items:flex-end; flex:0 0 auto}
.row-actions button{padding:4px 8px; font-size:11px}

.bits-grid{
  display:flex; gap:2px; overflow-x:auto; padding:6px 2px 2px;
  border-top:1px dashed var(--monel-50); margin-top:6px;
}
.bit-col{display:flex; flex-direction:column; align-items:center; min-width:18px; flex:0 0 18px; padding:1px 0; border-radius:3px}
.bit-label{font-size:9px; color:var(--muted); line-height:1; height:10px}
.bit-checkbox{margin:2px 0 0; cursor:pointer; width:13px; height:13px; accent-color:var(--accent)}
.bit-col.bit-high .bit-label{color:var(--danger); font-weight:600}
/* 莫兰迪色 bit 分组（每 8 位一组） - 与 Monel 蓝灰金属 + 暖黄铜色系协调 */
.bit-group-0{background:#E8DFD0}
.bit-group-1{background:#D8DDE4}
.bit-group-2{background:#E3DFD8}
.bit-group-3{background:#DCE3E0}
.bit-group-4{background:#E0DCE3}
.bit-group-5{background:#D8E0E3}
.bit-group-6{background:#E3DCE0}
.bit-group-7{background:#DCE3DC}

/* calc panel */
#calcPanel{
  position:relative; flex:0 0 auto; z-index:50;
  background:var(--panel); border-top:2px solid var(--accent);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  max-height:340px;
}
.calc-header{
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  border-bottom:1px solid var(--monel-50); font-weight:600; font-size:12px;
}
.calc-body{display:flex; flex-direction:column; gap:8px; padding:8px 12px; overflow:auto; flex:1; min-height:0}
.calc-top{display:flex; gap:8px; align-items:stretch; min-height:100px}
.calc-expr-wrap{flex:2; display:flex; flex-direction:column; min-width:0}
.calc-results-wrap{flex:1; display:flex; flex-direction:column; min-width:0}
.calc-bottom{margin-top:6px; padding-top:6px; border-top:1px dashed var(--monel-50)}
.sym-rows{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.sym-row-group{display:flex; align-items:center; gap:8px; padding:4px 6px; background:var(--row-alt); border-radius:4px}
.sym-row-label{font-size:11px; color:var(--muted); min-width:36px; font-weight:600}
.sym-row-group .sym-grid{display:flex; gap:3px}
#exprArea{
  width:100%; flex:1; min-height:90px; resize:vertical; font-family:Consolas,Menlo,monospace;
  font-size:13px; border:1px solid var(--border); border-radius:4px; padding:6px;
  background:var(--panel); color:var(--ink);
}
#exprArea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.calc-actions{display:flex; gap:6px; align-items:center}
.sym-section{font-size:10px; color:var(--muted); margin-top:4px}
.sym-grid{display:flex; flex-wrap:wrap; gap:3px}
.sym-grid button{padding:3px 6px; font-size:11px; font-family:Consolas,Menlo,monospace; min-width:30px}
.sym-grid button.op-btn{background:var(--accent-soft)}
#calcResults{
  font-family:Consolas,Menlo,monospace; font-size:12px;
  border:1px solid var(--monel-50); border-radius:4px; padding:6px; background:var(--row-alt);
  flex:1; overflow:auto; min-height:60px;
  position:relative;
}
#calcResults:empty::before{
  content:"结果";
  color:var(--monel-200);
  font-size:16px;
  letter-spacing:2px;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  pointer-events:none;
  user-select:none;
}
.result-line{padding:1px 0}
.result-line.error{color:var(--danger)}

/* symbol dropdown */
#symbolDropdown{
  position:fixed; z-index:80; display:none;
  background:var(--panel); border:1px solid var(--border); border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.15); max-height:220px; overflow:auto;
  min-width:90px; font-family:Consolas,Menlo,monospace; font-size:12px;
}
#symbolDropdown .dropdown-item{padding:4px 10px; cursor:pointer}
#symbolDropdown .dropdown-item:hover, #symbolDropdown .dropdown-item.selected{background:var(--accent-soft); color:var(--accent)}

/* toast */
#toast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-20px);
  background:var(--danger); color:#fff; padding:8px 16px; border-radius:4px;
  font-size:12px; z-index:100; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; box-shadow:0 4px 12px rgba(0,0,0,.2);
  max-width:80vw;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* modal */
#modalOverlay{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(0,0,0,.45); align-items:center; justify-content:center;
}
.modal-dialog{
  background:var(--panel); border-radius:8px; padding:18px 22px; min-width:300px; max-width:90vw;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.modal-dialog h3{margin:0 0 8px; font-size:15px}
.modal-dialog p{margin:0 0 16px; color:var(--muted); font-size:13px}
.modal-actions{display:flex; gap:8px; justify-content:flex-end}

@media (max-width:640px){
  body{font-size:12px}
  .field{min-width:80px; flex:1 1 80px}
  .field.field-binary{min-width:140px}
  .calc-results-wrap{flex:1.2}
}