/* CrazyGit – SwiftUI-Look 2.0 (hell/dunkel). Farben nur über Tokens. */
:root {
  color-scheme: light dark;
  --bg: #fff; --bg2: #f2f2f7; --bg3: #fff;
  --grouped: #f2f2f7; --grouped2: #fff; --grouped3: #f2f2f7;
  --label: #000; --label2: rgba(60,60,67,.60); --label3: rgba(60,60,67,.30); --label4: rgba(60,60,67,.18);
  --separator: rgba(60,60,67,.29); --opaque-sep: #c6c6c8;
  --fill: rgba(120,120,128,.20); --fill2: rgba(120,120,128,.16); --fill3: rgba(118,118,128,.12); --fill4: rgba(116,116,128,.08);
  --blue: #007aff; --green: #34c759; --red: #ff3b30; --orange: #ff9500; --yellow: #ffcc00;
  --pink: #ff2d55; --purple: #af52de; --teal: #30b0c7; --indigo: #5856d6; --gray: #8e8e93;
  --accent: var(--blue); --accent-text: #0066cc; --on-accent: #fff;
  --ok-text: #1f8a3b; --bad-text: #d70015; --warn-text: #b25e00;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas, Menlo, monospace;
  --fs-large: 2.125rem; --fs-t1: 1.75rem; --fs-t2: 1.375rem; --fs-t3: 1.25rem;
  --fs-head: 1.0625rem; --fs-body: 1rem; --fs-call: 1rem; --fs-sub: .9375rem; --fs-foot: .8125rem; --fs-cap: .75rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-ctl: 12px; --r-card: 20px; --r-sheet: 28px; --r-pill: 999px;
  --mat-thin: rgba(255,255,255,.55); --mat-reg: rgba(249,249,249,.78); --mat-thick: rgba(246,246,246,.9);
  --blur: saturate(1.8) blur(20px);
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --edge: inset 0 0 0 .5px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.8);
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1); --t: .35s;
  --add-bg: rgba(52,199,89,.16); --del-bg: rgba(255,59,48,.14); --add-strong: rgba(52,199,89,.34); --del-strong: rgba(255,59,48,.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #000; --bg2: #1c1c1e; --bg3: #2c2c2e;
    --grouped: #000; --grouped2: #1c1c1e; --grouped3: #2c2c2e;
    --label: #fff; --label2: rgba(235,235,245,.60); --label3: rgba(235,235,245,.30); --label4: rgba(235,235,245,.18);
    --separator: rgba(84,84,88,.60); --opaque-sep: #38383a;
    --fill: rgba(120,120,128,.36); --fill2: rgba(120,120,128,.32); --fill3: rgba(118,118,128,.24); --fill4: rgba(118,118,128,.18);
    --blue: #0a84ff; --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
    --pink: #ff375f; --purple: #bf5af2; --teal: #40c8e0; --indigo: #5e5ce6; --gray: #8e8e93;
    --accent-text: #409cff; --ok-text: #30d158; --bad-text: #ff6961; --warn-text: #ffb340;
    --mat-thin: rgba(60,60,60,.45); --mat-reg: rgba(30,30,30,.78); --mat-thick: rgba(28,28,30,.9);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
    --edge: inset 0 0 0 .5px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18);
    --add-bg: rgba(48,209,88,.16); --del-bg: rgba(255,69,58,.16); --add-strong: rgba(48,209,88,.34); --del-strong: rgba(255,69,58,.34);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #000; --bg2: #1c1c1e; --bg3: #2c2c2e;
  --grouped: #000; --grouped2: #1c1c1e; --grouped3: #2c2c2e;
  --label: #fff; --label2: rgba(235,235,245,.60); --label3: rgba(235,235,245,.30); --label4: rgba(235,235,245,.18);
  --separator: rgba(84,84,88,.60); --opaque-sep: #38383a;
  --fill: rgba(120,120,128,.36); --fill2: rgba(120,120,128,.32); --fill3: rgba(118,118,128,.24); --fill4: rgba(118,118,128,.18);
  --blue: #0a84ff; --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
  --pink: #ff375f; --purple: #bf5af2; --teal: #40c8e0; --indigo: #5e5ce6; --gray: #8e8e93;
  --accent-text: #409cff; --ok-text: #30d158; --bad-text: #ff6961; --warn-text: #ffb340;
  --mat-thin: rgba(60,60,60,.45); --mat-reg: rgba(30,30,30,.78); --mat-thick: rgba(28,28,30,.9);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --edge: inset 0 0 0 .5px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18);
  --add-bg: rgba(48,209,88,.16); --del-bg: rgba(255,69,58,.16); --add-strong: rgba(48,209,88,.34); --del-strong: rgba(255,69,58,.34);
}
:root[data-theme=light] { color-scheme: light; }
@media (prefers-reduced-transparency: reduce) { :root { --mat-thin: var(--bg2); --mat-reg: var(--bg2); --mat-thick: var(--bg2); --blur: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (prefers-contrast: more) { :root { --separator: var(--label2); } }

*, *::before, *::after { box-sizing: border-box; }
html { font: 400 100%/1.35 var(--font); -webkit-font-smoothing: antialiased; background: var(--grouped); color: var(--label); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--grouped); color: var(--label); font-size: var(--fs-body); }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre, .mono { font-family: var(--mono); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typo ---------- */
.large { font: 700 var(--fs-large)/1.2 var(--font); letter-spacing: -.02em; }
.title { font: 700 var(--fs-t1)/1.2 var(--font); letter-spacing: -.015em; }
.title2 { font: 700 var(--fs-t2)/1.25 var(--font); }
.title3 { font: 600 var(--fs-t3)/1.25 var(--font); }
.headline { font: 600 var(--fs-head)/1.3 var(--font); }
.sub { font-size: var(--fs-sub); }
.footnote { font: 400 var(--fs-foot)/1.4 var(--font); color: var(--label2); }
.caption { font-size: var(--fs-cap); color: var(--label2); }
.muted { color: var(--label2); }
.ok { color: var(--ok-text); } .bad { color: var(--bad-text); } .warn { color: var(--warn-text); }

/* ---------- Layout ---------- */
.split { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--mat-thin); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: var(--s4) var(--s2); border-right: .5px solid var(--separator); display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; font: 700 1.25rem var(--font); color: var(--label); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.brand .logo svg { width: 18px; height: 18px; }
.side-title { padding: 14px 10px 4px; font: 600 var(--fs-cap) var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--label2); }
.sidebar a.nav, .sidebar button.nav { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font: 400 var(--fs-call) var(--font); color: var(--label); border: 0; background: none; text-align: left; width: 100%; }
.sidebar a.nav:hover, .sidebar button.nav:hover { background: var(--fill4); text-decoration: none; }
.sidebar a.nav[aria-current] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: 600; }
.sidebar .nav svg { width: 20px; height: 20px; flex: none; }
.sidebar .nav .count { margin-left: auto; }
.sidebar .grow { flex: 1; }
.main { min-width: 0; display: flex; flex-direction: column; }
.navbar { position: sticky; top: 0; z-index: 20; min-height: 52px; display: flex; align-items: center; gap: var(--s3); padding: 6px var(--s5); background: var(--mat-reg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: .5px solid var(--separator); }
.navbar .search { flex: 1 1 520px; max-width: 520px; min-width: 0; }
.navbar .spacer { flex: 1 1 0; min-width: 0; }
.navbar .brand { display: none; padding: 0; }
.page { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--s6) var(--s5) 56px; }
.page.narrow { max-width: 640px; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.rowflex { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.rowflex.nowrap { flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; }
.tabbar { display: none; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .navbar { padding: 6px var(--s4); }
  .navbar .brand { display: flex; font-size: 1.125rem; }
  .navbar .brand .logo { width: 28px; height: 28px; }
  .navbar .brand-text { display: none; }
  .page { padding: var(--s4) var(--s4) calc(90px + env(safe-area-inset-bottom)); }
  .cols { grid-template-columns: 1fr; }
  .tabbar { display: flex; position: fixed; inset: auto 0 0; z-index: 30; justify-content: space-around; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: var(--mat-reg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: .5px solid var(--separator); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 44px; font: 500 .625rem var(--font); color: var(--label2); }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a[aria-current] { color: var(--accent-text); }
  .tabbar svg { width: 24px; height: 24px; }
  .large { font-size: 1.75rem; }
}
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.icon.sm { width: 16px; height: 16px; vertical-align: -3px; }
.icon.fill { fill: currentColor; }

/* ---------- Karten, Listen ---------- */
.card { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; }
.card.pad { padding: var(--s4) var(--s5); }
.card-head { display: flex; align-items: center; gap: var(--s3); padding: 12px 16px; font-weight: 600; background: var(--fill4); border-bottom: .5px solid var(--separator); }
@supports (corner-shape: squircle) { .card, .sheet { corner-shape: squircle; border-radius: calc(var(--r-card) * 1.4); } }
.list { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px; position: relative; color: var(--label); transition: background .12s; min-width: 0; }
.row.top { align-items: flex-start; }
a.row:hover, a.row:active, button.row:hover { background: var(--fill4); text-decoration: none; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--separator); }
.row.has-icon + .row::before { left: 56px; }
button.row { width: 100%; border: 0; background: none; text-align: left; }
.row .detail { margin-left: auto; color: var(--label2); font-size: var(--fs-sub); white-space: nowrap; }
.row .main-col { min-width: 0; flex: 1; }
.row .ttl { font-weight: 500; overflow-wrap: anywhere; }
.row .ttl a { color: var(--label); }
.row .meta { font-size: var(--fs-foot); color: var(--label2); margin-top: 2px; }
a.row.chev::after { content: ""; flex: none; width: 7px; height: 7px; border: solid var(--label3); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 4px; }
.tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill3); color: var(--label2); flex: none; }
.tile svg { width: 18px; height: 18px; }
.tile.blue { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.tile.green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--ok-text); }
.tile.purple { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.tile.red { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--bad-text); }
.section-title { font: 600 var(--fs-foot) var(--font); text-transform: uppercase; letter-spacing: .03em; color: var(--label2); padding: 0 var(--s4) 6px; }
.empty { text-align: center; padding: 48px 16px; color: var(--label2); }
.empty svg { width: 40px; height: 40px; color: var(--label3); margin-bottom: 8px; }
.empty .headline { color: var(--label); margin-bottom: 4px; }

