/* =============================================================
   Timberwolf Repository – Design System v3
   ============================================================= */

@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700&family=jetbrains-mono:400,500&display=swap');

/* ---------------------------------------------------------------
   Tokens
--------------------------------------------------------------- */
:root {
    --ink:        #0F0F0E;
    --ink-2:      #3A3A36;
    --muted:      #8A8A84;
    --paper:      #FAFAF8;
    --surface:    #FFFFFF;
    --border:     #E8E7E3;
    --border-2:   #D4D3CE;
    --signal:     #E8533A;
    --warning:    #C47A1A;
    --ok:         #2A7A4B;
    --info:       #1E5FA8;
    --sidebar-bg: #F0EFEB;
    --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:  'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --radius:     4px;
    --radius-lg:  8px;
    --t:          150ms ease;
}

/* ---------------------------------------------------------------
   Reset
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font);
    background:  var(--paper);
    color:       var(--ink);
    line-height: 1.6;
    min-height:  100vh;
}

a             { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover       { color: var(--muted); }
code, pre     { font-family: var(--font-mono); font-size: .8em; }

/* ---------------------------------------------------------------
   Layout
--------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width:          200px;
    flex-shrink:    0;
    background:     var(--sidebar-bg);
    border-right:   1px solid var(--border);
    display:        flex;
    flex-direction: column;
}

.sidebar-logo {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    padding:       1rem .875rem .875rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .25rem;
}
.sidebar-logo .mark {
    background:    var(--ink);
    color:         var(--surface);
    font-weight:   700;
    font-size:     .6rem;
    padding:       .2rem .35rem;
    border-radius: var(--radius);
    letter-spacing:.04em;
    font-family:   var(--font-mono);
    flex-shrink:   0;
}
.sidebar-logo .name {
    font-size:    .7rem;
    font-weight:  600;
    color:        var(--ink);
    line-height:  1.3;
    letter-spacing: -.01em;
}

.sidebar nav { padding: .25rem 0; flex: 1; }
.sidebar nav a {
    display:        block;
    padding:        .45rem .875rem;
    color:          var(--ink-2);
    font-size:      .7rem;
    font-weight:    500;
    text-decoration:none;
    border-left:    2px solid transparent;
    transition:     background var(--t), color var(--t);
}
.sidebar nav a:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.sidebar nav a.active {
    background:       rgba(0,0,0,.06);
    color:            var(--ink);
    border-left-color:var(--ink);
    font-weight:      600;
}

.sidebar-footer {
    padding:    .625rem .875rem;
    border-top: 1px solid var(--border);
    font-size:  .65rem;
    color:      var(--muted);
    line-height:1.5;
}
.sidebar-footer a { color: var(--muted); text-decoration: none; font-size: .65rem; }
.sidebar-footer a:hover { color: var(--ink); }

.main {
    flex:           1;
    overflow:       auto;
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.topbar {
    background:      var(--surface);
    border-bottom:   1px solid var(--border);
    padding:         .75rem 1.25rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    position:        sticky;
    top:             0;
    z-index:         10;
}
.topbar h1 {
    font-size:    .85rem;
    font-weight:  600;
    letter-spacing: -.01em;
}
.topbar-actions { display: flex; gap: .5rem; }

.content {
    padding:   1.25rem;
    flex:      1;
    max-width: 1400px;
    width:     100%;
}

/* ---------------------------------------------------------------
   Karten
--------------------------------------------------------------- */
.card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
}
.card-header {
    padding:         .75rem 1rem;
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .5rem;
    background:      var(--surface);
    flex-wrap:       wrap;
}
.card-header h2 {
    font-size:    .8rem;
    font-weight:  600;
    color:        var(--ink);
    letter-spacing: -.01em;
}
.card-body { padding: 1rem; }

