/* ╔══════════════════════════════════════════════════════════════╗
   ║  E-Rechnungs-Validator – App Stylesheet                     ║
   ║  GitHub Dark design system on Bootstrap 5 foundation        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }

html { font-size: 20px }

body {
  background: var(--gh-bg);
  color: var(--gh-fg);
  font-family: var(--bs-body-font-family);
  font-size: 18px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace only for data/code */
.mono, code, kbd, pre {
  font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gh-fg);
  font-weight: 600;
  line-height: 1.25;
}

a { color: var(--gh-accent); text-decoration: none }
a:hover { text-decoration: underline; color: #79c0ff }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--gh-border); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--gh-fg-subtle) }

/* Utility */
.hidden { display: none !important }
.tab-panel { display: none }
.tab-panel.active { display: block }
.empty {
  text-align: center; padding: 48px 20px;
  color: var(--gh-fg-muted); font-size: 16px;
}
.empty .icon { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5 }

/* Animations */
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── App Shell ────────────────────────────────────────────────── */
.app-shell { flex: 1; display: flex; overflow: hidden; min-height: 0 }

main {
  flex: 1; overflow-y: auto;
  padding: 20px 24px; min-width: 0;
  max-width: 1600px; margin: 0 auto; width: 100%;
}

/* ── Header ───────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 48px; flex-shrink: 0;
  background: var(--gh-canvas);
  border-bottom: 1px solid var(--gh-border);
}
.app-header .ms-logo {
  height: 26px; width: auto;
  filter: brightness(0) invert(1); opacity: .8;
}
:root.light .app-header .ms-logo { filter: none; opacity: 1 }

.app-title {
  font-size: 19px; font-weight: 600; color: var(--gh-fg);
  letter-spacing: -.01em; white-space: nowrap;
}
.app-title em { color: var(--gh-fg-muted); font-style: normal; font-weight: 400 }

.header-spacer { flex: 1 }

/* Server status */
.srv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--gh-border); background: transparent;
  cursor: pointer; color: var(--gh-fg-muted);
  transition: border-color .15s, color .15s; white-space: nowrap;
}
.srv-btn:hover { border-color: var(--gh-accent); color: var(--gh-fg) }

.sdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gh-fg-muted); flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.sdot.ok  { background: var(--gh-success); box-shadow: 0 0 6px var(--gh-success) }
.sdot.err { background: var(--gh-danger);  box-shadow: 0 0 6px var(--gh-danger) }
.sdot.chk { background: var(--gh-warn);    animation: pulse 1.2s infinite }

/* Download button */
.dl-wrap { position: relative }
.dl-btn  { color: var(--gh-accent) !important; border-color: var(--gh-accent) !important; margin-right: 6px }
.dl-btn:hover { background: var(--gh-accent-subtle) !important }
.dl-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 8px; min-width: 210px; z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden;
}
.dl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; color: var(--gh-fg); text-decoration: none;
  font-size: 14px; transition: background .1s;
}
.dl-item:hover { background: var(--gh-canvas-subtle); color: var(--gh-fg) }
.dl-releases { border-top: 1px solid var(--gh-border); color: var(--gh-fg-muted) !important; font-size: 13px }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--gh-canvas);
  border-right: 1px solid var(--gh-border);
  display: flex; flex-direction: column;
  overflow: hidden; transition: width .2s ease;
}
.sidebar.collapsed { width: 52px }

.side-nav {
  flex: 1; display: flex; flex-direction: column;
  padding: 8px 0; gap: 1px;
  overflow-y: auto; overflow-x: hidden;
}
.tab-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 0;
  border: none; border-left: 3px solid transparent;
  background: transparent; color: var(--gh-fg-muted);
  font-family: inherit; font-size: 16px; font-weight: 400;
  cursor: pointer; white-space: nowrap; text-align: left;
  text-transform: none; letter-spacing: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.tab-btn:hover:not(.active) { background: var(--gh-canvas-subtle); color: var(--gh-fg) }
.tab-btn.active { background: var(--gh-canvas-subtle); color: var(--gh-accent); font-weight: 500; border-left-color: var(--gh-accent) }

.tab-icon { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; line-height: 1 }
.nav-label { overflow: hidden; white-space: nowrap; transition: opacity .15s }
.sidebar.collapsed .nav-label { opacity: 0; pointer-events: none }
.sidebar.collapsed .tab-btn { justify-content: center; padding: 8px 0; border-left-color: transparent !important }

.side-nav-bottom {
  padding: 6px 0 0;
  border-top: 1px solid var(--gh-border);
  flex-shrink: 0;
}
.sidebar.collapsed .side-nav-bottom { padding: 6px 0 0 }