/* ---------- Buttons & Eingaben ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); font: 600 var(--fs-body) var(--font); background: var(--accent); color: var(--on-accent); transition: transform .12s var(--ease), filter .12s; white-space: nowrap; text-decoration: none; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: scale(.97); filter: brightness(.92); }
.btn.bordered { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.btn.plain { background: none; color: var(--accent-text); padding: 0 8px; }
.btn.gray { background: var(--fill3); color: var(--label); }
.btn.green { background: var(--green); color: #fff; }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger.bordered { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--bad-text); }
.btn.small { min-height: 34px; padding: 0 14px; font-size: var(--fs-sub); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; pointer-events: none; }
.btn .icon { width: 18px; height: 18px; }
.btn.icon-only { padding: 0; width: 44px; }
.btn.small.icon-only { width: 34px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .lbl { font: 500 var(--fs-sub) var(--font); color: var(--label2); padding-left: 4px; }
.field .hint { font-size: var(--fs-foot); color: var(--label2); padding-left: 4px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], select, textarea, .input {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--r-ctl); background: var(--fill3); color: var(--label); outline: none; transition: box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--label3); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--accent); }
textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
textarea.code { font-family: var(--mono); font-size: .875rem; min-height: 360px; tab-size: 4; white-space: pre; overflow: auto; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--label2) 50%), linear-gradient(135deg, var(--label2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-group { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; }
.form-group .frow { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 16px; position: relative; }
.form-group .frow + .frow::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--separator); }
.form-group .frow > label { flex: none; min-width: 108px; color: var(--label); }
.form-group .frow input, .form-group .frow select { background: none; padding-left: 0; padding-right: 0; min-height: 44px; border-radius: 0; box-shadow: none; }
.form-group .frow select { padding-right: 24px; background-position: calc(100% - 8px) 50%, calc(100% - 3px) 50%; }
.form-group .frow.col { flex-direction: column; align-items: stretch; padding: 8px 16px; gap: 4px; }
.form-group .frow.col textarea { background: none; padding: 4px 0; min-height: 90px; border-radius: 0; box-shadow: none; }
.err { color: var(--bad-text); font-size: var(--fs-sub); padding: 0 4px; }
.toggle { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; min-height: 0; border-radius: 99px; background: var(--fill); position: relative; transition: background var(--t) var(--ease); cursor: pointer; flex: none; padding: 0; border: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform var(--t) var(--spring); }
.toggle:checked { background: var(--green); }
.toggle:checked::after { transform: translateX(20px); }
.form-group .frow input.toggle { width: 51px; padding: 0; margin-left: auto; }
.seg { display: inline-flex; padding: 2px; background: var(--fill3); border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button, .seg a { padding: 6px 14px; border: 0; background: none; border-radius: 7px; font: 500 var(--fs-foot) var(--font); color: var(--label); white-space: nowrap; min-height: 30px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.seg button[aria-pressed=true], .seg a[aria-current] { background: var(--bg3); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); font-weight: 600; }
:root[data-theme=dark] .seg [aria-pressed=true] { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .seg [aria-pressed=true], :root:not([data-theme=light]) .seg [aria-current] { background: #636366; } }
.search { position: relative; }
.search input { padding-left: 38px; min-height: 36px; border-radius: 10px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--label2); pointer-events: none; }

/* ---------- Badges, Labels, Avatare ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font: 600 var(--fs-cap) var(--font); background: var(--fill3); color: var(--label2); white-space: nowrap; }
.badge.green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--ok-text); }
.badge.purple { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); }
.badge.red { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--bad-text); }
.badge.orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--warn-text); }
.badge.blue { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--accent-text); }
.state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--r-pill); font: 600 var(--fs-sub) var(--font); color: #fff; }
.state.open { background: var(--green); } .state.closed { background: var(--red); } .state.merged { background: var(--purple); }
.lbl-pill { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); font: 600 .6875rem var(--font); color: #fff; line-height: 1.6; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 .875rem var(--font); flex: none; text-transform: uppercase; user-select: none; }
.avatar.sm { width: 22px; height: 22px; font-size: .6875rem; }
.avatar.lg { width: 96px; height: 96px; font-size: 2.5rem; }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--fill2); color: var(--label2); font: 600 var(--fs-cap) var(--font); text-align: center; line-height: 20px; }
.dot { position: absolute; top: 6px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.dot.inline { position: static; display: inline-block; }

/* ---------- Repo ---------- */
.repo-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.repo-head .path { font: 600 1.375rem var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.repo-head .path a { color: var(--accent-text); }
.repo-head .path .name { color: var(--label); }
.repo-head .acts { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s5) * -1) var(--s5); padding: 0 var(--s5); border-bottom: .5px solid var(--separator); }
.tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--label2); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; }
.tabs a:hover { text-decoration: none; color: var(--label); }
.tabs a[aria-current] { color: var(--label); border-bottom-color: var(--accent); font-weight: 600; }
@media (max-width: 820px) { .tabs { margin: 0 calc(var(--s4) * -1) var(--s4); padding: 0 var(--s4); } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 600; }
.crumbs span.sep { color: var(--label3); }
.commit-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--fill4); font-size: var(--fs-sub); border-bottom: .5px solid var(--separator); min-width: 0; }
.commit-bar > * { flex: none; }
.commit-bar .msg { flex: 1 1 0; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label); }
.sha { font-family: var(--mono); font-size: var(--fs-foot); color: var(--label2); }
.file-row .size { font-size: var(--fs-foot); color: var(--label2); }
.clone-box { display: flex; gap: 8px; align-items: center; }
.clone-box input { font-family: var(--mono); font-size: .8125rem; }
.langbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.langbar span { display: block; min-width: 3px; }
.langlist { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: var(--fs-foot); }
.langlist i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.menu { position: absolute; z-index: 60; min-width: 220px; max-width: min(92vw, 380px); max-height: min(60vh, 420px); overflow-y: auto; background: var(--mat-thick); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; box-shadow: var(--shadow), var(--edge); padding: 4px 0; }
.menu .mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border: 0; background: none; text-align: left; color: var(--label); }
.menu .mi:hover { background: var(--fill4); text-decoration: none; }
.menu .mi.danger { color: var(--bad-text); }
.menu .mi .tick { margin-left: auto; color: var(--accent); }
.menu .sep { height: 8px; background: var(--fill4); margin: 4px 0; }
.menu .mh { padding: 8px 16px 2px; font: 600 var(--fs-cap) var(--font); text-transform: uppercase; color: var(--label2); }
.menu input[type=search] { margin: 6px 12px; width: calc(100% - 24px); min-height: 36px; }

