/* 第一版 / 第二版矩阵乘模拟器共用样式。 */

:root{
  --bg:#f3f6fa; --card:#fff; --ink:#26394a; --muted:#7c8b9c;
  --line:#e2e9f1; --soft:#f7fafd;
  --a:#2471a3; --a-bg:#eaf3fa; --a-soft:#f4f9fd;
  --b:#7d3c98; --b-bg:#f5ecf9; --b-soft:#faf5fc;
  --c:#1e8449; --c-bg:#eafaf1; --c-soft:#f5fcf8;
  --s:#b9770e; --s-bg:#fef5e7;
  --red:#c0392b; --hl:#fff3cd; --hl-line:#e6a817;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:12.5px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit}
button{cursor:pointer}
code,.mono{font-family:var(--mono)}
.spacer{flex:1}
.mini{font-size:10.5px;color:var(--muted);font-weight:400}
.card{background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:0 1px 2px rgba(30,60,90,.03),0 4px 14px rgba(30,60,90,.028);min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin-bottom:5px}
.card-head .mini{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-title{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#33475b;min-width:0}
.step-no{display:inline-flex;width:17px;height:17px;border-radius:50%;background:var(--a-bg);color:var(--a);font-size:9.5px;font-weight:800;align-items:center;justify-content:center;flex:none}
.btn{border:1px solid #cfd9e5;background:#fff;color:#34495e;border-radius:7px;padding:4px 9px;font-size:11.5px;line-height:1.35;transition:background .15s,border-color .15s,color .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.btn:hover:not(:disabled){background:#f2f6fa;border-color:#b8c7d8}
.btn:disabled{opacity:.38;cursor:default}
.btn.primary{background:var(--a);border-color:var(--a);color:#fff}
.btn.primary:hover:not(:disabled){background:#1b5e88;border-color:#1b5e88}
.btn.small{padding:2px 7px;font-size:10.5px}
.btn.on{background:var(--red);border-color:var(--red);color:#fff}
.btn.on:hover:not(:disabled){background:#a93226;border-color:#a93226}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;height:26px;color:#7c8b9c;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f4f7fa;color:#33475b}

/* ============ 顶部 ============ */
.app{zoom:var(--ui-zoom,1.3);width:calc(100vw / var(--ui-zoom,1.3));height:calc(100vh / var(--ui-zoom,1.3));display:flex;flex-direction:column;gap:6px;padding:7px 9px 9px;min-height:0}
.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.brand h1{margin:0;font-size:17px;line-height:1.25;letter-spacing:.1px;white-space:nowrap}
.brand h1 .accent{color:var(--a)}
.brand p{margin:0;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.zoom-control{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);white-space:nowrap}
.zoom-control select{height:24px;border:1px solid #cfd9e5;border-radius:6px;background:#fff;color:#34495e;font-size:10.5px;padding:0 3px}
.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.dot.a{background:var(--a)} .dot.b{background:var(--b)} .dot.c{background:var(--c)} .dot.s{background:var(--s)}

.toolbar{flex:none;display:flex;align-items:center;gap:7px;padding:4px 9px;background:#fff;border:1px solid var(--line);border-radius:9px;min-height:34px;box-shadow:0 1px 2px rgba(30,60,90,.025);min-width:0}
.matrix-summary{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.ms{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;color:#607286;background:#f7fafd;border:1px solid #e6edf5;border-radius:5px;padding:1px 6px;white-space:nowrap}
.ms b{color:#2c3e50;font-size:10.5px}
.ms-note{font-size:9.5px;color:#9aa9b8;white-space:nowrap}
.toolbar-note{font-size:9.5px;color:#9aa9b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar-tip{font-size:9.5px;color:#8a97a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}

/* ============ 主区域 ============ */
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(370px,.92fr) minmax(580px,1.18fr);gap:9px;align-items:stretch}
.code-card{display:flex;flex-direction:column;min-height:0;padding:8px 10px 9px;overflow:hidden}
.code-view{flex:1;min-height:0;background:#fbfcfe;border:1px solid #e5ecf4;border-radius:7px;padding:4px 0;overflow:auto;font-family:var(--mono);font-size:11.5px;line-height:1.55;scrollbar-width:thin}
.code-line{display:flex;padding:0 8px 0 0;white-space:pre;min-width:max-content}
.code-line .ln{flex:none;width:23px;text-align:right;padding-right:6px;color:#bcc7d3;user-select:none;font-size:9px;line-height:inherit;padding-top:1px}
.code-line .src{white-space:pre}
.code-line.active{background:var(--hl);box-shadow:inset 3px 0 0 var(--hl-line)}
.code-line.active .ln{color:#b9770e;font-weight:700}
.cm{color:#94a6b7;font-style:italic}
.kw{color:#7d3c98;font-weight:600}
.type{color:#7d3c98}
.fn{color:#1a6fa3}
.num{color:#b9770e}
.vars{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 4px;flex:none}
.var{display:inline-flex;align-items:baseline;gap:3px;border:1px solid #e4eaf2;background:#f7fafd;border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:10px;color:#7f8fa0}
.var b{color:#2c3e50;font-weight:700;font-size:10.5px}
.desc{flex:none;min-height:54px;background:#f1f8fd;border-left:3px solid #6fb3dc;border-radius:6px;padding:6px 9px;font-size:11.5px;line-height:1.55;color:#34506a;overflow-wrap:anywhere}
.desc b{color:#1c557a}
.desc code{background:#e4f0f9;border-radius:3px;padding:0 3px;font-size:10px;color:#1a5276}
.desc .line2{display:block;margin-top:2px;color:#6b7f92;font-size:10.5px;line-height:1.5}
.desc .ok{color:var(--c);font-weight:700}
.desc .bad{color:var(--red);font-weight:700}
.desc .val{font-family:var(--mono);color:#8a5a00}
.controls{flex:none;display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.controls .btn{padding:3px 8px;font-size:11px}
.controls .spacer{flex:1;min-width:0}
.speed{height:24px;border:1px solid #cfd9e5;border-radius:6px;background:#fff;color:#34495e;font-size:10.5px;padding:0 3px}
.switch{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:#5d7084;user-select:none;white-space:nowrap}
.switch input{accent-color:var(--a);margin:0}
.progress-row{flex:none;display:flex;align-items:center;gap:6px;margin-top:5px}
.progress-row input[type=range]{flex:1;min-width:50px;accent-color:var(--a);height:4px;margin:0}
.step-count{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap}
.tip-line{flex:none;margin-top:4px;font-size:9.5px;color:#98a6b5;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ 硬件列 ============ */
.hw{min-width:0;min-height:0;display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:1px;scrollbar-width:thin}
.status-card{flex:none;padding:5px 9px}
.status-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.status-row .sep,.status-sub .sep{width:1px;height:12px;background:#e4eaf2;margin:0 1px;flex:none}
.kv{font-family:var(--mono);font-size:10px;color:#8b99a8;white-space:nowrap}
.kv b{color:#2c3e50;font-weight:700}
.kv em{font-style:normal;color:#b3bfcb;font-size:9px;margin-left:1px}
.mode-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;border-radius:5px;padding:1px 7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2px}
.mode-chip.idle{background:#f1f5f9;color:#7c8b9c}
.mode-chip.busy{background:#fdecea;color:#c0392b}
.mode-chip.done{background:#eafaf1;color:#1e8449}
.mode-chip.stage{background:var(--a-bg);color:var(--a)}
.status-sub{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;color:#8b99a8;font-size:9.5px;min-width:0}
.status-sub .stats-note{flex-basis:100%;font-size:9px;color:#aab6c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.verify{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:1px 7px;font-size:9.5px;font-weight:700;background:#f1f5f9;color:#7c8b9c;white-space:nowrap}
.verify.ok{background:#eafaf1;color:#1e8449;border:1px solid #b7e4c9}
.verify.bad{background:#fdecea;color:#c0392b;border:1px solid #f5b7b1}

/* SRAM */
.sram-card{flex:none;padding:6px 9px 5px}
.sram-row{display:flex;justify-content:space-around;align-items:flex-start;gap:10px;flex-wrap:wrap}
.sram-matrix{min-width:0}
.sram-title{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:3px;min-width:0;white-space:nowrap}
.sram-title.mx-clickable{cursor:pointer}
.sram-title.mx-clickable:hover .mx-name{filter:brightness(.85)}
.mx-name{font-weight:800;font-size:11px;font-family:var(--mono)}
.mx-name.a{color:var(--a)} .mx-name.b{color:var(--b)} .mx-name.c{color:var(--c)}
.mx-tile{display:none;font-family:var(--mono);font-size:7.5px;font-weight:700;line-height:1.5;padding:0 2px;border-radius:2px;white-space:nowrap;flex:none}
.mx-tile.a{background:var(--a-bg);color:var(--a)} .mx-tile.b{background:var(--b-bg);color:var(--b)} .mx-tile.c{background:var(--c-bg);color:var(--c)}
.mx-dim{font-family:var(--mono);font-size:9px;color:#9aa9b8}
.mx-pencil{font-size:8px;color:#b8c4d0}
.grid-holder{position:relative;display:inline-block;line-height:0}
.sram-grid{display:grid;gap:0;outline:1px solid #dbe4ee;border-radius:3px;overflow:hidden;background:#fff}
.sram-grid .cell{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;border-right:1px solid #eef3f8;border-bottom:1px solid #eef3f8;color:#40566a;overflow:hidden;position:relative}
.sram-grid .cell.a{background:var(--a-soft)}
.sram-grid .cell.b{background:var(--b-soft)}
.sram-grid .cell.c{background:var(--c-soft)}
.sram-grid .cell.zero{color:#c3ced9}
.sram-grid .cell.blk-c{border-right-color:#cfdae6}
.sram-grid .cell.blk-r{border-bottom-color:#cfdae6}
.sram-grid .cell.novalue{color:transparent}
.tile-overlay{position:absolute;display:none;border:2px dashed #e67e22;border-radius:3px;pointer-events:none;background:rgba(230,126,34,.06);z-index:3}
.tile-overlay.a{border-color:var(--a);background:rgba(36,113,163,.06)}
.tile-overlay.b{border-color:var(--b);background:rgba(125,60,152,.06)}
.tile-overlay.c{border-color:var(--c);background:rgba(30,132,73,.06)}
.tile-overlay.pulse{animation:tilePulse .7s ease}
@keyframes tilePulse{0%{box-shadow:0 0 0 0 rgba(230,126,34,.5)}70%{box-shadow:0 0 0 6px rgba(230,126,34,0)}100%{box-shadow:0 0 0 0 rgba(230,126,34,0)}}
.sram-note{margin-top:3px;font-size:9px;color:#9aa9b8;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 数据通路 */
.dpath-card{flex:none;padding:6px 9px 7px}
.dpath{display:grid;grid-template-columns:120px minmax(0,1fr) 156px;grid-template-areas:"l0b arr l0c" "l0a arr l0c";gap:6px;align-items:stretch}
.subcard{border:1px solid #e6edf4;border-radius:8px;background:#fbfcfe;padding:5px 6px;min-width:0;transition:border-color .2s,box-shadow .2s,background .2s;display:flex;flex-direction:column;min-height:0}
.subcard.active{border-color:#8fc4e4;background:#f8fcff;box-shadow:0 0 0 2px rgba(93,173,226,.12)}
.subcard.tmul-active{border-color:#7fc9a1;background:#f7fdf9;box-shadow:0 0 0 2px rgba(39,174,96,.1)}
.l0b{grid-area:l0b;justify-content:center}
.l0a{grid-area:l0a;justify-content:center}
.l0c{grid-area:l0c;justify-content:center}
.subhead{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:3px;min-width:0}
.l0-name{font-family:var(--mono);font-weight:800;font-size:10.5px}
.l0-name.a{color:var(--a)} .l0-name.b{color:var(--b)} .l0-name.c{color:var(--c)} .l0-name.mul{color:#8e44ad}
.subhead .mini{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l0-grid{display:grid;gap:1px;outline:1px solid #dde6ef;border-radius:3px;overflow:hidden;background:#fff;width:max-content;line-height:0;margin:0 auto}
.l0-cell{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;border-right:1px solid #edf2f7;border-bottom:1px solid #edf2f7;color:#3c5063;overflow:hidden}
.l0-cell.a{background:var(--a-soft)} .l0-cell.b{background:var(--b-soft)} .l0-cell.c{background:var(--c-soft)}
.l0-cell.empty{color:#cbd5df;background:#fbfcfe}
.l0-cell.empty::before{content:'·';font-size:9px}
.l0-cell.zero{color:#aebbc8}
.l0-cell.flash{animation:cellFlash .6s ease}
@keyframes cellFlash{0%{background:#ffe9b8;color:#8a5a00}100%{}}
.l0-tile{margin-bottom:2px}
.l0-tile:last-child{margin-bottom:0}
.tile-label{font-family:var(--mono);font-size:7.5px;color:#9aa9b8;margin-bottom:1px;display:flex;justify-content:center;gap:3px;white-space:nowrap}
.l0-tile.tile-active .l0-grid{outline:2px solid #f0b429;box-shadow:0 0 0 2px rgba(240,180,41,.12)}
.l0a-tiles,.l0c-tiles{display:flex;flex-direction:row;gap:4px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.l0b-body{display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:center}
.l0b-note{font-size:7.8px;color:#98a6b5;line-height:1.4;text-align:center;max-width:104px}
.l0b-note b{color:var(--b)}
.flow-note{margin-top:auto;padding-top:2px;font-size:8px;color:#9aa9b8;text-align:center;line-height:1.3}
.flow-note b{color:#6f8295}
.arr-card{grid-area:arr;border:1px solid #e6edf4;border-radius:8px;background:#fbfcfe;padding:4px 5px 3px;min-width:0;transition:border-color .2s,box-shadow .2s,background .2s;display:flex;flex-direction:column;min-height:0}
.arr-card.active{border-color:#7fc9a1;background:#f7fdf9;box-shadow:0 0 0 2px rgba(39,174,96,.1)}
.arr-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:1px;min-width:0}
.arr-head .mini{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7f8fa0}
#array-svg{width:100%;max-width:400px;height:auto;display:block;margin:0 auto}
.array-legend{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:8px;color:#9aa9b8;margin-top:1px}
.array-legend .sw{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:2px;vertical-align:-1px}

/* SVG */
#array-svg .pe-frame{fill:#fff;stroke:#cbd6e2;stroke-width:1.35;transition:stroke .15s,fill .15s}
#array-svg .pe.act .pe-frame{stroke:#2980b9;stroke-width:1.9;fill:#f4faff}
#array-svg .pe.bnew .pe-frame{stroke:#e67e22;stroke-width:1.9;fill:#fff8ec}
#array-svg .pe-id{font-family:var(--mono);font-size:7.5px;fill:#aab6c4}
#array-svg .pe-b{font-family:var(--mono);font-size:9px;font-weight:700;fill:#7d3c98}
#array-svg .pe-a{font-family:var(--mono);font-size:9px;font-weight:700;fill:#2471a3}
#array-svg .pe-s{font-family:var(--mono);font-size:9px;font-weight:700;fill:#1e8449}
#array-svg .wire{stroke:#e0e7ef;stroke-width:1.2;transition:stroke .15s}
#array-svg .wire.on{stroke:#8fc4e4;stroke-width:1.8}
#array-svg .wire.von{stroke:#8fd3ac;stroke-width:1.8}
#array-svg .flow-arrow{stroke:#c5d1dd;stroke-width:1.3;opacity:.3;transition:opacity .15s}
#array-svg .flow-arrow.show{opacity:1}
#array-svg .flow-arrow.a{stroke:#5dade2}
#array-svg .flow-arrow.b{stroke:#b07cc6}
#array-svg .flow-arrow.c{stroke:#58d68d}
#array-svg .bubble{opacity:0;transition:opacity .15s}
#array-svg .bubble.show{opacity:1}
#array-svg .bubble rect{fill:#fff;stroke:#cfd9e5;stroke-width:1.1}
#array-svg .bubble.top rect{fill:#f9f2fc;stroke:#c39bd3}
#array-svg .bubble.left rect{fill:#edf6fc;stroke:#85c1e9}
#array-svg .bubble.bottom rect{fill:#eefaf3;stroke:#82e0aa}
#array-svg .bubble text{font-family:var(--mono);font-size:9px;font-weight:700;text-anchor:middle}
#array-svg .bubble.top text{fill:#7d3c98}
#array-svg .bubble.left text{fill:#2471a3}
#array-svg .bubble.bottom text{fill:#1e8449}
#array-svg .bubble .sub{font-size:6.8px;font-weight:500;fill:#93a3b3}
#array-svg .bubble .sub.c{fill:#4d8a68}

/* ============ 矩阵编辑弹窗 ============ */
.modal{position:fixed;inset:0 auto auto 0;width:calc(100vw / var(--ui-zoom,1.3));height:calc(100vh / var(--ui-zoom,1.3));zoom:var(--ui-zoom,1.3);z-index:100;display:none;align-items:center;justify-content:center;padding:12px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,35,50,.42);backdrop-filter:blur(1px)}
.modal-panel{position:relative;width:min(920px,calc(96vw / var(--ui-zoom,1.3)));height:min(720px,calc(92vh / var(--ui-zoom,1.3)));background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(20,40,60,.28);display:flex;flex-direction:column;overflow:hidden}
.modal-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line)}
.modal-title{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700;color:#2c3e50}
.modal-title .mini{font-size:10px}
.modal-body{flex:1;min-height:0;display:grid;grid-template-columns:238px minmax(0,1fr);gap:14px;padding:12px 15px;overflow:hidden}
.modal-side{display:flex;flex-direction:column;gap:10px;min-width:0;overflow:auto;padding-right:3px;scrollbar-width:thin}
.side-block{border:1px solid #e8eef5;border-radius:9px;background:#fbfcfe;padding:8px}
.side-label{font-size:9.5px;font-weight:700;color:#93a2b1;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.size-controls{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.size-controls label{display:flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:700;font-size:11px;color:#3c5266}
.size-controls input{width:42px;height:25px;padding:0 2px;border:1px solid #d5dee8;border-radius:5px;background:#fff;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink)}
.size-controls input:focus{outline:2px solid #c6e2f5;border-color:#7fb3d5}
.times{color:#aab6c4;font-size:10px}
.size-controls .btn{margin-left:2px}
.presets{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px}
.preset{border:1px solid #dbe4ee;background:#f7fafd;border-radius:4px;color:#4b6073;padding:1px 5px;font-size:9.5px;font-family:var(--mono)}
.preset:hover{background:#edf4fb;border-color:#b9cde0}
.error{min-height:0;margin-top:4px;font-size:10px;color:var(--red);line-height:1.4}
.tabs{display:flex;gap:2px;background:#f1f5f9;border-radius:6px;padding:2px;margin-bottom:6px}
.tab{flex:1;border:0;background:transparent;border-radius:4px;padding:3px 4px;font-size:10px;font-weight:700;color:#6b7c8e;font-family:var(--mono);white-space:nowrap}
.tab:hover{color:#34495e}
.tab.active{background:#fff;color:var(--a);box-shadow:0 1px 2px rgba(30,60,90,.12)}
.tab .dim{font-weight:400;color:#9aabbd;margin-left:2px;font-size:8.5px}
.edit-tools{display:flex;gap:3px;flex-wrap:wrap}
.edit-tools .btn{padding:2px 7px;font-size:10px}
.editor-hint{font-size:9.5px;color:#8a97a7;line-height:1.5;margin-top:6px}
.edit-note{font-size:9px;color:#aab6c4;margin-top:3px;font-family:var(--mono)}
.modal-grid-wrap{min-width:0;min-height:0;overflow:auto;background:#f7fafc;border:1px solid #e8eef5;border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:center;scrollbar-width:thin}
.edit-grid{display:grid;gap:2px;width:max-content;margin:0 auto}
.board-label{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;color:#aab6c4;background:#f1f5f9;border-radius:3px;user-select:none}
.board-label.corner{background:transparent}
.edit-cell{width:100%;height:100%;border:1px solid #dce5ef;border-radius:3px;background:#fff;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink);padding:0;min-width:0}
.edit-cell:focus{outline:2px solid #bfe0f5;border-color:#7fb3d5;position:relative;z-index:2}
.edit-cell.readonly{display:flex;align-items:center;justify-content:center;background:var(--c-soft);color:#4a6b58;border-color:#e2eee7}
.edit-cell.readonly.zero{color:#c7d2cb}
.edit-cell.readonly.big{font-size:9px}
.modal-foot{flex:none;display:flex;align-items:center;gap:10px;padding:9px 15px;border-top:1px solid var(--line);font-size:10px;color:#8a97a7}
.modal-foot .btn{padding:4px 14px;font-size:12px}

/* ============ 窄屏回退 ============ */
@media (max-width:1120px){
  .toolbar-note,.toolbar-tip{display:none}
  .workspace{grid-template-columns:minmax(340px,.9fr) minmax(520px,1.1fr)}
}
@media (max-width:980px){
  .app{height:auto;min-height:100vh}
  body{overflow:auto}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .code-card{height:auto}
  .code-view{max-height:430px}
  .hw{overflow:visible}
  .topbar{align-items:flex-start}
  .brand{flex-direction:column;gap:2px}
}
@media (max-width:720px){
  .app{padding:6px}
  .brand h1{font-size:15px;white-space:normal}
  .brand p{white-space:normal}
  .top-actions{justify-content:flex-start}
  .modal-body{grid-template-columns:1fr;overflow:auto}
  .modal-side{overflow:visible}
  .modal-panel{height:94vh}
  .sram-row{justify-content:flex-start;gap:12px}
}
@media (max-height:820px){
  .stats-note{display:none}
  .code-view{font-size:11px;line-height:1.5}
  .brand p{display:none}
}
@media (max-height:780px){
  #array-svg{max-width:340px}
  .code-view{font-size:10.5px;line-height:1.45}
  .sram-note{display:none}
  .dpath{gap:4px}
  .status-card{padding:4px 8px}
  .sram-card{padding:5px 8px 4px}
  .dpath-card{padding:5px 8px 5px}
}
@media (max-height:720px){
  .desc{min-height:44px}
  .tip-line{display:none}
}

/* ============ 变体差异 ============ */
body.is-v1 .v2-only{display:none}

.sram-head-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* 去掉 number input 的上下箭头，避免遮挡矩阵单元格里的数字 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  display:none;
  margin:0;
}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ============ Gantt 时间线 ============ */
.gantt-card{flex:none;padding:5px 9px 6px;overflow:hidden}
.gantt-head{gap:8px;margin-bottom:3px}
.gantt-note{flex:1;min-width:0;text-align:right;font-size:8.5px;color:#9aa9b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-nowtext{flex:none;font-family:var(--mono);font-size:9px;font-weight:700;color:#c0392b;white-space:nowrap}
.gantt-body{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px;height:88px;min-height:0}
.gantt-labels{display:flex;flex-direction:column;font-family:var(--mono);font-size:8px;color:#8b99a8;min-width:0}
.gantt-axis-space{height:16px;flex:none}
.gantt-rl{height:18px;line-height:18px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;border-bottom:1px solid #f1f5f9;font-weight:700;white-space:nowrap}
.gantt-rl.ld{color:#8a5a00}
.gantt-rl.tm{color:#1e6b3f}
.gantt-rl.cpu{color:#1a5276}
.gantt-scroll{position:relative;height:88px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;border:1px solid #eef3f8;border-radius:6px;background:#fbfcfe}
.gantt-canvas{position:relative;height:70px;min-width:100%}
.gantt-rowbg{position:absolute;left:0;right:0;height:18px;background:#fff;border-bottom:1px solid #f1f5f9;pointer-events:none}
.gantt-rowbg.alt{background:#fbfcfe}
.gantt-tick{position:absolute;top:0;bottom:0;border-left:1px solid #eef3f8;font-family:var(--mono);font-size:7.5px;color:#aab6c4;padding-left:2px;pointer-events:none;white-space:nowrap;z-index:0}
.gantt-bar{position:absolute;height:13px;border:1px solid transparent;border-radius:3px;box-sizing:border-box;font-family:var(--mono);font-size:7.5px;line-height:11px;padding:0 3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:2}
.gantt-bar.ld{background:#fff3d6;border-color:#e6a817;color:#8a5a00}
.gantt-bar.tmul{background:#e8f8ee;border-color:#27ae60;color:#1e6b3f}
.gantt-bar.cpu{background:#eaf3fa;border-color:#4a90c4;color:#1a5276}
.gantt-bar.issue{background:#f5ecf9;border-color:#b07cc6;color:#6c3483}
.gantt-bar.wait{background:#f5f7f9;border-color:#d5dde6;border-style:dashed;color:#9aa9b8}
.gantt-bar.loop{background:#f8fafc;border-color:#e2e9f1;color:#aab6c4}
.gantt-bar.current{outline:2px solid #c0392b;outline-offset:-1px;z-index:3;box-shadow:0 0 0 2px rgba(192,57,43,.08)}
.gantt-now{position:absolute;top:0;bottom:0;width:2px;background:#c0392b;z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.gantt-now::before{content:'';position:absolute;top:0;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #c0392b}