.sidebar-toggle {
  border: none; background: none; cursor: pointer; width: 100%;
  color: var(--gh-fg-muted); padding: 10px 12px;
  border-top: 1px solid var(--gh-border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: inherit; font-size: 15px;
  transition: color .12s, background .12s;
}
.sidebar-toggle:hover { color: var(--gh-fg); background: var(--gh-canvas-subtle) }
.toggle-icon { font-size: 14px; transition: transform .2s; flex-shrink: 0 }
.sidebar.collapsed .toggle-icon { transform: rotate(180deg) }
.sidebar.collapsed .sidebar-toggle { justify-content: center; padding: 10px 0 }

/* Dynamic session tabs */
.tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  font-size: 14px; color: var(--gh-fg-muted);
  background: transparent; border: none; cursor: pointer;
  transition: background .12s, color .12s; flex-shrink: 0;
}
.tab-close:hover { background: var(--gh-danger); color: #fff }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 6px;
  font-family: inherit; font-size: 16px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; line-height: 1.4;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:active { opacity: .8 }
.btn:disabled { opacity: .4; cursor: not-allowed }

/* Primary – GitHub green */
.btn:not(.sec):not(.danger) {
  background: #238636; color: #fff;
  border-color: rgba(240,246,252,.1);
}
.btn:not(.sec):not(.danger):hover:not(:disabled) {
  background: #2ea043; border-color: rgba(240,246,252,.15);
  box-shadow: 0 0 0 3px var(--gh-success-subtle);
}

/* Secondary */
.btn.sec {
  background: var(--gh-canvas-subtle); color: var(--gh-fg);
  border-color: var(--gh-border);
}
.btn.sec:hover:not(:disabled) {
  background: #30363d; border-color: var(--gh-fg-muted);
}

/* Danger */
.btn.danger {
  background: var(--gh-danger-subtle); color: var(--gh-danger);
  border-color: rgba(248,81,73,.3);
}
.btn.danger:hover:not(:disabled) {
  background: rgba(248,81,73,.22); border-color: rgba(248,81,73,.5);
}

.btn.sm { padding: 3px 8px; font-size: 15px }
.btn.lg { padding: 7px 18px; font-size: 18px }

.start-bar {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 8px;
  margin-top: 12px; margin-bottom: 4px;
}

.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--gh-fg-muted); font-size: 16px;
  padding: 3px 6px; border-radius: 4px; line-height: 1;
  transition: background .12s, color .12s;
}
.btn-icon:hover     { background: var(--gh-canvas-subtle); color: var(--gh-fg) }
.btn-icon.del:hover { background: var(--gh-danger); color: #fff }

/* ── Forms ────────────────────────────────────────────────────── */
.meta-form {
  background: var(--gh-canvas);
  border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 16px;
  margin-bottom: 12px;
}
.meta-form h3 {
  font-size: 18px; font-weight: 600; color: var(--gh-fg);
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--gh-border);
}

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
.form-grid.three { grid-template-columns: 1fr 1fr 1fr }
.form-grid.one   { grid-template-columns: 1fr }

.field { position: relative; }
.field label {
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 500;
  color: var(--gh-fg-muted);
  pointer-events: none; z-index: 1;
  transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden;
  max-width: calc(100% - 20px); text-overflow: ellipsis;
}
.field:has(textarea) label { top: 14px; transform: none; }
.field input,
.field textarea,
.field select {
  width: 100%; background: var(--gh-canvas-subtle);
  border: 1px solid var(--gh-border); border-radius: 6px;
  color: var(--gh-fg); font-family: inherit; font-size: 14px;
  padding: 20px 10px 6px; outline: none; resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gh-accent);
  box-shadow: 0 0 0 3px var(--gh-accent-subtle);
}
.field textarea { min-height: 80px }
.field select option { background: var(--gh-canvas) }
.field:has(input:focus) label,
.field:has(input:not(:placeholder-shown)) label,
.field:has(textarea:focus) label,
.field:has(textarea:not(:placeholder-shown)) label,
.field:has(select) label,
.field:has(input[type="date"]) label { top: 5px; transform: none; font-size: 11px; }
.field:has(input:focus) label,
.field:has(textarea:focus) label,
.field:has(select:focus) label { color: var(--gh-accent); }
.field input::placeholder,
.field textarea::placeholder { opacity: 0; transition: opacity .1s ease; }
.field input:focus::placeholder,
.field textarea:focus::placeholder { opacity: 1; }

select.filter-sel {
  background: var(--gh-canvas-subtle);
  border: 1px solid var(--gh-border); border-radius: 6px;
  color: var(--gh-fg); font-family: inherit; font-size: 16px;
  padding: 4px 8px; outline: none; cursor: pointer;
  transition: border-color .15s;
}
select.filter-sel:focus { border-color: var(--gh-accent) }
select.filter-sel option { background: var(--gh-canvas) }

