:root {
  --bg:#0a0e17; --bg2:#111827; --bg3:#1f2937; --bg4:#374151;
  --text:#e5e7eb; --muted:#9ca3af; --accent:#3b82f6; --accent2:#8b5cf6;
  --green:#22c55e; --red:#ef4444; --yellow:#eab308; --orange:#f97316;
  --radius:12px; --shadow:0 4px 20px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* HEADER */
header{background:var(--bg2);border-bottom:1px solid var(--bg3);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.header-left{display:flex;align-items:center;gap:14px}
.logo{font-size:2em;line-height:1}
h1{font-size:1.3em;font-weight:700}
.subtitle{font-size:.8em;color:var(--muted);margin-top:2px}
.header-stats{display:flex;gap:8px;flex-wrap:wrap}
.stat-pill{background:var(--bg3);border:1px solid var(--bg4);padding:4px 12px;border-radius:20px;font-size:.8em}
.stat-pill.green{background:rgba(34,197,94,.1);border-color:var(--green);color:var(--green)}
.stat-pill.blue{background:rgba(59,130,246,.1);border-color:var(--accent);color:var(--accent)}

/* LAYOUT */
#app{display:flex;flex-direction:column;height:100vh}
.layout{display:flex;flex:1;overflow:hidden}

/* SIDEBAR */
#sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--bg3);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.nav-title{padding:16px 16px 8px;font-size:.75em;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
#section-list{list-style:none;padding:0 8px;flex:1}
#section-list li{padding:10px 12px;border-radius:8px;cursor:pointer;transition:.15s;margin-bottom:2px;display:flex;align-items:center;justify-content:space-between}
#section-list li:hover{background:var(--bg3)}
#section-list li.active{background:var(--accent);color:white}
#section-list li.active .counts{opacity:.8}
.section-name{font-size:.9em;font-weight:500}
.counts{display:flex;gap:4px;font-size:.72em}
.count-pill{padding:1px 6px;border-radius:4px;font-weight:600}
.count-gl{background:rgba(59,130,246,.2);color:var(--accent)}
.count-local{background:rgba(139,92,246,.2);color:var(--accent2)}
.nav-footer{padding:12px 16px;border-top:1px solid var(--bg3)}
.nav-footer a{color:var(--muted);font-size:.8em;text-decoration:none}
.nav-footer a:hover{color:var(--accent)}

/* MAIN */
main{flex:1;overflow-y:auto;padding:24px}

/* WELCOME */
.welcome{max-width:700px;margin:60px auto;text-align:center}
.welcome-icon{font-size:4em;margin-bottom:16px}
.welcome h2{font-size:1.8em;margin-bottom:12px}
.welcome p{color:var(--muted);margin-bottom:32px;line-height:1.6}
.welcome-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wcard{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:20px;width:180px;text-align:center}
.wcard-icon{font-size:1.8em;margin-bottom:8px}
.wcard-title{font-weight:600;font-size:.9em;margin-bottom:4px}
.wcard-desc{font-size:.78em;color:var(--muted);line-height:1.4}

/* GAP BANNER */
.gap-banner{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gap-item{display:flex;align-items:center;gap:8px;font-size:.85em}
.gap-icon{font-size:1.1em}
.gap-count{font-size:1.3em;font-weight:700}
.gap-count.gl{color:var(--accent)}
.gap-count.local{color:var(--accent2)}
.gap-count.zero{color:var(--red)}
.gap-label{color:var(--muted);font-size:.85em}
.gap-sep{color:var(--bg4);font-size:1.5em}

/* TABS */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--bg3);padding-bottom:0}
.tab{background:none;border:none;color:var(--muted);padding:10px 16px;cursor:pointer;font-size:.9em;border-bottom:2px solid transparent;transition:.15s;border-radius:6px 6px 0 0}
.tab:hover{color:var(--text);background:var(--bg3)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab-content{display:none}
.tab-content.active{display:block}

/* XML GRID */
.xml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.xml-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:14px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.xml-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.xml-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--card-color,var(--bg4))}
.xml-card.rq::before{background:var(--accent)}
.xml-card.rs::before{background:var(--green)}
.xml-card.neg::before{background:var(--red)}
.xml-card.inv::before{background:var(--yellow)}
.xml-card.contrib::before{background:var(--orange)}
.xml-card.nonvalid::before{background:var(--red)}

