:root {
  --tv-ink: #1d2433;
  --tv-paper: #fbfaf7;
  --tv-line: #e6e2d9;
  --tv-accent: #2f6f5e;
  --tv-accent-soft: #e3f0eb;
  --tv-auto: #d8efe6;
  --tv-auto-line: #2f8f6f;
  --tv-sugg: #fdf0d2;
  --tv-sugg-line: #c98a12;
  --tv-off: #f1f1f1;
}
body { background: var(--tv-paper); color: var(--tv-ink); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; }
.tv-nav { background: #fff; border-bottom: 1px solid var(--tv-line); }
.tv-nav .nav-link.active { color: var(--tv-accent); font-weight: 600; }
.navbar-brand { font-weight: 600; letter-spacing: -0.01em; }
.tv-logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tv-accent); color: #fff; font-family: Georgia, serif; font-size: 15px; margin-right: 4px; }
.card { border-color: var(--tv-line); border-radius: 12px; }
.card-header { background: #fff; border-bottom-color: var(--tv-line); font-weight: 600; }
.btn-primary { background: var(--tv-accent); border-color: var(--tv-accent); }
.btn-primary:hover, .btn-primary:focus { background: #255a4c; border-color: #255a4c; }
.btn-outline-primary { color: var(--tv-accent); border-color: var(--tv-accent); }
.btn-outline-primary:hover { background: var(--tv-accent); border-color: var(--tv-accent); }
.text-accent { color: var(--tv-accent); }
.tv-subnav .nav-link { color: var(--tv-ink); }
.tv-subnav .nav-link.active { background: var(--tv-accent); }

/* Editor */
.tv-input { font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif; font-size: 1.08rem; line-height: 1.7; min-height: 320px; resize: vertical; }
.tv-output { font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif; font-size: 1.08rem; line-height: 1.9; white-space: pre-wrap; min-height: 320px; background: #fff; border: 1px solid var(--tv-line); border-radius: 10px; padding: 1rem 1.2rem; }
.tv-w { border-radius: 4px; padding: 0 2px; cursor: pointer; transition: background .15s; }
.tv-w.auto.on { background: var(--tv-auto); border-bottom: 2px solid var(--tv-auto-line); }
.tv-w.sugg.on { background: var(--tv-auto); border-bottom: 2px solid var(--tv-auto-line); }
.tv-w.auto.off { background: var(--tv-off); border-bottom: 2px dashed #999; }
.tv-w.sugg.off { background: var(--tv-sugg); border-bottom: 2px dotted var(--tv-sugg-line); }
.tv-w.manual.on { background: #e5e8fb; border-bottom: 2px solid #4b5bd6; }
.tv-w:hover { filter: brightness(.95); }
.tv-w.hard { text-decoration: underline wavy #c45; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.tv-legend span { display: inline-block; padding: 0 6px; border-radius: 4px; margin-right: 6px; font-size: .85rem; }
.tv-legend .l-auto { background: var(--tv-auto); border-bottom: 2px solid var(--tv-auto-line); }
.tv-legend .l-sugg { background: var(--tv-sugg); border-bottom: 2px dotted var(--tv-sugg-line); }
.tv-legend .l-off { background: var(--tv-off); border-bottom: 2px dashed #999; }
.tv-legend .l-hard { text-decoration: underline wavy #c45; }
.tv-stat { border: 1px solid var(--tv-line); border-radius: 10px; padding: .7rem .9rem; background: #fff; height: 100%; }
.tv-stat .v { font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.tv-stat .l { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.tv-stat .d { font-size: .82rem; }
.tv-bar { height: 8px; border-radius: 4px; background: #eee; overflow: hidden; }
.tv-bar > div { height: 100%; background: var(--tv-accent); }
.popover { max-width: 340px; }
.tv-alt { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; }
.tv-alt:hover { background: var(--tv-accent-soft); }
.tv-alt .meta { font-size: .75rem; color: #6b7280; }
.diff-del { background: #fde2e2; text-decoration: line-through; }
.diff-ins { background: var(--tv-auto); }

/* Beheer */
.tv-kpi { border: 1px solid var(--tv-line); border-radius: 12px; background: #fff; padding: 1rem 1.2rem; }
.tv-kpi .v { font-size: 1.8rem; font-weight: 600; }
.tv-kpi .l { color: #6b7280; font-size: .85rem; }
.tv-review-card { border-left: 4px solid var(--tv-sugg-line); }
.tv-review-card.sel { outline: 2px solid var(--tv-accent); }
.badge-conf { font-variant-numeric: tabular-nums; }
pre.tv-log { background: #111827; color: #d1fae5; font-size: .78rem; max-height: 260px; overflow: auto; border-radius: 8px; padding: .8rem; }
.table > :not(caption) > * > * { background: transparent; }
.tv-login { max-width: 420px; margin: 8vh auto; }
.kbd { font-family: ui-monospace, monospace; background: #eee; border-radius: 4px; padding: 0 4px; font-size: .8rem; }