/* ---------- Code ---------- */
.codebox { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; }
.codebox .head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: 8px 16px; min-height: 48px; background: var(--fill4); border-bottom: .5px solid var(--separator); font-size: var(--fs-sub); }
.codescroll { display: flex; overflow-x: auto; font: .8125rem/1.55 var(--mono); }
.codescroll .gutter { position: sticky; left: 0; flex: none; padding: 12px 10px 12px 14px; text-align: right; color: var(--label3); background: var(--grouped2); user-select: none; margin: 0; border-right: .5px solid var(--separator); white-space: pre; }
.codescroll .src { margin: 0; padding: 12px 16px; flex: 1 0 auto; white-space: pre; tab-size: 4; min-width: 0; }
.tk-kw { color: var(--purple); font-weight: 600; } .tk-str { color: var(--ok-text); } .tk-com { color: var(--label2); font-style: italic; }
.tk-num { color: var(--orange); } .tk-fn { color: var(--accent-text); } .tk-type { color: var(--teal); } .tk-attr { color: var(--warn-text); } .tk-key { color: var(--accent-text); }
.imgview { padding: var(--s5); text-align: center; background: repeating-conic-gradient(var(--fill4) 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
.imgview img { max-height: 70vh; }
.editor-meta { display: flex; flex-direction: column; gap: var(--s3); }

/* ---------- Diff ---------- */
.diff-file { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s4); }
.diff-file > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--fill4); font: 600 var(--fs-sub) var(--mono); cursor: pointer; flex-wrap: wrap; }
.diff-file > summary::-webkit-details-marker { display: none; }
.diff-file > summary .path { overflow-wrap: anywhere; flex: 1; min-width: 0; }
.diff-body { overflow-x: auto; font: .78125rem/1.5 var(--mono); }
.diff-table { min-width: 100%; width: max-content; border-collapse: collapse; }
.diff-table td { padding: 0 8px; white-space: pre; vertical-align: top; }
.diff-table td.ln { width: 1%; min-width: 44px; text-align: right; color: var(--label3); user-select: none; padding: 0 8px; }
.diff-table tr.add { background: var(--add-bg); } .diff-table tr.add td.ln { background: var(--add-strong); color: var(--label2); }
.diff-table tr.del { background: var(--del-bg); } .diff-table tr.del td.ln { background: var(--del-strong); color: var(--label2); }
.diff-table tr.hunk { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--label2); }
.diff-table tr.meta td { color: var(--label2); font-style: italic; }
.diff-table td.sign { width: 1%; padding: 0 2px 0 6px; color: var(--label2); user-select: none; }
.diff-note { padding: 12px 16px; color: var(--label2); font-size: var(--fs-sub); }
.stat-add { color: var(--ok-text); } .stat-del { color: var(--bad-text); }