.card-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.7em;font-weight:700;margin-bottom:8px;text-transform:uppercase}
.badge-rq{background:rgba(59,130,246,.15);color:var(--accent)}
.badge-rs{background:rgba(34,197,94,.15);color:var(--green)}
.badge-neg{background:rgba(239,68,68,.15);color:var(--red)}
.badge-inv{background:rgba(234,179,8,.15);color:var(--yellow)}
.badge-contrib{background:rgba(249,115,22,.15);color:var(--orange)}
.badge-ack{background:rgba(139,92,246,.15);color:var(--accent2)}
.badge-push{background:rgba(34,197,94,.2);color:var(--green)}
.badge-pull{background:rgba(59,130,246,.2);color:var(--accent)}

.card-name{font-size:.82em;color:var(--text);line-height:1.4;word-break:break-all}
.card-folder{font-size:.72em;color:var(--muted);margin-top:4px}
.card-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px;font-size:.9em}

/* GENERATE PANEL */
.generate-panel{max-width:700px}
.generate-panel h3{margin-bottom:8px;font-size:1.1em}
.gen-desc{color:var(--muted);font-size:.87em;margin-bottom:20px;line-height:1.5}
.gen-form{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:.85em;color:var(--muted);margin-bottom:6px}
.form-row select,.form-row input{width:100%;background:var(--bg3);border:1px solid var(--bg4);color:var(--text);padding:10px 12px;border-radius:8px;font-size:.9em}
.form-row select:focus,.form-row input:focus{outline:none;border-color:var(--accent)}
.muted{color:var(--muted)}
.btn-generate{width:100%;background:linear-gradient(135deg,#8b5cf6,#3b82f6);border:none;color:white;padding:12px;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer;transition:.2s}
.btn-generate:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-generate:disabled{opacity:.5;cursor:wait;transform:none}

.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.filename-badge{background:var(--bg3);border:1px solid var(--bg4);padding:4px 12px;border-radius:6px;font-size:.82em;font-family:monospace}
.result-actions{display:flex;gap:6px}
.btn-sm{background:var(--bg3);border:1px solid var(--bg4);color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.8em;transition:.15s}
.btn-sm:hover{background:var(--bg4)}
.btn-validate{border-color:rgba(34,197,94,.4);color:var(--green)}
.btn-validate:hover{background:rgba(34,197,94,.1)}
.btn-save{border-color:rgba(59,130,246,.4);color:var(--accent)}
.btn-save:hover{background:rgba(59,130,246,.1)}
.btn-close:hover{background:rgba(239,68,68,.15);color:var(--red)}

.validation-ok{background:rgba(34,197,94,.1);border:1px solid var(--green);border-radius:8px;padding:8px 14px;font-size:.83em;color:var(--green);margin-bottom:10px}
.validation-err{background:rgba(239,68,68,.1);border:1px solid var(--red);border-radius:8px;padding:8px 14px;font-size:.83em;color:var(--red);margin-bottom:10px;white-space:pre-wrap;font-family:monospace}

#gen-result pre{border-radius:8px;overflow:auto;max-height:400px}
#gen-result code{font-size:.82em}

/* MODAL */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);width:90%;max-width:900px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--bg3);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;flex-wrap:wrap}
.modal-title{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.modal-actions{display:flex;gap:6px;flex-shrink:0}
#modal-validation{padding:0 20px}
#modal-validation:empty{padding:0}
.modal-body{overflow-y:auto;padding:0 20px 20px;flex:1}
.modal-body pre{border-radius:8px;overflow:auto;margin-top:12px}
.modal-body code{font-size:.82em;line-height:1.5}

.type-badge{padding:3px 10px;border-radius:4px;font-size:.75em;font-weight:700;text-transform:uppercase;flex-shrink:0}

/* SPINNER */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:80px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ==================== GUIDE BUTTON & MODAL ==================== */
.guide-btn {
  background: linear-gradient(135deg, #1f2937, #374151);
  border: 1px solid var(--bg4);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88em;
  font-weight: 600;
  transition: .2s;
  white-space: nowrap;
}
.guide-btn:hover { border-color: var(--accent); color: var(--accent); }

.guide-modal-box { max-width: 820px; max-height: 88vh; }
.guide-body { padding: 0 24px 24px; }

.guide-hero { text-align: center; padding: 28px 0 20px; border-bottom: 1px solid var(--bg3); margin-bottom: 24px; }
.guide-hero-icon { font-size: 3em; margin-bottom: 10px; }
.guide-hero h2 { font-size: 1.4em; margin-bottom: 10px; }
.guide-hero p { color: var(--muted); font-size: .9em; line-height: 1.6; max-width: 580px; margin: 0 auto; }

.guide-section { margin-bottom: 28px; }
.guide-section h3 { font-size: 1em; font-weight: 700; margin-bottom: 14px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.guide-section p { color: var(--muted); font-size: .88em; line-height: 1.6; margin-bottom: 12px; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.guide-card { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 8px; padding: 12px; }
.guide-card-icon { font-size: 1.4em; display: block; margin-bottom: 6px; }
.guide-card strong { font-size: .88em; display: block; margin-bottom: 4px; }
.guide-card p { font-size: .78em; color: var(--muted); margin: 0; line-height: 1.4; }

.guide-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .guide-comparison { grid-template-columns: 1fr; } }
.guide-col { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 10px; overflow: hidden; }
.guide-col-header { padding: 10px 16px; font-weight: 700; font-size: .88em; }
.guide-col-header.official { background: rgba(59,130,246,.15); color: var(--accent); border-bottom: 1px solid rgba(59,130,246,.2); }
.guide-col-header.local { background: rgba(139,92,246,.15); color: var(--accent2); border-bottom: 1px solid rgba(139,92,246,.2); }
.guide-col ul { list-style: none; padding: 12px 16px; }
.guide-col ul li { font-size: .83em; color: var(--muted); padding: 4px 0; padding-left: 14px; position: relative; line-height: 1.4; }
.guide-col ul li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
.guide-col ul li strong { color: var(--text); }

.guide-steps { display: flex; flex-direction: column; gap: 12px; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; }
.step-num { background: var(--accent); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85em; flex-shrink: 0; margin-top: 2px; }
.step-content strong { font-size: .9em; display: block; margin-bottom: 3px; }
.step-content p { font-size: .83em; color: var(--muted); margin: 0; line-height: 1.5; }

.guide-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--bg3); padding: 14px 16px; border-radius: 8px; font-size: .83em; color: var(--muted); }

.guide-footer-section { background: var(--bg3); border: 1px solid var(--bg4); border-radius: 10px; padding: 16px; margin-bottom: 0; }
.guide-note { font-size: .84em; color: var(--muted); line-height: 1.6; }
.guide-note code { background: var(--bg4); padding: 1px 6px; border-radius: 4px; font-size: .9em; color: var(--text); }
.guide-note a { color: var(--accent); }

/* ==================== CREDENTIALS & MR ==================== */
.creds-btn { border-color: rgba(139,92,246,.4) !important; }
.creds-btn.connected { color: var(--green) !important; border-color: rgba(34,197,94,.4) !important; }

.creds-modal-box { max-width: 560px; }
.creds-body { padding: 20px 24px; }
.creds-info { margin-bottom: 20px; }
.creds-info p { font-size: .88em; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.creds-steps { display: flex; flex-direction: column; gap: 8px; }
.creds-step { display: flex; align-items: center; gap: 10px; font-size: .83em; color: var(--muted); }
.creds-step a { color: var(--accent); }
.creds-step code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: .9em; color: var(--text); }
.creds-form { background: var(--bg3); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.creds-actions { display: flex; align-items: center; margin-top: 4px; }
.creds-note { font-size: .78em; color: var(--muted); text-align: center; line-height: 1.5; padding: 8px 12px; background: rgba(59,130,246,.05); border-radius: 6px; border: 1px solid rgba(59,130,246,.1); }

.btn-mr { border-color: rgba(139,92,246,.4) !important; color: var(--accent2) !important; }
.btn-mr:hover { background: rgba(139,92,246,.1) !important; }
.btn-mr:disabled { opacity: .4; cursor: wait; }

.mr-success { text-align: center; padding: 20px; }
.mr-success-icon { font-size: 3em; margin-bottom: 12px; }
.mr-success h3 { margin-bottom: 8px; color: var(--green); }
.mr-success p { color: var(--muted); font-size: .88em; margin-bottom: 16px; }
.mr-success a { display: inline-block; background: linear-gradient(135deg,#8b5cf6,#3b82f6); color: white; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.mr-success a:hover { filter: brightness(1.1); }
.mr-details { background: var(--bg3); border-radius: 8px; padding: 12px; margin-top: 12px; font-size: .82em; color: var(--muted); text-align: left; }
.mr-details code { color: var(--text); }

.mr-form { display: flex; flex-direction: column; gap: 14px; }
.mr-form h3 { font-size: 1em; margin-bottom: -4px; }
.mr-form p { color: var(--muted); font-size: .85em; }

/* ⚖️ Vergleich / Comparison Tab */
.compare-section { margin-bottom: 28px; }
.compare-type-header {
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 12px;
}
.compare-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.compare-col-header {
  font-size: 0.78em; font-weight: 600; padding: 5px 10px;
  border-radius: 6px; margin-bottom: 8px; text-align: center;
}
.compare-col-header.official { background: rgba(124,58,237,0.15); color: #a78bfa; }
.compare-col-header.local    { background: rgba(16,185,129,0.15); color: #34d399; }
.compare-col-empty {
  font-size: 0.8em; color: var(--text-muted); font-style: italic;
  padding: 8px 0; text-align: center;
}
.compare-item {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px; margin-bottom: 6px;
  cursor: pointer; transition: border-color .15s, background .15s;
  font-size: 0.82em;
}
.compare-item:hover { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.compare-item .ci-name { font-weight: 600; color: var(--text-primary); }
.compare-item .ci-badge {
  display: inline-block; font-size: 0.7em; padding: 1px 5px;
  border-radius: 4px; margin-left: 5px; font-weight: 700;
}
.compare-missing-banner {
  background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4);
  color: #f87171; border-radius: 6px; padding: 7px 12px; font-size: 0.8em;
  margin-bottom: 6px; text-align: center;
}
.compare-extra-banner {
  background: rgba(16,185,129,0.08); border: 1px dashed rgba(16,185,129,0.4);
  color: #34d399; border-radius: 6px; padding: 7px 12px; font-size: 0.8em;
  margin-bottom: 6px; text-align: center;
}
@media (max-width: 600px) {
  .compare-cols { grid-template-columns: 1fr; }
}

/* 📊 Validierungslauf */
.validate-all-panel { padding: 4px 0; }
.va-header { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.va-score-card {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.va-score-item {
  flex: 1; min-width: 110px; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; text-align: center;
}
.va-score-num { font-size: 1.8em; font-weight: 700; line-height: 1; }
.va-score-label { font-size: 0.75em; color: var(--text-muted); margin-top: 4px; }
.va-score-num.green { color: #34d399; }
.va-score-num.red   { color: #f87171; }
.va-score-num.blue  { color: #60a5fa; }
.va-score-num.yellow{ color: #fbbf24; }
.va-section-block { margin-bottom: 20px; }
.va-section-title {
  font-size: 0.82em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.va-section-score { font-size: 1em; color: var(--text-primary); }
.va-file-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 6px; margin-bottom: 3px; font-size: 0.81em;
}
.va-file-row:hover { background: rgba(255,255,255,.04); }
.va-file-row.correct { border-left: 3px solid #34d399; }
.va-file-row.incorrect { border-left: 3px solid #f87171; background: rgba(239,68,68,.05); }
.va-file-name { flex: 1; font-family: monospace; color: var(--text-primary); }
.va-file-type { font-size: 0.75em; }
.va-file-status { font-size: 0.9em; min-width: 24px; text-align: center; }
.va-file-error { color: #f87171; font-size: 0.75em; margin-top: 2px; font-family: monospace; opacity: .8; padding-left: 32px; }
.va-progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.va-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }