:root {
  --color-bg: #ffffff;
  --color-bg-soft: #fbfbfb;
  --color-border: #e6e6e6;
  --color-border-soft: #ececec;
  --color-text: #3C545E;
  --color-text-soft: #50636b;
  --color-text-muted: #717c8e;
  --color-accent: #C90217;
  --color-accent-soft: #fffafa;
  /* Content widths. Every view centres its content in the pane and only the
     ceiling changes with what is inside: a readable measure for prose, more
     room for side-by-side editors, most for tables. */
  /* One column width for every view, chat included, so nothing shifts when
     switching between them. A table is the exception — its width follows from
     what a row must hold, not from taste — and opts out per block, not per
     page: a settings page in the same section stays on the normal column. */
  --content-width: 1000px;
  --content-width-table: 1240px;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Fira Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); color: var(--color-text); letter-spacing: 0.2px; font-weight: 600; }

.accent { color: var(--color-accent); }
.bar-accent { height: 3px; width: 56px; background: var(--color-accent); margin: 8px 0 16px; }

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  background: var(--color-accent);
  color: #fff;
}
.btn:hover { filter: brightness(0.95); }
.btn-outline {
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

input[type=text], input[type=email], input[type=password], textarea, select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  width: 100%;
  background: #fff;
  color: var(--color-text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; border-color: var(--color-accent); }

.label-eyebrow {
  text-transform: uppercase; letter-spacing: 1.4px;
  font-size: 11px; color: var(--color-accent); font-weight: 600;
  font-family: var(--font-display);
}

.login-logo {
  display: block;
  width: 100%;
  max-width: 300px;        /* harte Obergrenze, schmaler bei kleinen Screens */
  height: auto;
  margin: 0 auto 20px;     /* zentriert, Abstand nach unten zum Titel */
}

/* ───── App frame ─────
   The SPA is locked to the viewport: the sidebar and the pane scroll on their
   own, the window never does. Scoped to `.app-frame` so the login page (same
   stylesheet, no shell) keeps a normally scrolling body. */
body.app-frame {
  height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Mobile browsers: dvh accounts for the collapsing URL bar. */
@supports (height: 100dvh) { body.app-frame { height: 100dvh; } }
body.app-frame > .shell { flex: 1; min-height: 0; }

.shell { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: minmax(0, 1fr); }
/* Every view renders one .main into the pane; the pane itself never scrolls.
   Addressed by id on purpose — `.pane` is taken by the translate/write grid. */
#app { min-height: 0; display: flex; flex-direction: column; }
#app > .main { flex: 1; min-height: 0; }
.sidebar {
  background: var(--color-bg-soft); border-right: 1px solid var(--color-border-soft);
  padding: 12px; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  /* Hold the scrollbar's space whether or not it is showing: otherwise the
     whole column reflows by ~15px the moment the conversation list outgrows
     the window, and the logo ends up against the edge. */
  scrollbar-gutter: stable;
}
.side-brand { display: block; padding: 2px 4px 12px; }
/* Fits the 224px of sidebar width minus the reserved scrollbar gutter, with a
   little air left. Below ~176px the claim 'Emulating Human Biology' drops under
   10px and stops being readable, so there is not much room downwards. The ratio
   replaces a fixed height so the proportion lives in one place. */
.side-logo { display: block; width: 190px; aspect-ratio: 306 / 76; height: auto; }
.side-newchat { width: 100%; margin-bottom: 10px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav-item { text-decoration: none; }
.side-ico { display: inline-flex; color: currentColor; }
/* Filled by whatever the current view owns: templates and history in the chat,
   the sub-pages in the admin area, nothing elsewhere. */
.side-section { display: flex; flex-direction: column; gap: 2px; }

/* Identity and account actions sit at the bottom edge, where other apps put
   them and out of the way of the lists above. */
.side-account {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
}
.side-acct-id { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.side-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #eef0f2; color: var(--color-text-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
}
.side-acct-mail {
  font-size: 12.5px; color: var(--color-text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-acct-dept { font-size: 11px; color: var(--color-text-muted); padding: 2px 2px 0 36px; }
.side-acct-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 0 36px; }
.side-acct-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--color-text-muted); text-decoration: none;
}
.side-acct-link:hover { color: var(--color-accent); text-decoration: underline; }

.sidebar h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-accent); margin: 16px 0 6px; }
.sidebar .item { padding: 6px 8px; border-radius: 2px; cursor: pointer; font-size: 13px; color: var(--color-text-soft); }
.sidebar .item:hover { background: #f5f5f5; }
.sidebar .item.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.sidebar .conv-item { display: flex; align-items: center; gap: 6px; }
.sidebar .conv-item .conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .conv-item .conv-delete {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 18px; line-height: 1;
  padding: 0 4px; visibility: hidden;
}
.sidebar .conv-item:hover .conv-delete { visibility: visible; }
.sidebar .conv-item .conv-delete:hover { color: var(--color-accent); }

.main { padding: 28px 24px 20px; min-height: 0; overflow-y: auto; }

/* Every view opens the same way: eyebrow, title, actions on the right, a
   hairline underneath. The 56px accent bar this replaces marked the start of a
   page well enough in the tools, but would have been out of place above the
   first chat message — the eyebrow carries the accent colour instead. */
/* Centred in every view, the chat included — it is the page's title, not the
   title of whatever is currently open in it. */
.page-head { display: flex; align-items: flex-start; justify-content: center; gap: 12px; text-align: center; }
.page-head-titles { min-width: 0; }
.page-title {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  margin-top: 2px;
}
/* Which conversation is open, plus its actions — below the rule, aligned with
   the messages rather than with the page title. */
.conv-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.conv-name {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.page-rule { height: 1px; background: var(--color-border-soft); margin: 12px 0 18px; }

/* Page views centre every child on one column. The chat does the same thing
   per element instead (see .main-chat), because its parts scroll separately. */
/* Careful with inline styles on a direct child: a `margin: 0 0 10px`
   shorthand also sets the horizontal margins to 0 and silently defeats
   this centring. Use `margin-bottom` there. */
.main.view-page > * { width: 100%; max-width: var(--content-width); margin-inline: auto; }
.main.view-page > .wide-block { max-width: var(--content-width-table); }

/* Chat: the message list is the only scrolling region; header row and
   composer are pinned above and below it. */
.main.main-chat { overflow: hidden; display: flex; flex-direction: column; }
.main.main-chat > * { flex: none; }
/* The column is centred in the pane instead of hugging the left edge: on a
   wide monitor the leftover space then reads as margin rather than as a
   hole. Header, messages and composer share one width so they line up.
   `width: 100%` is load-bearing for the two direct children of the flex
   column: on a flex item an auto margin beats the default stretch, so
   without it the header would shrink to its content and float in the
   middle instead of spanning the column. */
.main.main-chat > .page-head,
.main.main-chat > .page-rule,
.main.main-chat > .conv-bar,
.chat-start,
.chat-readonly-note,
.chat-list,
#budget-bar,
.pending-attachments,
.chat-input,
.composer-tools,
.hl-legend { width: 100%; max-width: var(--content-width); margin-inline: auto; }

.main.main-chat > .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* Chat density: tighter than the rest of the app on purpose — a reply with a
   few paragraphs and a list should not eat a whole screen. `body` keeps
   line-height 1.5 for forms and admin tables; 1.4 here matches the composer. */
.chat-list { display: flex; flex-direction: column; gap: 6px; }
.bubble { padding: 7px 12px; border-radius: 4px; max-width: 75%; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; position: relative; }
.bubble-provider {
  display: block;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.bubble.assistant .bubble-provider { color: var(--color-text-soft); }
/* Nur sichtbar, wenn der Provider mit einem anderen Modell geantwortet hat als
   angefragt. Bewusst dezent — es ist ein Hinweis, kein Fehler. */
.bubble-model-mismatch {
  display: block;
  font-size: 10px; font-weight: 600;
  color: #a06000;
  margin: -2px 0 4px;
  cursor: help;
}
.bubble-usage {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px dashed var(--color-border-soft);
  font-family: ui-monospace, Consolas, monospace;
}
/* Retry auf einem fehlgeschlagenen Turn — sitzt unter der Fehlermeldung. */
.retry-btn {
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
}
.conv-total {
  font-size: 12px; color: var(--color-text-soft);
  font-family: ui-monospace, Consolas, monospace;
  background: var(--color-bg-soft);
  padding: 3px 10px; border-radius: 12px;
}

#model-select { max-width: 220px; }
.bubble.user { background: var(--color-accent); color: #fff; align-self: flex-end; }
.bubble.assistant { background: #f5f5f5; color: var(--color-text); align-self: flex-start; border: 1px solid var(--color-border-soft); }

.chat-input { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.chat-input textarea { resize: vertical; min-height: 56px; }

/* Under the input: which model answers, and what may be pasted. Both used to
   live in the top bar, where they were out of sight exactly while typing. */
.composer-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.composer-tools select {
  width: auto; padding: 3px 8px; font-size: 12.5px;
  background: #fff; border-radius: 12px;
}
.composer-tools .cost-hint { font-size: 11px; color: var(--color-text-muted); }
.class-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border-radius: 12px; padding: 3px 10px; font-size: 11.5px;
  margin-left: auto; max-width: 58%;
}
.class-chip-level {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
}
.class-chip-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-input .attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 10px; line-height: 1;
}
.chat-input .attach-btn svg { display: block; }

.pending-attachments {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px;
}
.pending-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f5f5f5; border: 1px solid var(--color-border);
  border-radius: 12px; padding: 3px 8px 3px 10px;
  font-size: 12px; color: var(--color-text-soft);
}
.pending-chip-size { color: var(--color-text-muted); font-size: 11px; }
.pending-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 16px; line-height: 1;
  padding: 0 0 0 4px;
}
.pending-chip-x:hover { color: var(--color-accent); }
.pending-warn { color: var(--color-accent); font-size: 12px; margin-left: 4px; }

.bubble-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.bubble-att-chip {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.2);
  border-radius: 10px; padding: 2px 8px;
  font-size: 11px;
  text-decoration: none; color: inherit;
}
.bubble-att-chip-link { cursor: pointer; }
.bubble-att-chip-link:hover {
  background: rgba(255,255,255,0.35);
  text-decoration: underline;
}
.bubble.assistant .bubble-att-chip-link:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.bubble.assistant .bubble-att-chip {
  background: #fff; border: 1px solid var(--color-border-soft);
  color: var(--color-text-soft);
}
.bubble-att-size { opacity: 0.7; margin-left: 4px; font-size: 10px; }

/* User messages keep newlines; assistant content is rendered as HTML
   (Markdown → DOMPurify) so pre-wrap would create double line breaks. */
.bubble.user .bubble-content { white-space: pre-wrap; }

/* Assistant markdown content inside bubbles */
.bubble.assistant .bubble-content > *:first-child { margin-top: 0; }
.bubble.assistant .bubble-content > *:last-child  { margin-bottom: 0; }
.bubble.assistant .bubble-content p { margin: 0.35em 0; }
.bubble.assistant .bubble-content h1,
.bubble.assistant .bubble-content h2,
.bubble.assistant .bubble-content h3,
.bubble.assistant .bubble-content h4,
.bubble.assistant .bubble-content h5,
.bubble.assistant .bubble-content h6 {
  margin: 0.6em 0 0.25em; line-height: 1.25;
}
.bubble.assistant .bubble-content h1 { font-size: 18px; }
.bubble.assistant .bubble-content h2 { font-size: 16px; }
.bubble.assistant .bubble-content h3 { font-size: 14.5px; }
.bubble.assistant .bubble-content h4,
.bubble.assistant .bubble-content h5,
.bubble.assistant .bubble-content h6 { font-size: 13.5px; }
.bubble.assistant .bubble-content ul,
.bubble.assistant .bubble-content ol { margin: 0.3em 0; padding-left: 1.3em; }
.bubble.assistant .bubble-content li { margin: 0.1em 0; }
/* "Loose" markdown lists wrap each item's text in <p>; collapse those margins
   so a list with blank lines between items doesn't get airy line spacing. */
.bubble.assistant .bubble-content li > p { margin: 0; }
.bubble.assistant .bubble-content li > p + p { margin-top: 0.3em; }
.bubble.assistant .bubble-content blockquote {
  margin: 0.4em 0; padding: 2px 12px;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-soft);
}
.bubble.assistant .bubble-content a {
  color: var(--color-accent); text-decoration: underline;
}
.bubble.assistant .bubble-content hr {
  border: none; border-top: 1px solid var(--color-border-soft); margin: 0.6em 0;
}