/* ---------- Markdown ---------- */
.md { overflow-wrap: anywhere; line-height: 1.6; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1.4em 0 .5em; line-height: 1.25; letter-spacing: -.01em; }
.md h1 { font-size: 1.75rem; padding-bottom: .3em; border-bottom: .5px solid var(--separator); } .md h2 { font-size: 1.375rem; padding-bottom: .25em; border-bottom: .5px solid var(--separator); } .md h3 { font-size: 1.125rem; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table { margin: 0 0 1em; }
.md ul, .md ol { padding-left: 1.6em; } .md li + li { margin-top: .25em; }
.md li.task { list-style: none; margin-left: -1.3em; }
.md blockquote { padding: 0 1em; color: var(--label2); border-left: 4px solid var(--fill); }
.md code { font-size: .875em; background: var(--fill3); padding: .15em .4em; border-radius: 6px; }
.md pre.md-code { background: var(--fill4); padding: 12px 16px; border-radius: 12px; overflow-x: auto; font-size: .8125rem; line-height: 1.5; }
.md pre.md-code code { background: none; padding: 0; font-size: inherit; }
.md hr { border: 0; border-top: .5px solid var(--separator); margin: 1.5em 0; }
.md .md-table { overflow-x: auto; } .md table { border-collapse: collapse; } .md th, .md td { padding: 6px 12px; border: .5px solid var(--separator); } .md th { background: var(--fill4); } .md .al-center { text-align: center; } .md .al-right { text-align: right; }
.md img { border-radius: 8px; } .md a.ref, .md a.mention { font-weight: 500; }

/* ---------- Tabellen, Sonstiges ---------- */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.kv .tile-stat { background: var(--grouped2); border-radius: var(--r-card); padding: 14px 16px; }
.kv .num { font: 700 1.625rem var(--font); letter-spacing: -.02em; }
.thread .bubble { background: var(--grouped2); border-radius: var(--r-card); overflow: hidden; }
.thread .bubble .bhead { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--fill4); font-size: var(--fs-sub); border-bottom: .5px solid var(--separator); flex-wrap: wrap; }
.thread .bubble .bbody { padding: 14px 16px; }
.item { display: flex; gap: 12px; align-items: flex-start; }
.item > .avatar { margin-top: 2px; }
.item > .bubble, .item > .grow { flex: 1; min-width: 0; }
.statusbox { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--grouped2); border-radius: var(--r-card); }
.statusbox .tile { width: 38px; height: 38px; border-radius: 50%; }
.toast-wrap { position: fixed; z-index: 100; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (max-width: 820px) { .toast-wrap { bottom: calc(86px + env(safe-area-inset-bottom)); } }
.toast { pointer-events: auto; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 16px; background: var(--mat-thick); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--edge); font-weight: 500; animation: toast-in .35s var(--spring); }
.toast.err { color: var(--bad-text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Sheet / Dialog ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: var(--s4); animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: min(100%, 520px); max-height: 90dvh; overflow-y: auto; background: var(--mat-thick); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r-sheet); box-shadow: var(--shadow); padding: 8px 20px 20px; animation: sheet-in .5s var(--spring); }
.sheet::before { content: ""; display: block; width: 36px; height: 5px; margin: 6px auto 14px; border-radius: 3px; background: var(--label4); }
.sheet h2 { font: 700 var(--fs-t2)/1.25 var(--font); margin-bottom: 8px; }
.sheet .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .scrim { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sheet .actions .btn { flex: 1; }
}
.spinner { width: 28px; height: 28px; border: 3px solid var(--fill); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 64px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero { text-align: center; padding: 56px 0 40px; }
.hero p { max-width: 520px; margin: 12px auto 24px; color: var(--label2); font-size: 1.125rem; }
.copy-token { font-family: var(--mono); font-size: .8125rem; word-break: break-all; background: var(--fill3); padding: 12px 14px; border-radius: 12px; }
.pager { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s4); }
@media print { .sidebar, .navbar, .tabbar { display: none; } }
.form-group .frow input.toggle { width: 51px; height: 31px; min-height: 0; padding: 0; border-radius: 99px; background: var(--fill); margin-left: auto; }
.form-group .frow input.toggle:checked { background: var(--green); }