.settings-rows { display: flex; flex-direction: column }
.settings-row {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 0; border-bottom: 1px solid var(--gh-border);
}
.settings-row:last-child { border-bottom: none }
.settings-lbl { width: 180px; flex-shrink: 0; font-size: 16px; color: var(--gh-fg) }
.settings-sel {
  width: 300px; background: var(--gh-bg);
  border: 1px solid var(--gh-border); border-radius: 6px;
  color: var(--gh-fg); font-family: inherit; font-size: 16px;
  padding: 5px 10px; outline: none; cursor: pointer;
  transition: border-color .15s;
}
.settings-sel:focus { border-color: var(--gh-accent) }
.settings-sel option { background: var(--gh-canvas) }

.sv-saved { font-size: 15px; color: var(--gh-success); display: none }
.sv-saved.show { display: inline }

/* ── Validator Bar ────────────────────────────────────────────── */
.validator-bar {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 10px 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vbar-label {
  font-size: 15px; font-weight: 500;
  color: var(--gh-fg-muted); white-space: nowrap;
}
.vbar-opts { display: flex; gap: 4px; flex: 1; flex-wrap: wrap }
.vopt {
  background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border);
  color: var(--gh-fg-muted); font-family: inherit; font-size: 16px;
  padding: 4px 12px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all .12s;
}
.vopt:hover { color: var(--gh-fg); border-color: var(--gh-fg-muted) }
.vopt.active.mustang { color:var(--gh-mustang); border-color:var(--gh-mustang); background:var(--gh-mustang-subtle) }
.vopt.active.kosit   { color:var(--gh-done);    border-color:var(--gh-done);    background:var(--gh-done-subtle) }
.vopt.active.both    { color:var(--gh-accent);  border-color:var(--gh-accent);  background:var(--gh-accent-subtle) }