/* Inline code */
.bubble.assistant .bubble-content code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  background: #eef0f2; padding: 1px 5px; border-radius: 3px;
}
/* Code blocks — note: hljs theme is loaded separately and styles tokens.
   Here we just style the container. */
.bubble.assistant .bubble-content pre {
  margin: 0.45em 0; padding: 0;
  background: #f6f8fa; border: 1px solid var(--color-border-soft);
  border-radius: 4px; overflow: hidden;
}
.bubble.assistant .bubble-content pre code {
  display: block; padding: 8px 11px; background: transparent;
  font-size: 12.5px; line-height: 1.4; overflow-x: auto;
}

/* Tables */
.bubble.assistant .bubble-content table {
  border-collapse: collapse; margin: 0.4em 0; font-size: 13px;
}
.bubble.assistant .bubble-content th,
.bubble.assistant .bubble-content td {
  border: 1px solid var(--color-border); padding: 3px 7px; text-align: left;
}
.bubble.assistant .bubble-content th { background: var(--color-bg-soft); }

/* The assistant bubble may use the whole column: its right edge then lines up
   with the header row, the composer and a long user message, and tables and
   code blocks get every pixel the column has. */
.bubble.assistant { max-width: 100%; }

/* ───── PII anonymization indicators ───── */
.anon-chip {
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-body);
  overflow: hidden;
}
.anon-chip-out { border-left: 3px solid #5a9c3f; }  /* anonymized → green */
.anon-chip-in  { border-left: 3px solid #4a78b5; }  /* restored   → blue  */
/* released → the same warning colour as the composer's release-warning note
   (.hl-release-warn), so "sent in the clear" reads consistently end to end. */
.anon-chip-released { border-left: 3px solid var(--color-accent); }
.anon-chip-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 9px; cursor: pointer; user-select: none;
  font-size: 11.5px; font-weight: 600;
}
.anon-chip-out .anon-chip-head { color: #2f5722; }
.anon-chip-in  .anon-chip-head { color: #234a72; }
.anon-chip-released .anon-chip-head { color: var(--color-accent); }
.anon-chip-label { flex: 1; }
.anon-chip-toggle { color: var(--color-text-muted); font-size: 10px; }
.anon-detail {
  padding: 6px 9px; border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg-soft, #fafafa);
}
.anon-detail-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; margin: 3px 0; color: var(--color-text-soft);
}
.anon-detail-type {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  background: #eef0f2; color: var(--color-text-soft);
  padding: 1px 5px; border-radius: 3px;
}
.anon-detail-row code {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  background: #eef0f2; padding: 1px 5px; border-radius: 3px;
}
.anon-orig { color: #8a1f1f; }
.anon-ph   { color: #234a72; }
.anon-arrow { color: var(--color-text-muted); }

/* ───── Live PII highlighting in the chat input ───── */
.hl-wrap { position: relative; flex: 1; }
.hl-wrap textarea {
  display: block; width: 100%;
  position: relative; z-index: 2;
  background: transparent;            /* let the backdrop show through */
}
.hl-backdrop {
  position: absolute; inset: 0; z-index: 1;
  margin: 0; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  color: transparent;
}
/* Identical text metrics so the highlight rectangles line up with the text. */
.hl-wrap textarea, .hl-backdrop {
  font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  padding: 8px 10px; border: 1px solid transparent;
  box-sizing: border-box; letter-spacing: normal;
}
.hl-wrap textarea { border-color: var(--color-border); }
.hl-backdrop .hlm { color: transparent; border-radius: 2px; }
.hlm-identity     { background: rgb(167 139 250 / 24%); box-shadow: inset 0 -2px 0 0 #6d28d9; }
.hlm-contact      { background: rgb(59 130 246 / 20%);  box-shadow: inset 0 -2px 0 0 #1d4ed8; }
.hlm-financial    { background: rgb(217 70 239 / 20%);  box-shadow: inset 0 -2px 0 0 #a21caf; }
.hlm-network      { background: rgb(20 184 166 / 20%);  box-shadow: inset 0 -2px 0 0 #0f766e; }
.hlm-location     { background: rgb(34 197 94 / 20%);   box-shadow: inset 0 -2px 0 0 #15803d; }
.hlm-password     { background: rgb(244 63 94 / 20%);   box-shadow: inset 0 -2px 0 0 #be123c; }
.hlm-organization { background: rgb(249 115 22 / 20%);  box-shadow: inset 0 -2px 0 0 #c2410c; }
.hlm-low-signal   { background: rgb(148 163 184 / 26%); box-shadow: inset 0 -2px 0 0 #475569; }
/* Restored values highlighted inside an assistant reply keep readable text
   (the backdrop variant is transparent; this one is not). */
.bubble-content mark.hlm { color: inherit; padding: 0 1px; border-radius: 2px; }

/* Tooltip naming the entity type of the hovered span, for readers who miss the
   legend under the input. Positioned from JS (hit-test in chat.js) because the
   marks themselves never see the pointer. Deliberately plain — the colour of
   the span and the legend already carry the classification, so anything more
   here would read as a second legend. Opaque, because it floats over text. */
.hl-tip {
  display: none; position: absolute; z-index: 3;
  padding: 3px 8px; border-radius: 4px;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
  font-size: 11px; line-height: 1.3; white-space: nowrap;
  pointer-events: none;  /* never steal a click from the textarea below */
}

.hl-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px;
}
.hl-legend-lead { font-size: 11px; color: var(--color-text-soft); font-weight: 600; }
.hl-tag {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; letter-spacing: 0.3px;
  /* Chips are <button>s now (release is a click away) — drop the native
     button chrome so they still read as the plain legend tags they were. */
  border: none; cursor: pointer;
}
.hlt-identity     { background: rgb(167 139 250 / 22%); color: #6d28d9; }
.hlt-contact      { background: rgb(59 130 246 / 16%);  color: #1d4ed8; }
.hlt-financial    { background: rgb(217 70 239 / 16%);  color: #a21caf; }
.hlt-network      { background: rgb(20 184 166 / 16%);  color: #0f766e; }
.hlt-location     { background: rgb(34 197 94 / 16%);   color: #15803d; }
.hlt-password     { background: rgb(244 63 94 / 16%);   color: #be123c; }
.hlt-organization { background: rgb(249 115 22 / 16%);  color: #c2410c; }
.hlt-low-signal   { background: rgb(148 163 184 / 20%); color: #475569; }

/* A released chip is outlined rather than filled: the colour still carries the
   entity group, the missing fill plus the open padlock in the chip text say
   "goes out in the clear". Not struck through, which would read as "removed". */
.hl-tag-released {
  background: transparent;
  border: 1px dashed currentColor;
}
.hl-release-note {
  flex-basis: 100%;
  font-size: 0.85em;
  line-height: 1.4;
}
/* No dedicated --warn token in this file; --color-accent is the colour the
   codebase already uses for warnings (see .pending-warn above). */
.hl-release-warn { color: var(--color-accent); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(60,84,94,0.35); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal {
  background: #fff; border-radius: 4px; width: min(560px, 90vw);
  padding: 22px 24px; border-top: 3px solid var(--color-accent);
  max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin: 0 0 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.file-row {
  padding: 6px 0; border-bottom: 1px solid var(--color-border-soft);
  font-size: 13px;
}
.file-row:last-child { border-bottom: none; }

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg-soft); }
.login-card { background: #fff; padding: 32px 36px; border-radius: 4px; width: min(380px, 90vw); border-top: 3px solid var(--color-accent); box-shadow: 0 4px 14px rgba(60,84,94,0.08); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .sub { color: var(--color-text-muted); font-size: 13px; margin-bottom: 18px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--color-text-soft); margin-bottom: 4px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.8px; }
.error { color: var(--color-accent); font-size: 12px; margin-top: 6px; min-height: 14px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border-soft); font-size: 13px; }
.table th { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-soft); }
/* A cell holding a field plus its buttons keeps them on one line — wrapped,
   every row in the table grows by a line and the column edges go ragged. */
.table td.cell-controls, .table th.cell-controls { white-space: nowrap; }

.translate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.translate-grid .pane h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-accent); }
/* Both columns end on the same line even when one carries controls the
   other does not — Improve text has a language/tone row only on the left. */
.translate-grid .pane { display: flex; flex-direction: column; }
/* Settings that govern the whole run sit in a band above both columns. */
.control-row {
  flex-wrap: wrap; gap: 18px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border-soft);
}
.translate-grid .pane > textarea { flex: 1; }
.translate-grid textarea { min-height: 240px; }

.muted { color: var(--color-text-muted); }
.row { display: flex; gap: 12px; align-items: center; }

.sens-level-public                { background: #fde7e7; color: #b00020; }
.sens-level-internal              { background: #fff4d6; color: #8a6d00; }
.sens-level-confidential          { background: #e0f0ff; color: #1f5a8a; }
.sens-level-strictly_confidential { background: #e2f4e2; color: #1c6a2a; }

/* ───── Tool Hub: placeholder notice ───── */
.tool-hub-notice {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-soft);
  padding: 10px 14px; border-radius: 3px;
  font-size: 13px;
  margin: 14px 0 0;
}