/* ---------- Dropdown (public/js/dropdown.js) ---------- */
select.cgdd-src { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; clip-path: inset(50%); }
.cgdd { display: block; position: relative; min-width: 0; width: 100%; }
.form-group .frow .cgdd { flex: 1; width: auto; }
.cgdd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px 10px 14px; border: 0; border-radius: var(--r-ctl); background: var(--fill3); color: var(--label); text-align: left; outline: none; transition: box-shadow .15s, background .15s; }
.cgdd-btn:hover:not(:disabled) { background: var(--fill2); }
.cgdd-btn:focus-visible, .cgdd-btn[aria-expanded=true] { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.cgdd-btn:disabled { opacity: .5; cursor: not-allowed; }
.cgdd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgdd-val.empty { color: var(--label3); }
.cgdd-chev { flex: none; width: 16px; height: 16px; color: var(--label2); transition: transform .2s var(--ease); }
.cgdd-btn[aria-expanded=true] .cgdd-chev { transform: rotate(180deg); }
.form-group .frow .cgdd-btn { background: none; padding-left: 0; padding-right: 0; border-radius: 0; box-shadow: none; }
.form-group .frow .cgdd-btn:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.cgdd-pop { position: fixed; z-index: 90; display: flex; flex-direction: column; background: var(--mat-thick); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; box-shadow: var(--shadow), var(--edge); overflow: hidden; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center; transition: opacity .14s var(--ease), transform .18s var(--ease); }
.cgdd-pop.up { transform-origin: bottom center; transform: translateY(4px) scale(.98); }
.cgdd-pop.show { opacity: 1; transform: none; }
.cgdd-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.cgdd-sw { flex: none; padding: 8px 8px 4px; }
.cgdd-sw input { width: 100%; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--fill3); color: var(--label); outline: none; }
.cgdd-sw input:focus { box-shadow: 0 0 0 2px var(--accent); }
.cgdd-group.sep { border-top: .5px solid var(--separator); margin-top: 4px; padding-top: 4px; }
.cgdd-gh { padding: 6px 12px 2px; font: 600 var(--fs-cap) var(--font); text-transform: uppercase; letter-spacing: .02em; color: var(--label2); }
.cgdd-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; cursor: pointer; color: var(--label); user-select: none; -webkit-tap-highlight-color: transparent; }
.cgdd-opt.active { background: var(--fill3); }
.cgdd-opt[aria-selected=true] { font-weight: 600; }
.cgdd-opt.disabled { opacity: .4; cursor: not-allowed; }
.cgdd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cgdd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgdd-desc { font-size: var(--fs-foot); color: var(--label2); font-weight: 400; white-space: normal; }
.cgdd-ico { flex: none; width: 20px; height: 20px; color: var(--label2); }
.cgdd-tick { flex: none; width: 18px; height: 18px; color: var(--accent); }
.cgdd-none { padding: 14px 12px; text-align: center; color: var(--label2); font-size: var(--fs-sub); }
.cgdd-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s var(--ease); }
.cgdd-scrim.show { opacity: 1; }
.cgdd-grab { flex: none; width: 36px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--label4); }
.cgdd-pop.sheet-mode { left: 0; right: 0; top: auto; bottom: 0; max-height: 70dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transform-origin: bottom center; opacity: 1; transition: transform .3s var(--ease); }
.cgdd-pop.sheet-mode.show { transform: none; }
.cgdd-pop.sheet-mode .cgdd-list { max-height: calc(70dvh - 60px); padding: 4px 8px 12px; }
.cgdd-pop.sheet-mode .cgdd-opt { min-height: 48px; }
@media (forced-colors: active) { .cgdd-opt.active { outline: 2px solid Highlight; } }