/* ---------------------------------------------------------------
   Tabellen
--------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th {
    text-align:     left;
    padding:        .5rem .875rem;
    border-bottom:  1px solid var(--border);
    font-weight:    500;
    font-size:      .6rem;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space:    nowrap;
    background:     var(--paper);
}
td {
    padding:         .6rem .875rem;
    border-bottom:   1px solid var(--border);
    color:           var(--ink-2);
    vertical-align:  middle;
    font-size:       .75rem;
}
tr:last-child td         { border-bottom: none; }
tbody tr:hover td        { background: var(--paper); }

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .3rem;
    padding:        .375rem .75rem;
    font-size:      .72rem;
    font-weight:    500;
    font-family:    var(--font);
    border-radius:  var(--radius);
    border:         1px solid transparent;
    cursor:         pointer;
    transition:     background var(--t), border-color var(--t), color var(--t);
    text-decoration:none;
    white-space:    nowrap;
    line-height:    1.4;
    letter-spacing: -.01em;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.btn-primary  { background: var(--ink);     color: var(--surface); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); text-decoration: none; }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-2); }
.btn-secondary:hover { background: var(--paper); text-decoration: none; color: var(--ink); }

.btn-danger { background: var(--signal); color: var(--surface); border-color: var(--signal); }
.btn-danger:hover { background: #c73d27; border-color: #c73d27; color: var(--surface); text-decoration: none; }

.btn-sm   { padding: .25rem .5rem; font-size: .65rem; }
.btn-full { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------
   Formulare
--------------------------------------------------------------- */
.form-group       { margin-bottom: .875rem; }
.form-group label {
    display:        block;
    font-size:      .62rem;
    font-weight:    500;
    color:          var(--muted);
    margin-bottom:  .3rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"],
select,
textarea {
    width:         100%;
    padding:       .4rem .625rem;
    border:        1px solid var(--border-2);
    border-radius: var(--radius);
    font:          inherit;
    font-size:     .75rem;
    background:    var(--surface);
    color:         var(--ink);
    transition:    border-color var(--t), box-shadow var(--t);
    outline:       none;
    appearance:    none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--ink);
    box-shadow:   0 0 0 3px rgba(15,15,14,.07);
}
select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8A84' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .6rem center;
    padding-right:       1.75rem;
}