.vopt-logo { height: 18px; width: auto; vertical-align: middle; filter: brightness(0) invert(50%) }
.vopt.active.mustang .vopt-logo { filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(400%) hue-rotate(5deg) }
.vstatus-logo { height: 14px; filter: brightness(0) invert(60%) }
.vbar-status { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.vstatus {
  font-size: 15px; padding: 2px 8px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid;
}
.vstatus.ok   { background:var(--gh-success-subtle); border-color:rgba(63,185,80,.3);  color:var(--gh-success) }
.vstatus.err  { background:var(--gh-danger-subtle);  border-color:rgba(248,81,73,.3);  color:var(--gh-danger) }
.vstatus.warn { background:var(--gh-warn-subtle);    border-color:rgba(210,153,34,.3); color:var(--gh-warn) }

/* ── Dropzone ─────────────────────────────────────────────────── */
.dz {
  border: 2px dashed var(--gh-border); border-radius: 6px;
  padding: 40px 24px; text-align: center; cursor: pointer;
  background: var(--gh-canvas);
  transition: border-color .15s, background .15s;
}
.dz:hover, .dz.over { border-color: var(--gh-accent); background: var(--gh-accent-subtle) }
.dz.disabled { opacity: .4; pointer-events: none }

.dz-icon { font-size: 40px; display: block; margin-bottom: 8px; color: var(--gh-fg-muted) }
.dz h2   { font-size: 20px; font-weight: 600; color: var(--gh-fg); margin-bottom: 4px }
.dz p    { color: var(--gh-fg-muted); font-size: 16px; line-height: 1.6; margin: 0 }

.fmts { display: inline-flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; justify-content: center }
.fb {
  background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border);
  border-radius: 4px; padding: 2px 8px; font-size: 14px; color: var(--gh-accent);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.selected-file {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 8px 12px; margin-top: 8px;
  font-size: 16px; display: flex; align-items: center; gap: 8px;
}
.selected-file span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.folder-area {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.folder-area h3 { font-size: 18px; font-weight: 600; margin-bottom: 2px }
.folder-area p  { color: var(--gh-fg-muted); font-size: 16px; line-height: 1.5; margin: 0 }

.selected-files-info {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 6px 12px;
  font-size: 16px; color: var(--gh-accent); display: none; margin-bottom: 8px;
}

/* ── Stats ────────────────────────────────────────────────────── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.stat-box {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; padding: 12px 14px;
}
.stat-box label {
  display: block; font-size: 14px; font-weight: 500;
  color: var(--gh-fg-muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px;
}
.stat-box value {
  font-size: 28px; font-weight: 600; display: block;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.stat-box.total value { color: var(--gh-fg) }
.stat-box.valid value { color: var(--gh-success) }
.stat-box.warn  value { color: var(--gh-warn) }
.stat-box.error value { color: var(--gh-danger) }

.batch-progress { margin: 10px 0 }
.prog-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; font-size: 16px;
}
.prog-bar-wrap {
  background: var(--gh-canvas-subtle); border-radius: 100px;
  height: 4px; overflow: hidden;
}
.prog-bar {
  height: 100%; background: var(--gh-accent); border-radius: 100px;
  width: 0%; transition: width .2s;
}
.batch-timing {
  display: flex; gap: 20px; margin-top: 8px;
  font-size: 14px; color: var(--gh-fg-muted);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.batch-timing strong { color: var(--gh-fg) }

/* ── Filter / Results toolbar ─────────────────────────────────── */
.results-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.results-title {
  font-size: 18px; font-weight: 600; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-bar { display: flex; gap: 4px; flex-wrap: wrap }
.fbtn {
  background: var(--gh-canvas-subtle); border: 1px solid var(--gh-border);
  color: var(--gh-fg-muted); font-family: inherit; font-size: 15px;
  padding: 3px 10px; border-radius: 20px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.fbtn.active, .fbtn:hover {
  color: var(--gh-accent); border-color: var(--gh-accent);
  background: var(--gh-accent-subtle);
}

/* ── Result Cards ─────────────────────────────────────────────── */
.result-card {
  background: var(--gh-canvas); border: 1px solid var(--gh-border);
  border-radius: 6px; overflow: hidden; margin-bottom: 6px;
  animation: fadeUp .15s ease both;
}
.result-card.valid   { border-left: 3px solid var(--gh-success) }
.result-card.warn    { border-left: 3px solid var(--gh-warn) }
.result-card.invalid,
.result-card.error   { border-left: 3px solid var(--gh-danger) }

.rc-header {
  padding: 8px 12px; display: flex; align-items: center;
  gap: 8px; cursor: pointer; user-select: none;
}
.rc-header:hover { background: var(--gh-canvas-subtle) }

.rdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.valid .rdot   { background:var(--gh-success); box-shadow:0 0 5px var(--gh-success) }
.warn .rdot    { background:var(--gh-warn);    box-shadow:0 0 5px var(--gh-warn) }
.invalid .rdot,
.error .rdot   { background:var(--gh-danger);  box-shadow:0 0 5px var(--gh-danger) }

.rc-name   { flex:1; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
             font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.rc-fmt    { font-size:14px; color:var(--gh-fg-muted) }
.rc-mode   { font-size:14px; padding:1px 7px; border-radius:20px; border:1px solid; white-space:nowrap }
.rc-mode.mustang { color:var(--gh-mustang); border-color:rgba(45,212,191,.3); background:var(--gh-mustang-subtle) }
.rc-mode.kosit   { color:var(--gh-done);    border-color:rgba(163,113,247,.3); background:var(--gh-done-subtle) }
.rc-mode.both    { color:var(--gh-accent);  border-color:rgba(88,166,255,.3);  background:var(--gh-accent-subtle) }

.rc-lbl { font-size:15px; font-weight:600; white-space:nowrap }

.rc-dur {
  font-size:13px; color:var(--gh-fg-subtle); white-space:nowrap; flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.valid .rc-lbl   { color:var(--gh-success) }
.warn  .rc-lbl   { color:var(--gh-warn) }
.invalid .rc-lbl,
.error   .rc-lbl { color:var(--gh-danger) }

.rc-toggle { color:var(--gh-fg-muted); font-size:13px; transition:transform .18s; flex-shrink:0 }
.result-card.open .rc-toggle { transform:rotate(180deg) }

.rc-body { display:none; padding:0 12px 12px; border-top:1px solid var(--gh-border) }
.result-card.open .rc-body { display:block }

.btn-viewer {
  font-size:15px; padding:2px 8px; border-radius:5px;
  border:1px solid var(--gh-accent); color:var(--gh-accent);
  background:transparent; cursor:pointer; flex-shrink:0; white-space:nowrap;
  transition:background .12s, color .12s;
}
.btn-viewer:hover { background:var(--gh-accent); color:#0d1117 }

.btn-editor {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:5px; font-size:15px;
  border:1px solid var(--gh-border); background:var(--gh-canvas-subtle);
  color:var(--gh-fg-muted); cursor:pointer; white-space:nowrap;
  transition:border-color .12s, color .12s;
}
.btn-editor:hover { border-color:var(--gh-accent); color:var(--gh-fg) }

/* Issues */
.sec-title {
  font-size:14px; font-weight:600; color:var(--gh-fg-muted);
  letter-spacing:.06em; text-transform:uppercase;
  margin:10px 0 6px; display:flex; align-items:center; gap:6px;
}
.sec-title::after { content:''; flex:1; height:1px; background:var(--gh-border) }

.validator-block { margin-bottom: 12px }
.vblock-header {
  font-size:15px; padding:3px 10px; border-radius:5px;
  margin-bottom:6px; display:inline-flex; align-items:center; gap:5px;
}
.vblock-header.mustang { background:var(--gh-mustang-subtle); color:var(--gh-mustang); border:1px solid rgba(45,212,191,.25) }
.vblock-header.kosit   { background:var(--gh-done-subtle);    color:var(--gh-done);    border:1px solid rgba(163,113,247,.25) }

.issues-list { list-style:none; display:flex; flex-direction:column; gap:4px; padding:0; margin:0 }
.iss {
  font-size:16px; padding:7px 10px; border-radius:6px;
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border);
  line-height:1.5;
}
.iss.error   { border-left:3px solid var(--gh-danger) }
.iss.warning { border-left:3px solid var(--gh-warn) }
.iss.notice  { border-left:3px solid var(--gh-accent) }

.iss-top { display:flex; align-items:flex-start; gap:7px }
.iss-icon { flex-shrink:0; margin-top:1px }
.iss.error   .iss-icon { color:var(--gh-danger) }
.iss.warning .iss-icon { color:var(--gh-warn) }
.iss.notice  .iss-icon { color:var(--gh-accent) }

.iss-rule {
  font-size:14px; color:var(--gh-accent);
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border);
  border-radius:4px; padding:1px 6px; flex-shrink:0; margin-left:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.iss-src {
  font-size:14px; padding:1px 6px; border-radius:4px; flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.iss-src.mustang { background:var(--gh-mustang-subtle); color:var(--gh-mustang) }
.iss-src.kosit   { background:var(--gh-done-subtle);    color:var(--gh-done) }

.iss-loc { font-size:14px; color:var(--gh-fg-muted); margin-top:3px; font-style:italic; padding-left:20px }

.raw-toggle {
  font-size:15px; color:var(--gh-fg-muted); cursor:pointer;
  text-decoration:underline; margin-top:8px; display:inline-block;
}
.raw-toggle:hover { color:var(--gh-fg) }

.raw-xml {
  background:var(--gh-bg); border-radius:6px; padding:10px;
  font-size:15px; color:var(--gh-fg-muted); overflow:auto;
  white-space:pre; max-height:200px; margin-top:6px; display:none;
  border:1px solid var(--gh-border);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.raw-xml.open { display:block }

/* Error summary */
.err-summary {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:6px; padding:14px 16px; margin:14px 0;
}
.err-summary h3 { font-size:18px; margin-bottom:10px }

.err-group {
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border);
  border-radius:6px; padding:8px 12px; margin-bottom:6px;
}
.err-group-h {
  display:flex; align-items:flex-start; gap:8px;
  font-size:16px; line-height:1.5; margin-bottom:4px;
}
.err-group-h.error   { color:var(--gh-danger) }
.err-group-h.warning { color:var(--gh-warn) }
.eg-rule {
  font-size:14px; background:var(--gh-border); padding:1px 6px;
  border-radius:4px; flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--gh-fg);
}
.eg-cnt {
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border);
  border-radius:20px; padding:1px 7px; font-size:14px;
  margin-left:auto; flex-shrink:0; color:var(--gh-fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.eg-files { font-size:15px; color:var(--gh-fg-muted); line-height:1.6 }

/* ── History ──────────────────────────────────────────────────── */
.history-toolbar {
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; flex-wrap:wrap;
}
.history-toolbar .page-title { font-size:20px; font-weight:600; flex:1 }

.session-item {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:6px; padding:12px 14px; margin-bottom:6px;
  transition:border-color .12s;
}
.session-item:hover { border-color:var(--gh-fg-muted) }

.si-top   { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap }
.si-info  { flex:1; min-width:0 }
.si-titel { font-size:18px; font-weight:600; margin-bottom:3px }
.si-beschr { font-size:16px; color:var(--gh-fg-muted); margin-bottom:4px; line-height:1.5 }
.si-meta  {
  font-size:15px; color:var(--gh-fg-muted);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.si-chips   { display:flex; gap:4px; align-items:center; flex-shrink:0 }
.si-actions { display:flex; gap:4px; flex-shrink:0; flex-wrap:wrap }

.chip { padding:2px 8px; border-radius:20px; font-size:14px; border:1px solid }
.chip.valid   { background:var(--gh-success-subtle); color:var(--gh-success); border-color:rgba(63,185,80,.3) }
.chip.warn    { background:var(--gh-warn-subtle);    color:var(--gh-warn);    border-color:rgba(210,153,34,.3) }
.chip.invalid { background:var(--gh-danger-subtle);  color:var(--gh-danger);  border-color:rgba(248,81,73,.3) }

.kat-badge {
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border);
  border-radius:20px; padding:2px 8px; font-size:14px; color:var(--gh-accent);
}

.mode-badge { border-radius:20px; padding:2px 8px; font-size:14px; border:1px solid }
.mode-badge.mustang { background:var(--gh-mustang-subtle); color:var(--gh-mustang); border-color:rgba(45,212,191,.3) }
.mode-badge.kosit   { background:var(--gh-done-subtle);    color:var(--gh-done);    border-color:rgba(163,113,247,.3) }
.mode-badge.both    { background:var(--gh-accent-subtle);  color:var(--gh-accent);  border-color:rgba(88,166,255,.3) }

.sv-meta {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:6px; padding:14px 16px; margin-bottom:12px;
}
.sv-meta-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; flex-wrap:wrap; gap:6px;
}
.sv-meta-header h3 { font-size:18px; font-weight:600; margin:0 }

.hist-detail-hdr {
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid var(--gh-border);
}

/* Render progress */
.render-progress { font-size:15px; color:var(--gh-fg-muted); padding:10px 0; text-align:center }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(13,17,23,.85); z-index:200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all }

.modal {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:10px; padding:20px; width:440px; max-width:95vw;
  box-shadow:0 16px 50px rgba(0,0,0,.5);
}
.modal.modal-lg { width:580px }
.modal.modal-xl { width:800px; overflow-y:auto; max-height:88vh }
.modal h3 { font-size:19px; font-weight:600; margin-bottom:14px }
.modal-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:16px }

/* ── Category list ────────────────────────────────────────────── */
.kat-list { display:flex; flex-direction:column; gap:6px; margin-top:10px }
.kat-item {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:6px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transition:border-color .12s;
}
.kat-item:hover { border-color:var(--gh-fg-muted) }
.kat-info  { flex:1 }
.kat-name  { font-size:18px; font-weight:600; margin-bottom:2px }
.kat-desc  { font-size:16px; color:var(--gh-fg-muted) }
.kat-count { font-size:15px; color:var(--gh-fg-muted); margin-top:2px }

/* ── Updates ──────────────────────────────────────────────────── */
.upd-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:16px; padding:5px 12px; border-radius:6px;
  border:1px solid var(--gh-border); background:transparent;
  cursor:pointer; color:var(--gh-fg-muted); font-family:inherit;
  transition:border-color .15s, color .15s;
}
.upd-btn:hover { border-color:var(--gh-accent); color:var(--gh-fg) }
.upd-btn.has-update { border-color:var(--gh-warn); color:var(--gh-warn) }

.upd-notif { width:7px; height:7px; border-radius:50%; background:var(--gh-warn); box-shadow:0 0 6px var(--gh-warn); display:none; flex-shrink:0 }
.upd-notif.show { display:inline-block }

.upd-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:20000;
  display:flex; align-items:center; justify-content:center; animation:fadeIn .15s ease;
}
.upd-overlay.hidden { display:none }
.upd-modal {
  background:var(--gh-canvas); border:1px solid var(--gh-border);
  border-radius:10px; width:540px; max-width:96vw; overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.55);
}
.upd-modal-head {
  padding:12px 16px; border-bottom:1px solid var(--gh-border);
  display:flex; align-items:center; gap:10px; background:var(--gh-canvas-subtle);
}
.upd-modal-title { flex:1; font-size:18px; font-weight:600; color:var(--gh-fg) }
.upd-close {
  border:none; background:none; cursor:pointer;
  font-size:23px; color:var(--gh-fg-muted); padding:2px 6px;
  border-radius:5px; line-height:1; transition:background .12s;
}
.upd-close:hover { background:var(--gh-canvas-subtle); color:var(--gh-fg) }
.upd-modal-body { padding:14px 16px; display:flex; flex-direction:column; gap:6px }
.upd-modal-foot { padding:10px 16px; border-top:1px solid var(--gh-border); display:flex; justify-content:flex-end; gap:6px }

.upd-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--gh-canvas-subtle); border:1px solid var(--gh-border); border-radius:6px;
}
.upd-row-name { width:140px; font-size:16px; color:var(--gh-fg); font-weight:500; flex-shrink:0 }
.upd-row-ver  { flex:1; font-size:16px; display:flex; align-items:center; gap:5px; flex-wrap:wrap }

