/* ── Diff Stage (Konva) ── */
.diff-stage-wrap { position:relative;width:100%;flex:1;display:flex;flex-direction:column;background:#0a0c12;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border); }
.diff-toolbar { display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap; }
.diff-toolbar .tb-group { display:flex;align-items:center;gap:4px;padding:0 6px;border-right:1px solid var(--border); }
.diff-toolbar .tb-group:last-child { border-right:none; }
.diff-toolbar .tb-label { font-size:10px;color:var(--text2);margin-right:4px; }
.tb-btn { background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:4px 9px;font-size:11px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s; }
.tb-btn:hover { color:var(--text);border-color:var(--accent); }
.tb-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.tb-btn.warn-active { background:var(--orange);color:#fff;border-color:var(--orange); }
.tb-icon-btn { padding:4px 7px;font-size:14px;line-height:1; }

/* ── Non-Konva view tabs: zoom/pan viewport ── */
.view-zoom-outer    { flex:1;min-height:0;overflow:hidden;position:relative;cursor:grab;background:#080a0f; }
.view-zoom-outer:active { cursor:grabbing; }
.view-zoom-viewport { position:absolute;top:0;left:0;transform-origin:0 0; }
.view-zoom-ind      { background:rgba(15,17,23,.9);color:var(--text);padding:3px 8px;border-radius:5px;font-size:11px;font-family:monospace;border:1px solid var(--border);min-width:40px;text-align:center;white-space:nowrap; }
#konvaContainer { width:100%;flex:1;height:0;min-height:300px;cursor:grab;background:repeating-conic-gradient(#15171f 0% 25%,#1a1d27 0% 50%) 0 0/16px 16px; }
#konvaContainer:active { cursor:grabbing; }
.zoom-indicator { position:absolute;top:54px;right:14px;background:rgba(15,17,23,.85);color:var(--text);padding:4px 10px;border-radius:6px;font-size:11px;font-family:monospace;border:1px solid var(--border);pointer-events:none;z-index:5;backdrop-filter:blur(4px); }
.canvas-hint { position:absolute;bottom:10px;left:10px;background:rgba(15,17,23,.8);color:var(--text2);font-size:10px;padding:4px 9px;border-radius:5px;border:1px solid var(--border);pointer-events:none;z-index:5; }

/* ── Issue Popup (floating) ── */
.issue-popup { position:absolute;background:var(--surface);border:1px solid var(--accent);border-radius:8px;padding:12px 14px;width:280px;box-shadow:0 12px 36px rgba(0,0,0,.6);z-index:50;font-size:11px;pointer-events:auto; }
.issue-popup::before { content:'';position:absolute;width:10px;height:10px;background:var(--surface);border-left:1px solid var(--accent);border-bottom:1px solid var(--accent); }
.issue-popup.arrow-top::before { top:-6px;left:24px;transform:rotate(135deg);border-left:1px solid var(--accent);border-bottom:none;border-top:1px solid var(--accent);border-right:1px solid var(--accent); }
.issue-popup.arrow-bottom::before { bottom:-6px;left:24px;transform:rotate(-45deg); }
.popup-head { display:flex;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border); }
.popup-num { width:22px;height:22px;border-radius:5px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0; }
.popup-title { font-size:12px;font-weight:700;color:var(--text);flex:1; }
.popup-close { background:none;border:none;color:var(--text2);cursor:pointer;font-size:14px;padding:0 4px; }
.popup-close:hover { color:var(--text); }
.popup-row { display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:10px; }
.popup-row .k { color:var(--text2); }
.popup-row .v { color:var(--text);font-family:monospace; }
.popup-desc { color:var(--text2);line-height:1.5;margin:6px 0 8px;font-size:10.5px; }
.popup-tags { display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--border); }

/* ── Debug Log Panel ── */
#debugPanel{position:fixed;bottom:56px;right:16px;width:540px;max-height:340px;background:var(--bg);border:1px solid #3a4060;border-radius:8px;z-index:9990;font-family:'SF Mono',Consolas,monospace;font-size:10.5px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.75);display:none;flex-direction:column;}
#debugPanel.open{display:flex;}
.dbg-hd{padding:5px 8px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px;flex-shrink:0;user-select:none;}
.dbg-title{font-weight:700;color:var(--text);font-size:11px;}
.dbg-cnt{font-size:9px;color:var(--text2);background:var(--surface);padding:1px 5px;border-radius:3px;min-width:32px;text-align:center;}
.dbg-hint{font-size:9px;color:var(--text3,#6b7280);margin-left:auto;}
#debugBody{overflow-y:auto;padding:4px;flex:1;min-height:0;}
.dl{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.03);white-space:pre-wrap;word-break:break-all;line-height:1.5;user-select:text;}
.dl-req{color:#818cf8;}.dl-ok{color:#22c55e;}.dl-err{color:#ef4444;}.dl-info{color:#8b90a0;}.dl-warn{color:#f59e0b;}
#debugToggleBtn{position:fixed;bottom:16px;right:16px;z-index:9989;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:13px;cursor:pointer;color:var(--text2);line-height:1;transition:background .15s;}
#debugToggleBtn:hover{background:var(--surface);color:var(--text);}