/* Invisible Character Inspector Styles */
.invis-tool-wrap { max-width: 900px; margin: 0 auto; padding: 0 0 24px; }

.lbl{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px}

textarea{width:100%;font-size:13px;font-family:monospace;padding:12px;border:.5px solid var(--gray-200);background:var(--white);color:var(--text);resize:none;outline:none;line-height:1.7;min-height:80px;border-radius:8px}
textarea:focus{border-color:var(--accent)}

.btn-row{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
button.b{padding:7px 14px;border:.5px solid var(--gray-200);border-radius:8px;background:var(--white);color:var(--text);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .1s}
button.b:hover{background:var(--gray-100)}
button.b:active{transform:scale(.97)}
button.primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
button.danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}
button.success{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--gray-50);border:.5px solid var(--gray-200);border-radius:8px;padding:10px 12px;text-align:center}
.stat .n{font-size:20px;font-weight:600;color:var(--text);line-height:1.1}
.stat .l{font-size:11px;color:var(--text-muted);margin-top:3px}
.stat.danger .n{color:#dc2626}
.stat.warn .n{color:#b45309}
.stat.ok .n{color:#16a34a}

.tabs{display:flex;gap:0;border-bottom:.5px solid var(--gray-200);margin-bottom:12px}
.tab{padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-.5px;font-family:inherit}
.tab.sel{color:var(--text);border-bottom-color:var(--text)}
.tab-panel{display:none}
.tab-panel.sel{display:block}

.visual-wrap{background:var(--white);border:.5px solid var(--gray-200);border-radius:8px;padding:14px 16px;margin-bottom:12px;min-height:60px;font-family:monospace;font-size:13px;line-height:2.2;word-break:break-all;white-space:pre-wrap}

.ch{display:inline;position:relative;cursor:pointer;border-radius:2px;padding:0 1px}
.ch:hover{outline:1.5px solid var(--gray-400)}
.ch.invis{background:#fef3c7;color:#92400e;border-radius:3px;padding:1px 3px;font-size:11px;font-weight:600;cursor:pointer}
.ch.ctrl{background:#fee2e2;color:#991b1b;border-radius:3px;padding:1px 3px;font-size:11px;font-weight:600}
.ch.bidi{background:#ede9fe;color:#5b21b6;border-radius:3px;padding:1px 3px;font-size:11px;font-weight:600}
.ch.format{background:#d1fae5;color:#065f46;border-radius:3px;padding:1px 3px;font-size:11px;font-weight:600}
.ch.space{background:#dbeafe;color:#1e40af;border-radius:3px;padding:1px 3px;font-size:11px;font-weight:600}
.ch.newline{background:#f3e8ff;color:#6b21a8;border-radius:3px;padding:0 4px;font-size:11px;font-weight:600}
.ch.normal{color:var(--text)}

.detail-card{background:var(--white);border:.5px solid var(--gray-200);border-radius:8px;padding:12px 16px;margin-bottom:12px;display:none}
.detail-card.show{display:block}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.ditem{background:var(--gray-50);border-radius:6px;padding:7px 10px}
.ditem .dk{font-size:11px;color:var(--text-muted);margin-bottom:2px}
.ditem .dv{font-size:13px;color:var(--text);font-weight:500;font-family:monospace;word-break:break-all}

.findings-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fi{background:var(--white);border:.5px solid var(--gray-200);border-radius:8px;padding:9px 14px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px}
.fi-icon{font-size:18px;min-width:28px;text-align:center}
.fi-name{font-size:13px;font-weight:500;color:var(--text)}
.fi-code{font-size:11px;color:var(--text-muted);font-family:monospace;margin-top:1px}
.fi-count{font-size:12px;padding:2px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.fi-count.danger{background:#fee2e2;color:#dc2626}
.fi-count.warn{background:#fef3c7;color:#92400e}
.fi-count.info{background:#dbeafe;color:#1e40af}
.fi-del{padding:3px 8px;border:.5px solid var(--gray-200);border-radius:6px;font-size:11px;cursor:pointer;background:var(--gray-50);color:var(--text-muted)}
.fi-del:hover{background:#fee2e2;color:#dc2626}

.legend-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.leg-dot{width:12px;height:12px;border-radius:2px;flex-shrink:0}

.clean-out{background:var(--gray-50);border:.5px solid var(--gray-200);border-radius:8px;padding:12px;font-family:monospace;font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-all;min-height:60px;margin-bottom:8px;line-height:1.7}

.hex-out{background:var(--gray-50);border:.5px solid var(--gray-200);border-radius:8px;padding:12px;font-family:monospace;font-size:12px;color:var(--text);word-break:break-all;line-height:2;min-height:60px}
.hx-invis{color:#b45309;font-weight:600}
.hx-normal{color:var(--text-muted)}

.empty{text-align:center;padding:2rem;color:var(--text-muted);font-size:13px}

.tool-page .gen-heading { position: absolute; left: -9999px; }

@media (max-width: 640px) {
  .invis-tool-wrap { padding: 0 16px 24px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .fi { grid-template-columns: auto 1fr auto; }
  .fi-del { display: none; }
}