/* ---------------------------------------------------------------
   Badges
--------------------------------------------------------------- */
.badge {
    display:        inline-flex;
    align-items:    center;
    padding:        .15rem .45rem;
    font-size:      .6rem;
    font-weight:    600;
    border-radius:  var(--radius);
    white-space:    nowrap;
    letter-spacing: .03em;
    font-family:    var(--font);
}
.badge-danger  { background: #FEE9E6; color: #B83220; }
.badge-warning { background: #FEF3E2; color: #9A5F0A; }
.badge-success { background: #E6F4EC; color: #1A6035; }
.badge-info    { background: #E6EFF9; color: #144A87; }
.badge-gray    { background: #F0EFEB; color: var(--muted); }

/* ---------------------------------------------------------------
   Alerts
--------------------------------------------------------------- */
.alert {
    padding:       .75rem 1rem;
    border-radius: var(--radius-lg);
    font-size:     .75rem;
    margin-bottom: 1rem;
    border:        1px solid;
    line-height:   1.5;
}
.alert-error   { background: #FEF2F0; border-color: #FACBC4; color: #8B2315; }
.alert-success { background: #F0F9F4; border-color: #B8DFC8; color: #1A5235; }
.alert-warning { background: #FFFBF0; border-color: #F5DFA0; color: #7A4D06; }
.alert-info    { background: #F0F6FF; border-color: #BAD3F5; color: #0D3561; }

/* ---------------------------------------------------------------
   Stat-Karten
--------------------------------------------------------------- */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:                   .875rem;
    margin-bottom:         1.25rem;
}
.stat-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       1rem 1.125rem;
}
.stat-card .value {
    font-size:    1.75rem;
    font-weight:  700;
    line-height:  1;
    margin-bottom:.2rem;
    letter-spacing:-.03em;
    color:        var(--ink);
}
.stat-card .label {
    font-size:    .62rem;
    color:        var(--muted);
    font-weight:  500;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.stat-card.danger  .value { color: var(--signal); }
.stat-card.warning .value { color: var(--warning); }
.stat-card.success .value { color: var(--ok); }

/* ---------------------------------------------------------------
   Login
--------------------------------------------------------------- */
body.login-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      var(--paper);
}
.login-box {
    width:         100%;
    max-width:     340px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       1.75rem;
}
.login-logo {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    margin-bottom: 1.5rem;
}
.login-logo .logo-mark {
    background:    var(--ink);
    color:         var(--surface);
    font-weight:   700;
    font-size:     .75rem;
    padding:       .3rem .5rem;
    border-radius: var(--radius);
    font-family:   var(--font-mono);
    letter-spacing:.04em;
}
.login-logo .logo-text {
    font-weight:  600;
    font-size:    .85rem;
    color:        var(--ink);
    letter-spacing:-.01em;
}
.totp-hint { font-size: .75rem; color: var(--muted); margin-bottom: 1rem; }

/* ---------------------------------------------------------------
   Code-Block
--------------------------------------------------------------- */
.code-block {
    background:    #0F0F0E;
    color:         #E8E7E3;
    border-radius: var(--radius-lg);
    padding:       .875rem 1rem;
    font-family:   var(--font-mono);
    font-size:     .7rem;
    overflow-x:    auto;
    line-height:   1.75;
}

/* ---------------------------------------------------------------
   Upload (Repository)
--------------------------------------------------------------- */
.upload-area {
    position:      relative;
    border:        1.5px dashed var(--border-2);
    border-radius: var(--radius-lg);
    padding:       2rem 1.5rem;
    text-align:    center;
    transition:    border-color var(--t), background var(--t);
    cursor:        pointer;
    background:    var(--paper);
}
.upload-area:hover          { border-color: var(--ink); background: var(--surface); }
.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-area label          { pointer-events: none; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.upload-icon                { font-size: 1.25rem; color: var(--muted); }
.upload-text                { font-weight: 600; font-size: .85rem; color: var(--ink); }
.upload-hint                { font-size: .7rem; color: var(--muted); }
.detected-info              { background: var(--paper); border-radius: var(--radius-lg); padding: .875rem 1rem; border: 1px solid var(--border); }
.form-row                   { display: flex; gap: .875rem; flex-wrap: wrap; }
.form-row .form-group       { margin-bottom: 0; }
.input-readonly             { background: var(--paper) !important; color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------
   Connector Setup (site-add)
--------------------------------------------------------------- */
.connector-setup  { display: flex; flex-direction: column; gap: .875rem; }
.connector-field  { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .75rem .875rem; }
.connector-label  { display: flex; align-items: center; gap: .5rem; font-size: .62rem; font-weight: 500; margin-bottom: .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.connector-step   { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: var(--ink); color: var(--surface); border-radius: 50%; font-size: .6rem; font-weight: 700; flex-shrink: 0; font-family: var(--font-mono); }

/* ---------------------------------------------------------------
   Running Banner
--------------------------------------------------------------- */
.running-banner {
    background:    var(--paper);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       .75rem 1rem;
    display:       flex;
    align-items:   center;
    gap:           .625rem;
    font-weight:   500;
    font-size:     .78rem;
    color:         var(--ink-2);
    margin-bottom: .75rem;
}
.running-spinner { animation: spin 2s linear infinite; display: inline-block; }
@keyframes spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   Site-View – Topbar
--------------------------------------------------------------- */
.sv-topbar {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       .75rem 1rem;
    display:       flex;
    align-items:   center;
    gap:           .875rem;
    flex-wrap:     wrap;
    margin-bottom: 1rem;
}
.sv-topbar-left {
    flex:      1;
    min-width: 180px;
}
.sv-topbar-left .sv-site-name,
h1.sv-site-name {
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: -.02em;
    color:          var(--ink);
    line-height:    1.2;
    margin:         0;
}
.sv-topbar-left .sv-site-meta {
    font-size:  .65rem;
    color:      var(--muted);
    margin-top: .1rem;
}
.sv-topbar-badges {
    display:     flex;
    gap:         .3rem;
    flex-wrap:   wrap;
    align-items: center;
}
.sv-topbar-actions {
    display:     flex;
    gap:         .35rem;
    align-items: center;
    margin-left: auto;
    flex-wrap:   wrap;
}

/* Scan-Typ Select in Topbar */
.sv-scan-select {
    font-size:     .65rem !important;
    padding:       .22rem .45rem !important;
    height:        auto !important;
    min-width:     100px;
    border-radius: var(--radius) !important;
    width:         auto !important;
}

/* ---------------------------------------------------------------
   Site-View – Grid
--------------------------------------------------------------- */
.sv-main-grid {
    display:               grid !important;
    grid-template-columns: 1fr 240px !important;
    gap:                   1rem;
    align-items:           start;
}
.sv-right-col {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}

/* Rechte Spalte: kleinere Card-Header */
.sv-right-col .card-header {
    padding: .6rem .875rem;
}
.sv-right-col .card-header h2 {
    font-size: .72rem;
}

/* ---------------------------------------------------------------
   Site-View – Extensions Liste
--------------------------------------------------------------- */
.sv-ext-list { overflow-y: auto; max-height: 220px; }
.sv-ext-row {
    padding:         .325rem .875rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    border-bottom:   1px solid var(--border);
    gap:             .4rem;
}
.sv-ext-row:last-child { border-bottom: none; }
.sv-ext-name    { font-family: var(--font-mono); font-size: .65rem; color: var(--ink-2); word-break: break-all; }
.sv-ext-version { color: var(--muted); font-size: .6rem; }
.sv-ext-ok      { color: var(--ok);      font-size: .65rem; font-weight: 700; flex-shrink: 0; }
.sv-ext-miss    { color: var(--warning); font-size: .65rem; font-weight: 700; flex-shrink: 0; }

/* ---------------------------------------------------------------
   Site-View – Site-Info
--------------------------------------------------------------- */
.sv-info-grid {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   .3rem .625rem;
    font-size:             .72rem;
    margin-bottom:         .75rem;
}
.sv-info-label {
    color:          var(--muted);
    font-size:      .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight:    500;
    padding-top:    .1rem;
    white-space:    nowrap;
}

/* ---------------------------------------------------------------
   Site-View – Scan-Verlauf
--------------------------------------------------------------- */
.sv-scan-actions             { display: flex; gap: .2rem; justify-content: flex-end; }
.sv-scan-actions .btn        { padding: .2rem .4rem; font-size: .6rem; }

/* ---------------------------------------------------------------
   Site-View – Findings
--------------------------------------------------------------- */
.sv-finding-critical td      { background: rgba(232,83,58,.025) !important; }
.sv-bulk-actions             { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Findings meta (subtitle in card-header) */
.sv-findings-meta {
    font-size:   .65rem;
    color:       var(--muted);
    font-weight: 400;
    margin-left: .375rem;
}
.sv-findings-link {
    color:           var(--muted);
    text-decoration: none;
    font-weight:     500;
}
.sv-findings-link:hover { color: var(--ink); }

/* Findings footer bar */
.sv-findings-footer {
    padding:     .625rem 1rem;
    background:  var(--paper);
    display:     flex;
    align-items: center;
}
.sv-findings-footer-link {
    font-size:      .72rem;
    color:          var(--ink-2);
    text-decoration:none;
    font-weight:    500;
    display:        flex;
    align-items:    center;
    gap:            .25rem;
    transition:     color var(--t);
}
.sv-findings-footer-link:hover { color: var(--ink); }

/* Findings-Dropdown */
.sv-finding-select {
    font-size:     .65rem !important;
    padding:       .2rem .3rem !important;
    border-radius: var(--radius) !important;
    width:         100% !important;
    cursor:        pointer;
}

/* ---------------------------------------------------------------
   Utility
--------------------------------------------------------------- */
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: .875rem; }
.mb-3 { margin-bottom: 1.25rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: .875rem; }
.flex         { display: flex; }
.flex-center  { align-items: center; }
.gap-1        { gap: .5rem; }
.gap-2        { gap: .875rem; }
.text-muted   { color: var(--muted); }
.text-small   { font-size: .7rem; }
.text-right   { text-align: right; }
.text-danger  { color: var(--signal); }
.text-success { color: var(--ok); }
.text-warning { color: var(--warning); }
.hidden       { display: none !important; }

code {
    background:    var(--paper);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       .1em .3em;
    font-family:   var(--font-mono);
    font-size:     .8em;
    color:         var(--ink-2);
}

/* ---------------------------------------------------------------
   Health Bar (Sites-Übersicht)
--------------------------------------------------------------- */
.health-bar-wrap { margin-bottom: .3rem; }
.health-bar      { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.health-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.health-bar-fill.ok       { background: var(--ok); }
.health-bar-fill.warning  { background: var(--warning); }
.health-bar-fill.critical { background: var(--signal); }

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1000px) {
    .sidebar { width: 180px; }
    .content { padding: 1rem; }
}
@media (max-width: 720px) {
    .layout    { flex-direction: column; }
    .sidebar   { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
    .sv-main-grid { display: block !important; }
    .sv-right-col { margin-top: .875rem; }
    .sv-topbar-actions { margin-left: 0; width: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   Scan-Detail
--------------------------------------------------------------- */

/* Obere Zeile: Status + Findings-Grid */
.scan-top-grid {
    display:               grid;
    grid-template-columns: 300px 1fr;
    gap:                   1rem;
    align-items:           start;
}

/* Status-Kachel */
.scan-status-card .card-body {
    padding: .875rem 1rem;
}
.scan-status-badge {
    font-size:     .75rem !important;
    padding:       .3rem .75rem !important;
    margin-bottom: .75rem;
    display:       inline-flex;
}
.scan-meta-grid {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   .25rem .625rem;
    font-size:             .72rem;
}

/* Findings-Kacheln Grid – 3 pro Zeile, 2 Zeilen = 6 Kacheln */
.scan-findings-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   .625rem;
    align-content:         start;
}

.scan-stat-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       .75rem .875rem;
    cursor:        pointer;
    transition:    border-color var(--t), background var(--t);
}
.scan-stat-card:hover {
    border-color: var(--border-2);
    background:   var(--paper);
}
.scan-stat-card.active {
    border-color: var(--ink);
    background:   var(--paper);
}
.scan-stat-value {
    font-size:     1.5rem;
    font-weight:   700;
    line-height:   1;
    letter-spacing:-.03em;
    color:         var(--ink);
    margin-bottom: .2rem;
}
.scan-stat-label {
    font-size:    .6rem;
    font-weight:  500;
    color:        var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
}

/* Pagination */
.scan-pagination {
    padding:         .625rem 1rem;
    border-top:      1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--paper);
    gap:             1rem;
}

/* Responsive Scan */
@media (max-width: 800px) {
    .scan-top-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Diff-Ansicht
--------------------------------------------------------------- */
.diff-wrap {
    overflow-x:  auto;
    overflow-y:  auto;
    max-height:  75vh;
    font-family: var(--font-mono);
    font-size:   .68rem;
    line-height: 1.5;
}
.diff-table {
    width:           100%;
    border-collapse: collapse;
    table-layout:    fixed;
}
.diff-col-ln   { width: 44px; }
.diff-col-code { /* flex */ }

/* Header */
.diff-col-header {
    text-align:  center;
    font-size:   .65rem;
    color:       var(--muted);
    padding:     .4rem .75rem;
    font-weight: 500;
    background:  var(--paper);
}
.diff-col-header-left { border-right: 2px solid var(--border-2); }

/* Zeilennummer */
.diff-ln {
    padding:        .15rem .5rem;
    text-align:     right;
    color:          var(--muted);
    user-select:    none;
    border-right:   1px solid var(--border);
    white-space:    nowrap;
    vertical-align: top;
    font-size:      .6rem;
    min-width:      36px;
    background:     var(--paper);
}
.diff-ln-del { background: #FFEBEB !important; color: #B83220; }
.diff-ln-ins { background: #E6F4EC !important; color: #1A6035; }

/* Code */
.diff-code {
    padding:        .15rem .625rem;
    white-space:    pre-wrap;
    word-break:     break-all;
    vertical-align: top;
}

/* Mittlere Trennlinie */
.diff-table tr td:nth-child(2) { border-right: 2px solid var(--border-2); }

/* Gleiche Zeilen */
.diff-eq .diff-ln  { }
.diff-eq .diff-code { color: var(--muted); background: var(--surface); }

/* Gelöschte Zeilen */
.diff-del .diff-code   { background: #FFF5F5; }
.diff-del-code         { color: #7A1A0E; background: #FEE9E6 !important; }

/* Eingefügte Zeilen */
.diff-ins .diff-code   { background: #F5FFF8; }
.diff-ins-code         { color: #0F4D2A; background: #D4EDDA !important; }

/* Leere Gegenseite */
.diff-empty { background: #F8F8F6 !important; border-color: var(--border) !important; }

/* Separator */
.diff-separator td {
    padding:       .2rem .75rem;
    color:         var(--muted);
    font-size:     .62rem;
    background:    var(--paper);
    text-align:    center;
    border-top:    1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}

/* ---------------------------------------------------------------
   Repository – Extension-Accordion
--------------------------------------------------------------- */
.repo-ext-list {
    border-top: 1px solid var(--border);
}
.repo-ext-group {
    border-bottom: 1px solid var(--border);
}
.repo-ext-group:last-child {
    border-bottom: none;
}
.repo-ext-header {
    padding:         .6rem 1rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    min-height:      44px;
}
.repo-ext-toggle {
    cursor:     pointer;
    transition: background var(--t);
}
.repo-ext-toggle:hover {
    background: var(--paper);
}
.repo-ext-name {
    display:     flex;
    align-items: center;
    gap:         .35rem;
    font-size:   .8rem;
}
.repo-ext-chevron {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.1rem;
    font-size:       .9rem;
    color:           var(--muted);
    transition:      color var(--t);
    flex-shrink:     0;
}
.repo-ext-chevron-single {
    color: var(--border-2);
}
.repo-ext-meta {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-shrink: 0;
}
.repo-ext-versions {
    border-top: 1px solid var(--border);
    background: var(--paper);
}