/* Special Character Identifier - Offline static CSS */
:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #22c55e;
  --accent: #38bdf8;
  --danger: #f87171;
  --border: #1f2937;
  --focus: #f59e0b;

  --cat-letter: #86efac;
  --cat-number: #93c5fd;
  --cat-punct: #fca5a5;
  --cat-symbol: #fcd34d;
  --cat-space: #c4b5fd;
  --cat-tab: #f9a8d4;
  --cat-newline: #67e8f9;
  --cat-cr: #fda4af;
  --cat-nbsp: #f5d0fe;
  --cat-zw: #fecaca;
  --cat-control: #fef08a;
  --cat-other: #a5b4fc;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.app-header, .app-footer { padding: 1rem; border-bottom: 1px solid var(--border); }
.app-footer { border-top: 1px solid var(--border); border-bottom: none; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.subtitle { color: var(--muted); margin: 0.25rem 0 0; }
.env-warning { background: #3f1d1d; color: #fca5a5; padding: 0.5rem 0.75rem; border: 1px solid #7f1d1d; border-radius: 6px; margin-top: 0.5rem; }

.app-main { display: grid; gap: 12px; padding: 12px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; }
.panel-header { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.panel-footer { padding: 10px 12px; border-top: 1px solid var(--border); }
.small { font-size: 12px; color: var(--muted); }

/* Layout: 3 panels side-by-side on wide screens */
@media (min-width: 1000px) {
  .app-main { grid-template-columns: 1fr 0.9fr 1.6fr; }
  .input-panel, .controls-panel, .results-panel { min-height: calc(100vh - 170px); }
}
@media (max-width: 999px) {
  .app-main { grid-template-columns: 1fr; }
}

/* Inputs */
textarea#input-text {
  width: 100%;
  min-height: 240px;
  resize: vertical;
  background: #0b1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre; /* preserve whitespace exactly */
}

.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { background: #1f2937; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.btn:hover { background: #273449; }
.btn.primary { background: var(--primary); color: #052e16; border-color: #16a34a; font-weight: 600; }
.btn.primary:hover { filter: brightness(0.95); }

.stats { display: flex; gap: 10px; color: var(--muted); font-size: 12px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.control-group { border: 1px dashed var(--border); padding: 8px; border-radius: 8px; display: grid; gap: 6px; }
.toggle { display: flex; align-items: center; gap: 8px; }
.export-controls { display: flex; gap: 6px; flex-wrap: wrap; }

/* Results */
.results-body { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 1200px) {
  .results-body { grid-template-columns: 1fr 1.2fr; }
}
.preview-container { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #0b1220; }
.preview { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; }
.preview .cp { padding: 1px 1px; border-radius: 3px; }
.preview .cp.highlight { outline: 2px solid var(--accent); background: rgba(56, 189, 248, 0.15); }

/* Category coloring */
.cp.cat-letters { background: rgba(134, 239, 172, 0.08); }
.cp.cat-numbers { background: rgba(147, 197, 253, 0.10); }
.cp.cat-punctuation { background: rgba(252, 165, 165, 0.10); }
.cp.cat-symbols { background: rgba(252, 211, 77, 0.10); }
.cp.cat-spaces { background: rgba(196, 181, 253, 0.12); }
.cp.cat-tabs { background: rgba(249, 168, 212, 0.12); }
.cp.cat-newlines { background: rgba(103, 232, 249, 0.12); }
.cp.cat-carriage_returns { background: rgba(253, 164, 175, 0.12); }
.cp.cat-non_breaking_spaces { background: rgba(245, 208, 254, 0.12); }
.cp.cat-zero_width_characters { background: rgba(254, 202, 202, 0.12); }
.cp.cat-control_characters { background: rgba(254, 240, 138, 0.12); }
.cp.cat-other { background: rgba(165, 180, 252, 0.10); }

/* Invisible markers using data-label when whitespace markers enabled */
.cp.marker::after {
  content: attr(data-label);
  font-size: 11px;
  color: #ffedd5;
  background: #7c2d12;
  border: 1px solid #9a3412;
  border-radius: 4px;
  padding: 0 2px;
  margin: 0 1px;
}

/* Table */
.table-container { border: 1px solid var(--border); border-radius: 8px; overflow: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.results-table thead { position: sticky; top: 0; background: #0e1626; z-index: 1; }
.results-table th, .results-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.results-table tbody tr:hover { background: rgba(56, 189, 248, 0.08); }
.results-table .row-highlight { outline: 2px solid var(--accent); }
.results-table .glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; }
.results-table .positions { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* Utilities and a11y */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px dashed var(--focus); outline-offset: 2px; }

/* High contrast support */
@media (prefers-contrast: more) {
  .btn { border-color: #cbd5e1; }
  .results-table tbody tr:hover { background: #1f2937; }
}