:root {
  --bg: #f4f5f5;
  --surface: #ffffff;
  --ink: #0e1113;
  --muted: #5b656c;
  --accent: #2d52c8;
  --border: #d9dee3;
  --name: #2d52c8;
  --contact: #0b7a4b;
  --finance: #a15c00;
  --id: #8a2be2;
  --address: #0e7490;
  --radius: 14px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.45; padding: 1.25rem clamp(1rem, 3vw, 2rem) 3rem;
  max-width: 980px; margin-inline: auto;
}
.top { margin-bottom: 1.25rem; }
.brand { display: flex; gap: .9rem; align-items: center; }
.logo { font-size: 1.8rem; }
.eyebrow { margin: 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--mono); }
h1 { margin: .15rem 0 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.lead { color: var(--muted); max-width: 62ch; }
.tabs { display: flex; gap: .5rem; margin: 1rem 0 1.25rem; flex-wrap: wrap; }
.tabs button {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .45rem 1rem; cursor: pointer; font: inherit;
}
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.35rem; }
.panel.hidden { display: none; }
.meta h2 { margin: 0 0 .35rem; }
.meta p { margin: .25rem 0; color: var(--muted); }
.links a, .footer a { color: var(--accent); }
.workspace { margin-top: 1rem; }
.samples { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.samples button {
  font-family: var(--mono); font-size: .72rem; border: 1px solid var(--border);
  background: #f8f9fa; border-radius: 999px; padding: .3rem .7rem; cursor: pointer;
}
.samples button.active { border-color: var(--accent); color: var(--accent); background: #eef2ff; }
textarea {
  width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px;
  padding: .85rem 1rem; font: inherit; background: #fbfbfc; color: var(--ink);
}
textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, white); border-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin: .7rem 0; color: var(--muted); font-size: .92rem; }
.status { margin-left: auto; font-family: var(--mono); font-size: .78rem; }
.status.err { color: #b42318; }
.result {
  display: block; min-height: 4.5rem; border: 1px dashed var(--border); border-radius: 10px;
  padding: .9rem 1rem; background: #fafbfc; white-space: pre-wrap; word-break: break-word;
}
.ent { border-radius: 4px; padding: 0 .15em; position: relative; }
.ent .tag { font-family: var(--mono); font-size: .65rem; margin-left: .25rem; opacity: .85; }
.mask { font-family: var(--mono); font-size: .9em; font-weight: 600; }
.cat-name { background: #dfe7ff; color: var(--name); }
.cat-contact { background: #d9f5e8; color: var(--contact); }
.cat-finance { background: #ffeccc; color: var(--finance); }
.cat-id { background: #f0e3ff; color: var(--id); }
.cat-address { background: #d8f3f8; color: var(--address); }
.topic, .lang-row {
  display: grid; grid-template-columns: minmax(8rem, 1fr) 1fr 3.2rem; gap: .6rem; align-items: center;
  margin: .35rem 0; font-size: .95rem;
}
.t-bar, .lang-bar { height: .45rem; background: #e8ebef; border-radius: 999px; overflow: hidden; }
.t-fill, .lang-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; }
.t-score, .lang-pct { font-family: var(--mono); font-size: .78rem; color: var(--muted); text-align: right; }
.lang-primary { font-size: 1.6rem; color: var(--accent); font-weight: 650; display: block; margin-bottom: .5rem; }
.footer { margin-top: 1.75rem; color: var(--muted); font-size: .92rem; }
.footer .fine { font-size: .8rem; }