/* ---------- Administration ---------- */
.site-banners:empty { display: none; }
.site-banner { display: flex; align-items: center; gap: 10px; padding: 10px var(--s5); font-size: var(--fs-sub); border-bottom: .5px solid var(--separator); }
.site-banner svg { width: 18px; height: 18px; flex: none; }
.site-banner > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.site-banner.info { background: color-mix(in srgb, var(--blue) 14%, var(--grouped2)); }
.site-banner.warning { background: color-mix(in srgb, var(--orange) 22%, var(--grouped2)); }
.kv .tile-stat .caption { margin-top: 2px; }
.admin-toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.admin-toolbar .search { flex: 1 1 220px; max-width: 360px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.chart { margin: 0; padding: 14px 16px 10px; --chart-c: var(--accent); }
.chart.c-blue { --chart-c: var(--blue); } .chart.c-green { --chart-c: var(--green); } .chart.c-purple { --chart-c: var(--purple); } .chart.c-orange { --chart-c: var(--orange); }
.chart h3 { font: 600 var(--fs-head) var(--font); }
.chart svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.chart .bar { fill: var(--chart-c); }
.chart .bar:hover { opacity: .75; }
.chart text { fill: var(--label2); font: 400 9px var(--font); }
.chart .axis { stroke: var(--opaque-sep); stroke-width: 1; }
.chart .grid { stroke: var(--separator); stroke-width: .5; stroke-dasharray: 2 3; }
.dtable-wrap { overflow-x: auto; }
table.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.dtable th { text-align: left; font: 600 var(--fs-foot) var(--font); color: var(--label2); padding: 10px 14px; border-bottom: .5px solid var(--separator); white-space: nowrap; }
.dtable th a { color: inherit; }
.dtable td { padding: 10px 14px; border-bottom: .5px solid var(--separator); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .act { text-align: right; white-space: nowrap; width: 1%; }
.dtable .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dtable .who .main-col { min-width: 0; }
.dtable .ttl { overflow-wrap: anywhere; }
.dtable .meta { font-size: var(--fs-foot); color: var(--label2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .dtable .hide-sm { display: none; } .dtable th, .dtable td { padding: 10px 10px; } }
.meter { height: 8px; border-radius: 99px; background: var(--fill3); overflow: hidden; margin: 2px 0 6px; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.avatar-preview { display: inline-flex; margin-left: auto; }
.form-group .frow.has-hint { flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; padding-bottom: 0; }
.form-group .frow .fline { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.form-group .frow .fline > :not(label) { flex: 1 1 0; min-width: 0; }
.form-group .frow .fline > input.toggle { flex: none; margin-left: auto; }
.form-group .frow .hint { font-size: var(--fs-foot); color: var(--label2); margin: -4px 0 10px; }
.form-group .frow input[type=number] { text-align: right; }
.form-group .frow.col label { padding-top: 4px; }
@media (max-width: 820px) { .chart-grid { grid-template-columns: 1fr; } .site-banner { padding: 10px var(--s4); } }
.form-group .frow .fline > label { flex: none; min-width: 190px; }
@media (max-width: 640px) {
  .form-group .frow .fline { flex-wrap: wrap; row-gap: 0; padding-top: 6px; }
  .form-group .frow .fline > label { min-width: 0; flex: 1 1 100%; font-size: var(--fs-sub); color: var(--label2); }
  .form-group .frow .fline > :not(label) { flex: 1 1 100%; }
  .form-group .frow .fline > input.toggle { flex: none; margin: -4px 0 0 auto; }
}