.upd-badge { font-size:14px; padding:2px 8px; border-radius:20px; white-space:nowrap; border:1px solid }
.upd-badge.ok   { background:var(--gh-success-subtle); border-color:rgba(63,185,80,.3);  color:var(--gh-success) }
.upd-badge.new  { background:var(--gh-warn-subtle);    border-color:rgba(210,153,34,.3); color:var(--gh-warn) }
.upd-badge.err  { background:var(--gh-danger-subtle);  border-color:rgba(248,81,73,.3);  color:var(--gh-danger) }
.upd-badge.load { background:var(--gh-canvas-subtle);  border-color:var(--gh-border);    color:var(--gh-fg-muted) }

.upd-act-btn {
  font-size:15px; padding:3px 10px; border-radius:5px;
  border:1px solid var(--gh-warn); color:var(--gh-warn); background:transparent;
  cursor:pointer; white-space:nowrap; flex-shrink:0; font-family:inherit;
  transition:background .12s, color .12s;
}
.upd-act-btn:hover:not(:disabled) { background:var(--gh-warn); color:#0d1117 }
.upd-act-btn:disabled { opacity:.4; cursor:not-allowed }

/* ── XML Editor ───────────────────────────────────────────────── */
.xem-overlay { position:fixed; inset:0; z-index:15000; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center }
.xem-overlay.hidden { display:none }
.xem-modal { width:96vw; height:93vh; background:var(--gh-canvas); border:1px solid var(--gh-border); border-radius:10px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6) }
.xem-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--gh-border); background:var(--gh-canvas-subtle); flex-shrink:0 }
.xem-title { flex:1; font-size:18px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.xem-body { flex:1; display:flex; overflow:hidden; min-height:0 }
.xem-editor-wrap { flex:0 0 65%; display:flex; flex-direction:column; overflow:hidden; position:relative; min-width:0 }
.xem-editor-pane { flex:1; overflow:hidden; position:relative; min-width:0 }
.xem-editor-pane .CodeMirror { height:100%; font-size:16px; line-height:1.65; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.xem-editor-pane .CodeMirror-scroll { height:100% }
.cm-s-xem-dark.CodeMirror             { background:#1e1e1e; color:#d4d4d4 }
.cm-s-xem-dark .CodeMirror-gutters    { background:#252526; border-right:1px solid #3c3c3c }
.cm-s-xem-dark .CodeMirror-linenumber { color:#858585 }
.cm-s-xem-dark .CodeMirror-cursor     { border-left-color:#d4d4d4 }
.cm-s-xem-dark .CodeMirror-selected,
.cm-s-xem-dark.CodeMirror-focused .CodeMirror-selected { background:#264f78 }
.cm-s-xem-dark .CodeMirror-matchingbracket { color:#d4d4d4 !important; background:#3a3a2a; outline:1px solid #d4d414 }
.cm-s-xem-dark .cm-tag      { color:#569cd6 }
.cm-s-xem-dark .cm-attribute { color:#9cdcfe }
.cm-s-xem-dark .cm-string   { color:#ce9178 }
.cm-s-xem-dark .cm-bracket  { color:#808080 }
.cm-s-xem-dark .cm-comment  { color:#6a9955; font-style:italic }
.cm-s-xem-dark .cm-meta     { color:#569cd6 }
.cm-s-xem-dark .cm-error    { color:#f44747 }
.cm-s-xem-dark .cm-atom     { color:#4ec9b0 }
.cm-bt-gutter { width:64px; border-right:1px solid #3c3c3c; border-left:1px solid #3c3c3c; background:#252526 }
.cm-bt-label  { display:block; width:60px; text-align:left; padding-left:4px; font-size:11px; line-height:1.65; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--gh-fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default }
.xem-resizer { flex-shrink:0; width:4px; background:var(--gh-border); cursor:col-resize; transition:background .12s }
.xem-resizer:hover, .xem-resizer.dragging { background:var(--gh-accent) }
.xem-sidebar { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:160px }
.xem-sidebar-section { display:flex; flex-direction:column; overflow:hidden }
.xem-sidebar-section:first-child { flex:1 }
.xem-sidebar-section:nth-child(2) { flex:0 0 auto; max-height:44%; border-top:1px solid var(--gh-border) }
.xem-sidebar-head { padding:6px 12px; flex-shrink:0; font-size:14px; font-weight:600; color:var(--gh-fg-muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--gh-border); background:var(--gh-canvas-subtle) }
.xem-version-list { flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:4px }
.xem-results { flex:1; overflow-y:auto; padding:6px }
.xem-footer { flex-shrink:0; padding:8px 14px; border-top:1px solid var(--gh-border); background:var(--gh-canvas-subtle); display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.xem-label-input { background:var(--gh-bg); border:1px solid var(--gh-border); border-radius:5px; color:var(--gh-fg); font-family:inherit; font-size:16px; padding:4px 10px; outline:none; width:220px; transition:border-color .15s }
.xem-label-input:focus { border-color:var(--gh-accent) }
.xem-loading, .xem-empty { padding:16px; color:var(--gh-fg-muted); font-size:16px }
.xem-search-panel { position:absolute; bottom:0; right:0; width:430px; max-width:100%; background:#2d2d2d; border:1px solid var(--gh-border); border-top-left-radius:6px; z-index:50; padding:6px 8px; display:flex; flex-direction:column; gap:4px; box-shadow:0 -2px 12px rgba(0,0,0,.4) }
.xem-search-panel.hidden { display:none }
.xem-sp-row { display:flex; align-items:center; gap:4px }
.xem-sp-icon { width:20px; text-align:center; font-size:13px; flex-shrink:0 }
.xem-sp-input { flex:1; background:#3c3c3c; border:1px solid #555; border-radius:3px; color:#d4d4d4; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; padding:3px 7px; outline:none; min-width:0 }
.xem-sp-input:focus { border-color:#007acc }
.xem-sp-btn { background:#3c3c3c; border:1px solid #555; border-radius:3px; color:#d4d4d4; cursor:pointer; font-size:12px; padding:2px 7px; white-space:nowrap }
.xem-sp-btn:hover { background:#4c4c4c }
.xem-sp-btn.xem-sp-toggle.active { background:#007acc; border-color:#007acc; color:#fff }
.xem-sp-count { font-size:12px; color:#858585; white-space:nowrap; min-width:52px }
.xem-sp-close { background:none; border:none; color:#858585; cursor:pointer; font-size:14px; padding:2px 4px; line-height:1 }
.xem-sp-close:hover { color:#d4d4d4 }
.cm-search-match { background:rgba(255,220,0,.25); border-radius:2px }
.cm-search-current { background:rgba(255,140,0,.55); border-radius:2px }

.ev-item { background:var(--gh-canvas-subtle); border:1px solid var(--gh-border); border-radius:6px; padding:6px 8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; cursor:pointer; transition:border-color .12s }
.ev-item:hover { border-color:var(--gh-fg-muted) }
.ev-item.current { border-color:var(--gh-accent) }
.ev-num  { font-size:14px; color:var(--gh-accent); font-weight:600; flex-shrink:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.ev-label { flex:1; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ev-date  { font-size:14px; color:var(--gh-fg-muted); flex-shrink:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.ev-rename-btn, .ev-delete-btn { flex-shrink:0; border:none; background:none; cursor:pointer; font-size:15px; padding:1px 4px; border-radius:4px; opacity:0; transition:opacity .12s, color .12s; line-height:1; color:var(--gh-fg-muted) }
.ev-item:hover .ev-rename-btn, .ev-item.current .ev-rename-btn,
.ev-item:hover .ev-delete-btn, .ev-item.current .ev-delete-btn { opacity:1 }
.ev-rename-btn:hover { color:var(--gh-fg) }
.ev-delete-btn:hover { color:var(--gh-danger) }
.ev-rename-input { font-size:15px !important; padding:2px 6px !important }

/* ── Setup box ────────────────────────────────────────────────── */
.setup-box { background:var(--gh-canvas); border:1px solid rgba(210,153,34,.35); border-left:3px solid var(--gh-warn); border-radius:6px; padding:12px 16px; margin-bottom:12px; display:none }
.setup-box.open { display:block }
.setup-box h3 { font-size:18px; color:var(--gh-warn); margin-bottom:8px; display:flex; align-items:center; gap:8px }
.cd { background:var(--gh-canvas-subtle); border:1px solid var(--gh-border); border-radius:4px; padding:1px 7px; font-size:15px; color:var(--gh-accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.link { color:var(--gh-accent); text-decoration:none }
.link:hover { text-decoration:underline }

/* ── Viewer ───────────────────────────────────────────────────── */
.viewer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:10000; display:flex; align-items:center; justify-content:center; animation:fadeIn .15s ease }
.viewer-modal { background:#fff; border-radius:10px; width:92vw; height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.45) }
.viewer-modal-header { padding:10px 16px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:10px; flex-shrink:0; background:#f9fafb }
.viewer-modal-title { flex:1; font-size:18px; font-weight:600; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.viewer-modal-close { border:none; background:none; cursor:pointer; font-size:23px; color:#9ca3af; line-height:1; padding:2px 6px; border-radius:5px }
.viewer-modal-close:hover { background:#f3f4f6; color:#374151 }
.viewer-modal iframe { flex:1; border:none; width:100% }

/* ── Page titles ──────────────────────────────────────────────── */
.page-title { font-size:20px; font-weight:600; color:var(--gh-fg) }