/* webentwickler.io · Update-Bereich
   Eigene Farb-/Layout-Tokens, bewusst minimal */
:root {
  --u-bg-1: #0a0720;
  --u-bg-2: #13102e;
  --u-surface: #1a1640;
  --u-surface-2: #221d4f;
  --u-border: rgba(255,255,255,.10);
  --u-hairline: rgba(255,255,255,.06);
  --u-fg-1: #f3f1fa;
  --u-fg-2: #c0bdd6;
  --u-fg-3: #7a7890;
  --u-lime: #b6ff3c;
  --u-lime-soft: rgba(182,255,60,.18);
  --u-mag: #ff2eb8;
  --u-blue: #9ec3ff;
  --u-radius: 12px;
  --u-radius-lg: 16px;
  --u-mono: 'JetBrains Mono', ui-monospace, monospace;
  --u-sans: 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: radial-gradient(ellipse at top, #1a1542 0%, var(--u-bg-1) 60%);
  color: var(--u-fg-1);
  font-family: var(--u-sans);
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.55;
}

/* ── Impersonation-Banner ──────────────────────────────── */
.u-imp-bar { background: linear-gradient(90deg, rgba(255,46,184,.85), rgba(255,179,64,.85)); color: #0a0720; padding: 8px 20px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.u-imp-icon { font-size: 14px; }
.u-imp-by { font-family: var(--u-mono); font-size: 11px; opacity: .75; }
.u-imp-back { margin-left: auto; background: rgba(10,7,32,.7); color: var(--u-lime); padding: 4px 12px; border-radius: 6px; text-decoration: none; font-size: 11px; font-weight: 600; transition: .15s; }
.u-imp-back:hover { background: #0a0720; color: #fff; }

/* ── Header ─────────────────────────────────────────────── */
.u-hdr { background: rgba(10,7,32,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--u-hairline); position: sticky; top: 0; z-index: 50; }
.u-hdr-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 18px; }
.u-brand { color: var(--u-fg-1); text-decoration: none; font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
/* Wortmark als Lime-umrandeter Pill — identisch zur Startseite (brand--agency) */
.u-brand-pill {
  display: inline-flex; align-items: center;
  font-family: var(--u-mono); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: -.02em;
  background: var(--u-bg-1); color: var(--u-fg-1);
  border: 2px solid var(--u-lime); border-radius: 999px;
  padding: .55rem 1rem;
}
.u-brand-tld { color: var(--u-lime); }
.u-brand-tag { font-size: 10px; font-family: var(--u-mono); font-weight: 700; background: var(--u-lime); color: #0a0720; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; margin-left: 0; }
.u-site { color: var(--u-fg-2); font-size: 13px; padding-left: 14px; border-left: 1px solid var(--u-hairline); }
.u-brand-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--u-fg-3); background: rgba(255,46,184,.08); border: 1px solid rgba(255,46,184,.2); padding: 3px 8px; border-radius: 12px; }
.u-brand-badge code { font-family: var(--u-mono); font-size: 10px; padding: 1px 4px; background: rgba(0,0,0,.3); border-radius: 3px; }

/* Live-Link: direkt nach Site-Switcher */
.u-live-link { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--u-blue); text-decoration:none; padding:5px 11px; border:1px solid rgba(158,195,255,.25); border-radius:8px; background:rgba(158,195,255,.06); transition:.15s; margin-left:4px; }
.u-live-link:hover { background:rgba(158,195,255,.14); color:var(--u-fg-1); border-color:rgba(158,195,255,.5); }
.u-live-link-text { font-weight:500; }
@media (max-width: 720px) { .u-live-link-text { display:none; } .u-live-link { padding:5px 8px; } }

/* Site-Switcher Dropdown */
.u-site-switcher { position: relative; padding-left: 14px; border-left: 1px solid var(--u-hairline); }
.u-site-switcher-btn { background: transparent; border: 1px solid var(--u-border); color: var(--u-fg-1); font-family: var(--u-sans); font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; transition: border-color .15s; }
.u-site-switcher-btn:hover { border-color: var(--u-lime); }
.u-site-switcher-menu { display: none; position: absolute; top: calc(100% + 6px); left: 14px; min-width: 240px; background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,.5); padding: 6px; z-index: 100; }
.u-site-switcher.open .u-site-switcher-menu { display: block; }
.u-site-switcher-head { font-size: 10.5px; color: var(--u-fg-3); text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px 6px; font-family: var(--u-mono); font-weight: 700; }
.u-site-switcher-menu a { display: block; padding: 8px 12px; color: var(--u-fg-1); text-decoration: none; border-radius: 6px; font-size: 13.5px; transition: .12s; }
.u-site-switcher-menu a:hover { background: rgba(182,255,60,.08); color: var(--u-lime); }
.u-site-switcher-all { margin-top: 4px; border-top: 1px solid var(--u-hairline); border-radius: 0 0 6px 6px !important; color: var(--u-fg-2) !important; font-size: 12.5px !important; }
.u-user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--u-fg-2); }
/* Identitäts-Pille: Tier-Chip + Name in einer Pille; Abmelden als eigene Pille daneben.
   Container/Name nutzen --u-* (passt sich Hell-/Dunkel-Theme an); Tier-Chips sind gefüllt
   (eigener Hintergrund) → auf jedem Header-Untergrund gut lesbar. */
.u-id-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--u-surface-2); border: 1px solid var(--u-border); border-radius: 999px; padding: 5px 14px 5px 6px; }
.u-id-name { font-size: 13px; font-weight: 600; color: var(--u-fg-1); white-space: nowrap; line-height: 1; }
.u-tier-chip { font-size: 10px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 4px 10px; white-space: nowrap; line-height: 1; box-shadow: 0 1px 2px rgba(18,14,30,.12); }
.u-tier-3 { background: linear-gradient(135deg,#c7f73e,#a4dd00); color: #2b4300; }
.u-tier-2 { background: linear-gradient(135deg,#cfe2ff,#a9c9ff); color: #173a73; }
.u-tier-1 { background: #e3e1ea; color: #56516a; }
.u-logout { color: var(--u-fg-2); text-decoration: none; font-size: 12px; font-weight: 600; padding: 7px 15px; border: 1px solid var(--u-border); border-radius: 999px; background: var(--u-surface); transition: .15s; white-space: nowrap; }
.u-logout:hover { color: var(--u-mag); border-color: var(--u-mag); }

/* ── Layout-Container ──────────────────────────────────── */
.u-layout { display: block; width: 100%; flex: 1; }
.u-layout.u-layout-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  align-items: stretch;
  margin-bottom: 0;
}
.u-layout.u-layout-admin .u-main { max-width: none; margin: 0; padding: 36px 32px 72px 40px; }
/* Wide-Layout (Admins ohne Debug-Panel): volle Breite, aber kein Sidebar-Grid */
.u-layout.u-layout-wide { display: block; }
.u-layout.u-layout-wide .u-main { max-width: none; margin: 0; padding: 36px 32px 72px 40px; }

/* Admin-Body: alles linksbündig (Header + Footer auch volle Breite) */
.u-body-admin .u-hdr-inner { max-width: none; padding: 14px 32px; }
.u-body-admin .u-foot { max-width: none; padding: 18px 32px; }

/* ── Main ───────────────────────────────────────────────── */
.u-main { flex: 1; max-width: 1100px; margin: 0 auto; padding: 36px 24px 60px; width: 100%; }

/* ── Footer ─────────────────────────────────────────────── */
.u-foot { padding: 18px 24px; border-top: 1px solid var(--u-hairline); display: flex; justify-content: space-between; max-width: 1100px; margin: 0 auto; width: 100%; font-size: 11.5px; color: var(--u-fg-3); font-family: var(--u-mono); flex-wrap: wrap; gap: 12px; }

/* ── Debug-Panel (Admin, 1/5 grid rechts) ─────────────── */
.u-dbg-panel {
  border-left: 1px solid var(--u-hairline);
  background: rgba(255, 46, 184, .025);
  padding: 16px 14px;
  font-size: 11.5px;
  color: var(--u-fg-2);
  position: sticky; top: 76px;
  align-self: start;
  max-height: calc(100vh - 76px);
  overflow: hidden;
  min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--u-mono);
}
.u-dbg-log {
  flex: 1 1 auto;
  min-height: 0;
}
.u-dbg-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed var(--u-hairline); }
.u-dbg-head strong { color: var(--u-mag); font-size: 12.5px; }
.u-dbg-sub { color: var(--u-fg-3); font-size: 10.5px; }
.u-dbg-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.u-dbg-btn {
  background: transparent;
  border: 1px solid var(--u-hairline);
  color: var(--u-fg-2);
  font-family: var(--u-mono);
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: .15s;
}
.u-dbg-btn:hover { border-color: var(--u-mag); color: var(--u-mag); }
.u-dbg-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--u-fg-3); cursor: pointer; margin-left: auto; }
.u-dbg-chk input { width: 12px; height: 12px; accent-color: var(--u-mag); }
.u-dbg-filters { display: flex; gap: 6px; }
.u-dbg-search, .u-dbg-sel {
  flex: 1;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--u-hairline);
  color: var(--u-fg-1);
  font-family: var(--u-mono);
  font-size: 10.5px;
  padding: 5px 8px;
  border-radius: 4px;
  outline: none;
}
.u-dbg-search:focus, .u-dbg-sel:focus { border-color: var(--u-mag); }
.u-dbg-meta {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 8px; background: rgba(0,0,0,.18); border-radius: 4px;
  font-size: 10px;
}
.u-dbg-meta div { display: flex; justify-content: space-between; gap: 6px; }
.u-dbg-meta span { color: var(--u-fg-3); }
.u-dbg-meta code { color: var(--u-fg-1); font-size: 10px; word-break: break-all; }
.u-dbg-log { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.u-dbg-empty { color: var(--u-fg-3); font-style: italic; padding: 12px 4px; text-align: center; font-size: 11px; }
.u-dbg-entry {
  padding: 5px 7px;
  border-radius: 3px;
  border-left: 2px solid var(--u-hairline);
  background: rgba(0,0,0,.12);
  font-size: 10.5px;
  line-height: 1.4;
}
.u-dbg-entry-row { display: flex; gap: 6px; align-items: baseline; }
.u-dbg-time { color: var(--u-fg-3); font-size: 9.5px; }
.u-dbg-lvl { font-weight: 700; font-size: 9px; padding: 0 4px; border-radius: 2px; }
.u-dbg-cmp { color: var(--u-fg-2); font-size: 10px; font-weight: 600; }
.u-dbg-msg { color: var(--u-fg-1); margin-top: 2px; word-break: break-word; }
.u-dbg-ctx {
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(0,0,0,.3);
  border-radius: 3px;
  font-size: 9.5px;
  max-height: 130px;
  overflow: auto;
  color: var(--u-fg-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.u-dbg-l-info { border-left-color: rgba(120,180,255,.5); }
.u-dbg-l-info .u-dbg-lvl { background: rgba(120,180,255,.18); color: rgba(150,200,255,.95); }
.u-dbg-l-warn { border-left-color: rgba(255,179,64,.7); background: rgba(255,179,64,.05); }
.u-dbg-l-warn .u-dbg-lvl { background: rgba(255,179,64,.18); color: #ffb340; }
.u-dbg-l-error { border-left-color: var(--u-mag); background: rgba(255,46,184,.06); }
.u-dbg-l-error .u-dbg-lvl { background: rgba(255,46,184,.18); color: var(--u-mag); }

@media (max-width: 1280px) {
  .u-layout.u-layout-admin { grid-template-columns: 1fr; }
  .u-dbg-panel { border-left: none; border-top: 1px solid var(--u-hairline); position: relative; max-height: 50vh; }
}

/* ── Typo ───────────────────────────────────────────────── */
h1 { font-size: 28px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 28px 0 12px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 6px; font-weight: 600; }
.u-lead { color: var(--u-fg-2); font-size: 15px; margin: 0 0 24px; max-width: 60ch; }
.u-section { margin-bottom: 28px; }

/* ── Card (Login etc.) ──────────────────────────────────── */
.u-card { background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: var(--u-radius-lg); padding: 36px 32px; }
.u-card-narrow { max-width: 440px; margin: 60px auto 0; text-align: center; }
.u-card-icon { font-size: 38px; margin-bottom: 8px; }

/* ── Form ───────────────────────────────────────────────── */
.u-label { display: block; text-align: left; font-size: 11.5px; color: var(--u-fg-3); text-transform: uppercase; letter-spacing: .08em; font-family: var(--u-mono); margin-bottom: 8px; font-weight: 700; }
.u-input, .u-textarea {
  width: 100%; background: var(--u-bg-1); border: 1px solid var(--u-border); color: var(--u-fg-1);
  font-size: 15px; padding: 12px 14px; border-radius: 10px; font-family: var(--u-sans);
  transition: border-color .15s, background .15s; margin-top: 6px;
}
.u-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.u-input:focus, .u-textarea:focus { outline: none; border-color: var(--u-lime); background: var(--u-bg-2); }

.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .12s, background .15s, border-color .15s; font-family: var(--u-sans); }
.u-btn:active { transform: translateY(1px); }
.u-btn-primary { background: var(--u-lime); color: #0a0720; width: 100%; margin-top: 18px; }
.u-btn-primary:hover { background: #c6ff5c; }
.u-btn-ghost { background: transparent; color: var(--u-fg-2); border-color: var(--u-border); }
.u-btn-ghost:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); }

.u-help { margin: 22px 0 0; font-size: 12px; color: var(--u-fg-3); }
.u-link { color: var(--u-lime); text-decoration: none; }
.u-link:hover { text-decoration: underline; }

/* ── Flash ──────────────────────────────────────────────── */
.u-flash { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: 14px; line-height: 1.4; }
.u-flash-ok  { background: var(--u-lime-soft); color: var(--u-lime); border: 1px solid rgba(182,255,60,.3); }
.u-flash-err { background: rgba(255,46,184,.12); color: var(--u-mag); border: 1px solid rgba(255,46,184,.3); }
.u-flash-info { background: rgba(158,195,255,.10); color: var(--u-blue); border: 1px solid rgba(158,195,255,.25); }

.u-success-box { text-align: left; background: var(--u-lime-soft); border: 1px solid rgba(182,255,60,.3); padding: 18px 20px; border-radius: 10px; }
.u-success-box strong { color: var(--u-lime); font-size: 15px; }
.u-success-box p { color: var(--u-fg-2); margin: 8px 0 0; font-size: 13.5px; }
.u-success-box .u-sub { color: var(--u-fg-3); font-size: 12px; }

/* ── Site-Grid (Dashboard) ──────────────────────────────── */
.u-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.u-site-card { background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 14px; min-height: 130px; }
.u-site-card:hover { border-color: var(--u-lime); transform: translateY(-2px); }
.u-site-card-head h3 { font-size: 17px; }
.u-site-url { font-family: var(--u-mono); color: var(--u-fg-3); font-size: 11.5px; }
.u-site-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--u-fg-3); }
.u-cta { color: var(--u-lime); font-weight: 600; }

/* ── Admin-Diagnose ─────────────────────────────────────── */
.u-diag { background: var(--u-bg-2); border: 1px solid rgba(255,179,64,.30); border-radius: var(--u-radius); padding: 14px 18px; margin-bottom: 22px; }
/* Seitliches Admin-Diagnose-Panel — auf großen Screens rechts angedockt, klein wenn zu */
@media (min-width: 1280px) {
  .u-diag-side { position: fixed; top: 90px; right: 14px; width: 56px; max-height: calc(100vh - 110px); overflow: hidden; z-index: 40; transition: width .25s ease, max-height .25s ease; padding: 10px 12px; }
  .u-diag-side > summary { white-space: nowrap; overflow: hidden; }
  .u-diag-side[open] { width: 380px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 18px; }
  .u-diag-side .u-diag-grid { grid-template-columns: 1fr; gap: 6px 14px; }
  .u-diag-side .u-diag-key { min-width: 110px; }
}
.u-diag-side > summary::after { content: " ▸"; color: var(--u-fg-3); font-size: 10px; margin-left: 4px; }
.u-diag-side[open] > summary::after { content: " ▾"; }
.u-diag > summary { font-family: var(--u-mono); font-weight: 700; font-size: 12.5px; color: var(--u-amber, #ffb340); cursor: pointer; padding: 0; list-style: none; outline: none; }
.u-diag > summary small { color: var(--u-fg-3); font-weight: 400; margin-left: 8px; font-size: 11px; }
.u-diag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--u-hairline); }
.u-diag-grid > div { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.u-diag-key { color: var(--u-fg-3); flex-shrink: 0; min-width: 130px; font-family: var(--u-mono); font-size: 11.5px; }
.u-diag-val { color: var(--u-fg-1); word-break: break-all; }
.u-diag-val.u-mono { font-family: var(--u-mono); font-size: 11.5px; }
.u-diag-ok  { color: var(--u-lime); }
.u-diag-warn { color: #ffb340; }
.u-diag-err { color: var(--u-mag); }
.u-diag-action { margin-top: 14px; padding: 12px 16px; background: rgba(255,179,64,.08); border: 1px solid rgba(255,179,64,.25); border-radius: 8px; font-size: 13px; line-height: 1.55; color: var(--u-fg-1); }
.u-diag-action.u-diag-err-bg { background: rgba(255,46,184,.08); border-color: rgba(255,46,184,.3); }
.u-diag-action .u-btn { margin-top: 0; width: auto; }
.u-diag-logs { margin-top: 14px; }
.u-diag-logs > summary { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-3); cursor: pointer; padding: 6px 0; }
.u-log-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11.5px; }
.u-log-table th, .u-log-table td { padding: 6px 10px; border-bottom: 1px solid var(--u-hairline); text-align: left; }
.u-log-table th { color: var(--u-fg-3); font-family: var(--u-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 700; }
.u-log-table .u-mono { font-family: var(--u-mono); font-size: 11px; }
.u-log-payload { color: var(--u-fg-3); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.u-block-row-empty { border-style: dashed; opacity: .8; }
.u-block-badge { display: inline-block; background: rgba(255,179,64,.18); color: #ffb340; font-size: 10.5px; font-family: var(--u-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; }
.u-block-content-empty { color: var(--u-fg-3); font-style: italic; }

/* ── Block-Liste (Site-Seite) ──────────────────────────── */
.u-block-list { display: flex; flex-direction: column; gap: 10px; }
.u-block-row { background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 18px 22px; text-decoration: none; color: inherit; transition: border-color .15s, transform .12s; display: block; }
.u-block-row:hover { border-color: var(--u-lime); }
.u-block-row-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.u-block-row-head h3 { font-size: 15.5px; }
.u-block-help { font-size: 12px; color: var(--u-fg-3); }
.u-block-content { font-size: 13.5px; color: var(--u-fg-2); line-height: 1.55; padding: 8px 12px; background: var(--u-bg-1); border-radius: 7px; border: 1px solid var(--u-hairline); white-space: pre-wrap; word-break: break-word; }
.u-block-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--u-fg-3); }
.u-block-cta { color: var(--u-lime); font-weight: 600; }
.u-block-updated { font-family: var(--u-mono); font-size: 11px; }

/* ── Log ────────────────────────────────────────────────── */
.u-log { list-style: none; padding: 0; margin: 0; }
.u-log li { padding: 10px 14px; background: var(--u-bg-2); border: 1px solid var(--u-hairline); border-radius: 8px; margin-bottom: 6px; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.u-log-time { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-3); width: 90px; flex-shrink: 0; }
.u-log-label { color: var(--u-fg-1); font-weight: 500; }
.u-log-site { color: var(--u-fg-3); font-size: 12px; margin-left: auto; }

/* ── Befüll-Banner (großer Call-to-Action wenn alle Blöcke leer) ── */
.u-bigfill { background: linear-gradient(135deg, rgba(182,255,60,.10), rgba(158,195,255,.06)); border: 1px solid rgba(182,255,60,.30); border-radius: var(--u-radius-lg); padding: 24px 26px; margin-bottom: 24px; }
.u-bigfill-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.u-bigfill-icon { font-size: 32px; flex-shrink: 0; }
.u-bigfill-head strong { font-size: 18px; color: var(--u-fg-1); }
.u-bigfill-head p { margin: 4px 0 0; color: var(--u-fg-2); font-size: 14px; }
.u-bigfill-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.u-bigfill-opt { background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.u-bigfill-opt-head { font-weight: 700; font-size: 14px; color: var(--u-lime); }
.u-bigfill-opt-sub { color: var(--u-fg-2); font-size: 12.5px; line-height: 1.5; flex: 1; }
.u-bigfill-opt .u-btn { margin: 4px 0 0; padding: 10px 16px; font-size: 13px; width: 100%; }

/* ── Locale-Indikatoren ─────────────────────────────────── */
.u-loc-pill { display: inline-block; padding: 2px 9px; background: var(--u-surface); border: 1px solid var(--u-hairline); border-radius: 99px; font-size: 11px; font-family: var(--u-mono); margin-left: 4px; }
.u-loc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: rgba(182,255,60,.12); color: var(--u-lime); font-family: var(--u-mono); font-weight: 700; font-size: 11px; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; }
.u-block-locale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 4px; }
.u-block-locale { background: var(--u-bg-1); border: 1px solid var(--u-hairline); border-radius: 8px; padding: 10px 12px; }
.u-block-locale.u-block-locale-empty { border-style: dashed; }
.u-block-locale-label { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-fg-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; font-weight: 700; }
.u-block-locale .u-block-content { padding: 0; background: transparent; border: none; font-size: 12.5px; }

/* ── Edit-Grid (Multi-Locale) ──────────────────────────── */
.u-edit-grid { display: grid; gap: 16px; }
.u-edit-grid-1 { grid-template-columns: 1fr; }
.u-edit-grid-2 { grid-template-columns: 1fr 1fr; }
.u-edit-grid-3 { grid-template-columns: repeat(3, 1fr); }
.u-edit-grid-4, .u-edit-grid-5, .u-edit-grid-6, .u-edit-grid-7, .u-edit-grid-8, .u-edit-grid-9, .u-edit-grid-10, .u-edit-grid-11 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .u-edit-grid { grid-template-columns: 1fr !important; } }

.u-edit-col { padding: 16px 18px; }
.u-edit-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.u-edit-col-sub { font-size: 11.5px; color: var(--u-fg-3); }
.u-llm-card-inline { padding: 10px 12px; margin-top: 10px; }
.u-llm-card-inline .u-llm-body { gap: 6px; }
.u-llm-card-inline input.u-input { font-size: 13px; padding: 8px 10px; }
.u-llm-card-inline .u-llm-btn { padding: 8px 12px; font-size: 13px; min-width: 40px; }
.u-version-mini > summary { font-family: var(--u-mono); font-size: 11px; color: var(--u-fg-3); cursor: pointer; padding: 6px 0; margin-top: 8px; }
.u-version-mini .u-version-list li { padding: 6px 10px; font-size: 11.5px; }
.u-version-mini .u-version-btn { padding: 3px 8px; font-size: 11px; }

/* ── Edit-Maske ─────────────────────────────────────────── */
.u-edit-card { background: var(--u-bg-2); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 22px 24px; margin-bottom: 16px; }
.u-edit-card .u-label { margin-bottom: 4px; }
.u-content-field { font-size: 15.5px; padding: 12px 14px; line-height: 1.6; }
.u-char-counter { text-align: right; margin-top: 8px; font-size: 11px; color: var(--u-fg-3); font-family: var(--u-mono); }

/* ── KI-Helfer ──────────────────────────────────────────── */
.u-llm-card { background: linear-gradient(135deg, rgba(182,255,60,.05), rgba(158,195,255,.05)); border: 1px solid rgba(182,255,60,.20); border-radius: var(--u-radius); padding: 16px 18px; margin-bottom: 16px; }
.u-llm-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.u-llm-icon { font-size: 16px; }
.u-llm-head strong { color: var(--u-lime); font-size: 14px; }
.u-llm-sub { color: var(--u-fg-3); font-size: 11.5px; }
.u-llm-body { display: flex; gap: 8px; flex-wrap: wrap; }
.u-llm-body input.u-input { flex: 1; min-width: 220px; margin-top: 0; }
.u-llm-body .u-btn { margin: 0; padding: 12px 16px; flex-shrink: 0; }
.u-llm-status { font-size: 12px; margin-top: 10px; min-height: 1.2em; }
.u-llm-status.u-llm-ok { color: var(--u-lime); }
.u-llm-status.u-llm-err { color: var(--u-mag); }

/* ── Action-Bar ─────────────────────────────────────────── */
.u-edit-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.u-btn-narrow { width: auto; min-width: 160px; margin-top: 0; }
.u-edit-actions .u-btn { margin-top: 0; }

/* ── Version-Liste ──────────────────────────────────────── */
.u-version-list { list-style: none; padding: 0; margin: 0; }
.u-version-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--u-bg-2); border: 1px solid var(--u-hairline); border-radius: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.u-version-nr { font-family: var(--u-mono); font-weight: 700; color: var(--u-lime); font-size: 12.5px; flex-shrink: 0; min-width: 36px; }
.u-version-time { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-3); flex-shrink: 0; }
.u-version-preview { color: var(--u-fg-2); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-version-btn { background: transparent; border: 1px solid var(--u-border); color: var(--u-fg-2); padding: 5px 12px; border-radius: 6px; font-size: 11.5px; cursor: pointer; font-family: var(--u-sans); transition: .15s; }
.u-version-btn:hover { color: var(--u-lime); border-color: var(--u-lime); }

/* ── Tabs ───────────────────────────────────────────────── */
/* ── Layout: Sidebar + Content ─────────────────────────────── */
.u-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-bottom: 48px;
}
.u-layout.u-layout-admin-panel {
  grid-template-columns: 280px minmax(0, 1fr) 288px;
  gap: 32px;
}
.u-sidebar {
  position: sticky;
  top: 76px;
  align-self: start;
  background: var(--u-bg-2);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-radius-lg);
  padding: 12px 8px 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: width .25s ease;
}
.u-sidebar.collapsed { width: 56px; padding-left: 4px; padding-right: 4px; }
.u-sidebar.collapsed .u-side-group-label,
.u-sidebar.collapsed .u-side-item-label,
.u-sidebar.collapsed .u-side-group-icon,
.u-sidebar.collapsed .u-side-item-flags { display: none; }
.u-sidebar.collapsed .u-side-item { justify-content: center; padding: 8px; }

.u-sidebar-collapse {
  position: absolute; top: 8px; right: -12px;
  width: 24px; height: 24px;
  background: var(--u-surface); color: var(--u-fg-2);
  border: 1px solid var(--u-hairline);
  border-radius: 50%;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; font-weight: 700;
  z-index: 2;
  transition: .15s;
}
.u-sidebar-collapse:hover { background: var(--u-lime-soft); color: var(--u-lime); border-color: var(--u-lime); }
.u-sidebar-icon-collapsed { display: none; }
.u-sidebar.collapsed .u-sidebar-icon-open { display: none; }
.u-sidebar.collapsed .u-sidebar-icon-collapsed { display: inline; }

/* ── Admin-Debug-Panel (rechts, nur Admins) ─────────────────────────────── */
.u-admin-panel {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--u-bg-2);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-radius-lg);
  font-size: 12px;
  color: var(--u-fg-2);
}
.u-admp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px;
  border-bottom: 1px solid var(--u-hairline);
  font-size: 11px; font-weight: 600; color: var(--u-fg-2);
  position: sticky; top: 0; background: var(--u-bg-2); z-index: 1;
}
.u-admp-refresh {
  background: none; border: none; cursor: pointer; color: var(--u-fg-3);
  font-size: 13px; padding: 2px 6px; border-radius: 4px; line-height: 1;
  transition: color .15s;
}
.u-admp-refresh:hover { color: var(--u-lime); }
.u-admp-section {
  padding: 9px 13px;
  border-bottom: 1px solid var(--u-hairline);
}
.u-admp-section-head {
  font-size: 10px; font-weight: 600; color: var(--u-fg-3);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px;
}
.u-admp-kv {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; margin-bottom: 3px;
}
.u-admp-k { color: var(--u-fg-3); flex-shrink: 0; min-width: 52px; }
.u-admp-v { color: var(--u-fg-2); font-family: var(--u-mono); font-size: 10.5px; word-break: break-all; }
.u-admp-log-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.u-admp-log-row:last-child { border-bottom: none; }
.u-admp-log-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.u-admp-log-ts { color: var(--u-fg-3); font-size: 10px; flex-shrink: 0; }
.u-admp-log-act { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-fg-2); }
.u-admp-log-detail {
  font-size: 10px; color: var(--u-fg-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.u-admp-empty { padding: 10px 0; color: var(--u-fg-3); font-size: 11px; font-style: italic; }
.u-admp-loading { padding: 10px 0; color: var(--u-fg-3); font-size: 11px; }
@media (max-width: 1280px) {
  .u-layout.u-layout-admin-panel { grid-template-columns: 280px minmax(0,1fr); }
  .u-admin-panel { display: none; }
}

/* Sidebar-Gruppen — Akkordeon-Modus */
.u-side-group { padding: 4px 0 8px; transition: padding .18s ease; }
.u-side-group + .u-side-group { border-top: 1px solid var(--u-hairline); margin-top: 6px; padding-top: 14px; }
.u-side-group.is-collapsed { padding-bottom: 4px; }
.u-side-group.is-collapsed + .u-side-group { padding-top: 10px; }

.u-side-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--u-fg-3);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.u-side-group-head:hover { background: rgba(255,255,255,.04); color: var(--u-fg-2); }
.u-side-group-head:focus-visible { outline: 1px solid var(--u-lime); outline-offset: 2px; }

.u-side-group-icon  { font-size: 13px; opacity: .9; flex-shrink: 0; }
.u-side-group-label { flex: 1; }
.u-side-group-count {
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.06); color: var(--u-fg-3);
  padding: 1px 6px; border-radius: 8px;
  opacity: 0; transition: opacity .18s ease;
}
.u-side-group.is-collapsed .u-side-group-count { opacity: 1; }
.u-side-group-chevron {
  font-size: 11px; opacity: .55;
  transition: transform .18s ease, opacity .15s ease;
}
.u-side-group.is-collapsed .u-side-group-chevron { transform: rotate(-90deg); }
.u-side-group-head:hover .u-side-group-chevron { opacity: 1; }

/* Aktive Gruppe — Akzent-Border in Gruppen-Farbe */
.u-side-group.is-open { position: relative; }
.u-side-group.is-open::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: currentColor; opacity: .35; border-radius: 2px;
}
.u-side-group[data-group="technik"].is-open::before    { background: #9ec3ff; }
.u-side-group[data-group="monitoring"].is-open::before { background: #ff7ed1; }
.u-side-group[data-group="inhalt"].is-open::before     { background: var(--u-lime); }
.u-side-group[data-group="socials"].is-open::before    { background: #ff9eff; }

.u-side-group[data-group="technik"]    .u-side-group-label { color: #9ec3ff; }
.u-side-group[data-group="monitoring"] .u-side-group-label { color: #ff7ed1; }
.u-side-group[data-group="inhalt"]     .u-side-group-label { color: var(--u-lime); }
.u-side-group[data-group="socials"]    .u-side-group-label { color: #ff9eff; }

/* Items — collapse / expand */
.u-side-items {
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
  max-height: 1500px;
  transition: max-height .22s ease, opacity .15s ease, margin-top .18s ease;
}
.u-side-group.is-collapsed .u-side-items {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Sidebar-Items (statt horizontale Tabs) */
.u-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 500;
  color: var(--u-fg-2);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
}
.u-side-item:hover {
  background: rgba(255,255,255,.04);
  color: var(--u-fg-1);
}
.u-side-item.u-tab-active {
  background: var(--u-lime-soft);
  color: var(--u-fg-1);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--u-lime);
}
.u-side-group[data-group="technik"]    .u-side-item.u-tab-active { background: rgba(158,195,255,.12); box-shadow: inset 3px 0 0 #9ec3ff; }
.u-side-group[data-group="monitoring"] .u-side-item.u-tab-active { background: rgba(255,46,184,.12);  box-shadow: inset 3px 0 0 var(--u-mag); }
.u-side-item-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.u-side-item-label { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.u-side-item-flags { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.u-side-flag {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 4px;
  text-transform: uppercase;
}
.u-side-flag-lock { background: rgba(244,196,48,.18); color: #f4c430; padding: 2px 4px; }
.u-side-flag-tier { padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px; }
.u-side-flag-tier-2 { background: rgba(158,195,255,.18); color: #9ec3ff; border: 1px solid rgba(158,195,255,.35); }
.u-side-flag-tier-3 { background: linear-gradient(135deg, rgba(244,196,48,.22), rgba(255,179,64,.18)); color: #f4c430; border: 1px solid rgba(244,196,48,.5); }
.u-side-flag-soon { background: #ffb340; color: #000; }
.u-side-flag-beta { background: linear-gradient(135deg, var(--u-mag), #7c9cff); color: #fff; font-style: italic; }

/* Locked Item — gedimmt aber sichtbar */
.u-side-item.u-side-locked {
  color: var(--u-fg-3);
  opacity: .75;
}
.u-side-item.u-side-locked:hover { opacity: 1; color: var(--u-fg-2); }
.u-side-item.u-side-soon { opacity: .55; cursor: not-allowed; }

/* ── Locked Tab-Panel: Content sichtbar + CTA-Sidebar rechts ─────────── */
.u-tab-panel.u-panel-locked {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
/* Banner spannt sich über die ganze Breite */
.u-tab-panel.u-panel-locked > .u-lock-banner { grid-column: 1 / -1; }
/* CTA-Aside in der rechten Spalte */
.u-tab-panel.u-panel-locked > .u-lock-cta-panel { grid-column: 2; grid-row: 2 / span 1000; }
/* Alle anderen Kinder (=Content) in der linken Spalte */
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) {
  grid-column: 1;
  opacity: .7;
  filter: saturate(.6);
}
/* Interaktive Elemente im Content komplett deaktivieren */
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) button,
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) input,
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) select,
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) textarea,
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) a {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) form { position: relative; }
.u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) form::after {
  content: ''; position: absolute; inset: 0; cursor: not-allowed;
}
/* Admin/Impersonator: View-As ist nur visuelle Vorschau — Bedienung bleibt aktiv. */
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) {
  opacity: 1;
  filter: none;
}
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) button,
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) input,
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) select,
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) textarea,
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) a {
  pointer-events: auto !important;
  cursor: pointer !important;
}
body.u-body-admin .u-tab-panel.u-panel-locked > *:not(.u-lock-banner):not(.u-lock-cta-panel) form::after {
  display: none;
}

/* Banner oben */
.u-lock-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(244,196,48,.12), rgba(255,46,184,.08));
  border: 1px solid rgba(244,196,48,.35);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--u-fg-1);
  animation: u-lock-slide .3s ease;
}
@keyframes u-lock-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.u-lock-banner-icon { font-size: 20px; }
.u-lock-banner-text { flex: 1; min-width: 200px; }
.u-lock-banner-cta {
  margin-left: auto;
  background: var(--u-lime); color: #0a0720;
  padding: 8px 16px; border-radius: 8px;
  font-weight: 700; font-size: 12.5px;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.u-lock-banner-cta:hover { background: #cef660; box-shadow: 0 6px 20px rgba(182,255,60,.4); }

/* CTA-Aside rechts (sticky) */
.u-lock-cta-panel { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow-y: auto; }
.u-lock-cta-card {
  background: linear-gradient(160deg, var(--u-surface) 0%, var(--u-surface-2) 100%);
  border: 1px solid rgba(244,196,48,.4);
  border-radius: var(--u-radius-lg);
  padding: 28px 26px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 50px rgba(244,196,48,.12);
  animation: u-lock-pop .4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes u-lock-pop {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.u-lock-icon { font-size: 44px; filter: drop-shadow(0 0 18px rgba(244,196,48,.5)); margin-bottom: 4px; }
.u-lock-tier {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em;
  background: linear-gradient(135deg, #f4c430, #ffb340); color: #0a0720;
  padding: 4px 10px; border-radius: 10px; margin-bottom: 10px;
}
.u-lock-title { font-size: 18px; color: var(--u-fg-1); margin: 0 0 8px; font-weight: 700; line-height: 1.3; }
.u-lock-msg { color: var(--u-fg-2); font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; }
.u-lock-tease { color: var(--u-fg-3); font-size: 11.5px; line-height: 1.55; margin: 0 0 18px; font-style: italic; }
.u-lock-actions { display: flex; flex-direction: column; gap: 8px; }
.u-lock-actions .u-btn { width: 100%; justify-content: center; padding: 10px 16px; text-decoration: none; }
.u-lock-cta {
  background: linear-gradient(135deg, var(--u-lime), #8de028) !important;
  color: #0a0720 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(182,255,60,.3);
}
.u-lock-cta:hover { box-shadow: 0 12px 32px rgba(182,255,60,.45); transform: translateY(-1px); }

/* Responsive: rechte CTA-Spalte wird zu Block-Element unter dem Content */
@media (max-width: 1100px) {
  .u-tab-panel.u-panel-locked { grid-template-columns: 1fr; }
  .u-tab-panel.u-panel-locked > .u-lock-cta-panel { grid-column: 1; grid-row: auto; position: relative; top: 0; }
}

/* Content-Bereich */
.u-content {
  min-width: 0; /* fix für grid overflow */
}

/* Responsive: Sidebar wird oben zur horizontalen Bar */
@media (max-width: 900px) {
  .u-layout, .u-layout.u-layout-admin-panel { grid-template-columns: 1fr; gap: 14px; }
  .u-sidebar {
    position: relative; top: 0; max-height: none;
    flex-direction: row; flex-wrap: wrap;
    padding: 8px 10px;
  }
  .u-sidebar.collapsed { display: none; }
  .u-side-group { padding: 0; }
  .u-side-group + .u-side-group { border-top: 0; padding-top: 0; margin-top: 0; }
  .u-side-group-head { padding: 2px 8px; }
  .u-side-items { flex-direction: row; flex-wrap: wrap; }
  .u-side-item { padding: 5px 10px; font-size: 12px; }
  .u-sidebar-collapse { display: none; }
}

/* Legacy: alte Tabs-Klassen behalten als Fallback (falls noch irgendwo benutzt) */
.u-tabs-wrap { margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; }
.u-tabgroup {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--u-hairline);
  border-radius: 14px;
  position: relative;
}
.u-tabgroup::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--u-lime);
}
.u-tabgroup[data-group="technik"]::before    { background: linear-gradient(180deg, #9ec3ff, #7c9cff); }
.u-tabgroup[data-group="monitoring"]::before { background: linear-gradient(180deg, #ff7ed1, var(--u-mag)); }
.u-tabgroup-label {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--u-fg-1); min-width: 130px; flex-shrink: 0;
  padding: 0 4px 0 6px; display: flex; align-items: center; gap: 8px;
}
.u-tabgroup-label::before {
  content: var(--group-icon, '');
  font-size: 14px;
}
.u-tabgroup[data-group="inhalt"]     .u-tabgroup-label::before { content: '🎨'; }
.u-tabgroup[data-group="technik"]    .u-tabgroup-label::before { content: '🚀'; }
.u-tabgroup[data-group="monitoring"] .u-tabgroup-label::before { content: '📊'; }
.u-tabs { display: flex; gap: 4px; border-bottom: 0; margin: 0; flex: 1; flex-wrap: wrap; }
.u-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--u-fg-2);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  position: relative;
  background: transparent;
}
.u-tab:hover { color: var(--u-fg-1); background: rgba(255,255,255,.05); border-color: var(--u-hairline); }
.u-tab.u-tab-active {
  color: var(--u-fg-1);
  background: rgba(182,255,60,.12);
  border-color: rgba(182,255,60,.45);
  box-shadow: 0 0 0 1px rgba(182,255,60,.15), 0 8px 24px -10px rgba(182,255,60,.35);
}
/* Aktiver Tab im Performance-Bereich → blau, in Monitoring → magenta */
.u-tabgroup[data-group="technik"]    .u-tab.u-tab-active { background: rgba(158,195,255,.14); border-color: rgba(158,195,255,.5); box-shadow: 0 0 0 1px rgba(158,195,255,.15), 0 8px 24px -10px rgba(158,195,255,.45); }
.u-tabgroup[data-group="monitoring"] .u-tab.u-tab-active { background: rgba(255,46,184,.12); border-color: rgba(255,126,209,.45); box-shadow: 0 0 0 1px rgba(255,46,184,.15), 0 8px 24px -10px rgba(255,46,184,.4); }
.u-tab-soon { position: absolute; top: -9px; right: 2px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; background: #ffb340; color: #000; padding: 2px 6px; border-radius: 3px; transform: rotate(-10deg); transform-origin: center; white-space: nowrap; line-height: 1.6; box-shadow: 0 1px 5px rgba(0,0,0,.35); pointer-events: none; }
.u-tab-beta { position: absolute; top: -9px; right: 2px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: linear-gradient(135deg, #ff2eb8, #7c9cff); color: #fff; padding: 2px 6px; border-radius: 3px; transform: rotate(-8deg); transform-origin: center; white-space: nowrap; line-height: 1.6; box-shadow: 0 1px 6px rgba(255,46,184,.45); pointer-events: none; }
.u-tab-panel { display: none; }
.u-tab-panel.u-tab-panel-active { display: block; }
.u-tab-soon-panel { text-align: center; padding: 60px 20px; border: 1px dashed var(--u-hairline); border-radius: var(--u-radius-lg); color: var(--u-fg-3); }
.u-tab-soon-panel h3 { font-size: 18px; color: var(--u-fg-2); margin-bottom: 8px; }
.u-tab-soon-panel p { font-size: 14px; }

/* ── Edited badge ────────────────────────────────────────── */
.u-block-row-edited { border-color: var(--u-mag) !important; border-left: 3px solid var(--u-mag); }
.u-edited-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; background: rgba(255,46,184,.15); color: var(--u-mag); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }

/* ── Section Cards ───────────────────────────────────────── */
.u-section-card {
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  margin-bottom: 10px;
  background: var(--u-surface);
  overflow: hidden;
}
.u-section-card.u-sec-complete { border-left: 3px solid var(--u-lime); }
.u-section-card.u-sec-partial  { border-left: 3px solid #f4a62a; }
.u-section-card.u-sec-empty    { border-left: 3px solid rgba(255,46,184,.55); }

.u-section-card summary,
.u-section-card summary::-webkit-details-marker { display: none; }
.u-section-summary {
  display: flex !important;
  list-style: none;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.u-section-summary:hover { background: rgba(255,255,255,.04); }

.u-sec-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.u-sec-name { font-size: 13px; font-weight: 700; color: var(--u-fg-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.u-sec-progress {
  width: 72px;
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.u-sec-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--u-fg-3);
  transition: width .35s ease;
}
.u-sec-complete .u-sec-progress-bar { background: var(--u-lime); }
.u-sec-partial  .u-sec-progress-bar { background: #f4a62a; }

.u-sec-stat {
  font-size: 11px;
  font-family: var(--u-mono);
  color: var(--u-fg-3);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}
.u-sec-complete .u-sec-stat { color: var(--u-lime); }
.u-sec-partial  .u-sec-stat { color: #f4a62a; }
.u-sec-empty    .u-sec-stat { color: rgba(255,46,184,.7); }

.u-sec-chevron {
  font-size: 18px;
  font-weight: 300;
  color: var(--u-fg-3);
  flex-shrink: 0;
  transition: transform .2s ease;
  display: inline-block;
  line-height: 1;
}
.u-section-card[open] .u-sec-chevron { transform: rotate(90deg); }

.u-section-body {
  border-top: 1px solid var(--u-hairline);
  padding: 6px 0 2px;
}

/* ── Search Component (reusable, modern) ──────────────────── */
.u-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid var(--u-hairline);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  position: relative;
  min-height: 44px;
}
.u-search:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.13);
}
.u-search:focus-within {
  border-color: rgba(182,255,60,.45);
  background: linear-gradient(180deg, rgba(182,255,60,.04), rgba(182,255,60,.015));
  box-shadow: 0 0 0 3px rgba(182,255,60,.08), 0 1px 4px rgba(0,0,0,.18);
}
.u-search-icon {
  font-size: 13px;
  color: var(--u-fg-3);
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  transition: color .18s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.u-search:focus-within .u-search-icon {
  color: var(--u-lime);
  transform: scale(1.08);
}
.u-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--u-fg-1);
  font-size: 13.5px;
  font-family: var(--u-sans);
  padding: 11px 0;
  letter-spacing: .005em;
}
.u-search-input::placeholder {
  color: var(--u-fg-3);
  font-weight: 400;
  transition: color .18s;
}
.u-search:focus-within .u-search-input::placeholder { color: var(--u-fg-2); }
.u-search-input::-webkit-search-cancel-button,
.u-search-input::-webkit-search-decoration { display: none; }
.u-search-input[type="search"] { -webkit-appearance: none; }
.u-search-count {
  flex-shrink: 0;
  font-size: 10.5px;
  font-family: var(--u-mono);
  color: var(--u-fg-3);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  background: transparent;
  transition: color .15s, background .15s, opacity .15s;
  letter-spacing: .02em;
}
.u-search-count:empty { display: none; }
.u-search:focus-within .u-search-count:not(:empty),
.u-search.is-active .u-search-count:not(:empty) {
  color: var(--u-lime);
  background: rgba(182,255,60,.08);
}
.u-search-clear {
  display: none;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  color: var(--u-fg-3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .14s cubic-bezier(.34,1.56,.64,1);
  margin-right: 4px;
}
.u-search-clear:hover {
  background: rgba(255,46,184,.18);
  color: var(--u-mag);
  transform: scale(1.12) rotate(90deg);
}
.u-search-clear.is-visible,
.u-search-clear.visible { display: inline-flex; }
.u-search-kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  font-family: var(--u-mono);
  font-size: 10px;
  color: var(--u-fg-3);
  line-height: 1.4;
  transition: opacity .18s;
  margin-right: 8px;
  user-select: none;
}
.u-search:focus-within .u-search-kbd,
.u-search.is-active .u-search-kbd { opacity: 0; pointer-events: none; }

/* Legacy support — alte Markup-Variante */
.u-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 0 14px;
  transition: border-color .15s;
}
.u-search-wrap:focus-within { border-color: var(--u-lime); }
mark.u-hl {
  background: rgba(182,255,60,.3);
  color: var(--u-lime);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Save Button States ─────────────────────────────────── */
.u-save-wrap { display: flex; align-items: center; gap: 12px; }
.u-save-status { font-size: 13px; }
.u-save-ok   { color: var(--u-lime); }
.u-save-err  { color: var(--u-mag); }
.u-save-noop { color: var(--u-fg-3); }
.u-btn-saved { background: var(--u-lime) !important; color: #000 !important; border-color: var(--u-lime) !important; transition: background .2s; }
.u-btn-error { background: var(--u-mag) !important; color: #fff !important; border-color: var(--u-mag) !important; }
@keyframes spin { to { transform: rotate(360deg); } }
.u-save-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }

/* ── Steps Bar ──────────────────────────────────────────── */
.u-steps-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; padding: 18px 20px; background: rgba(182,255,60,.05); border: 1px solid rgba(182,255,60,.18); border-radius: var(--u-radius); }
.u-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 160px; }

/* ───── Header-Bar: Auto-Import-Karte LINKS + Publish-CTA RECHTS ───── */
.u-headerbar { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; margin-bottom: 22px; align-items: stretch; }
@media (max-width: 760px) { .u-headerbar { grid-template-columns: 1fr; } }

/* Auto-Import-Karte */
.u-import-card { padding: 14px 16px; border-radius: var(--u-radius); display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.45; }
.u-import-card-ok    { background: rgba(125,232,151,.06); border: 1px solid rgba(125,232,151,.28); }
.u-import-card-err   { background: rgba(255,179,64,.06);  border: 1px solid rgba(255,179,64,.28); }
.u-import-card-empty { background: rgba(255,255,255,.025); border: 1px dashed rgba(255,255,255,.18); }
.u-import-card-head { display: flex; align-items: center; gap: 8px; }
.u-import-card-icon { font-size: 18px; line-height: 1; }
.u-import-card-ok    .u-import-card-icon { color: #7de897; }
.u-import-card-err   .u-import-card-icon { color: #ffb340; }
.u-import-card-empty .u-import-card-icon { color: var(--u-fg-3); }
.u-import-card-title { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; flex: 1; }
.u-import-card-ok    .u-import-card-title { color: #7de897; }
.u-import-card-err   .u-import-card-title { color: #ffb340; }
.u-import-card-empty .u-import-card-title { color: var(--u-fg-3); }
.u-import-card-rescan { margin: 0; }
.u-import-card-rescan button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: var(--u-fg-3); width: 26px; height: 26px; line-height: 1; font-size: 13px; cursor: pointer; padding: 0; transition: .15s; }
.u-import-card-rescan button:hover { background: rgba(125,232,151,.1); border-color: rgba(125,232,151,.4); color: #7de897; transform: rotate(45deg); }
.u-import-card-stat { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 2px; }
.u-import-card-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--u-fg-1); font-family: var(--u-mono); }
.u-import-card-lab { font-size: 11.5px; color: var(--u-fg-3); line-height: 1.4; }
.u-import-card-lab code { font-size: 11px; color: var(--u-fg-2); background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; }
.u-import-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.u-import-card-locales { display: inline-flex; gap: 4px; }
.u-import-card-locale { padding: 2px 7px; background: rgba(125,232,151,.14); border-radius: 4px; color: #7de897; font-weight: 700; font-size: 10px; letter-spacing: .04em; font-family: var(--u-mono); }
.u-import-card-format { padding: 2px 7px; background: rgba(255,255,255,.06); border-radius: 4px; font-size: 10px; color: var(--u-fg-3); font-family: var(--u-mono); }
.u-import-card-new { color: #7de897; font-weight: 700; font-size: 11px; margin-left: auto; }
.u-import-card-err-msg { font-size: 12px; color: var(--u-fg-2); padding: 2px 0; }

/* Publish-CTA (rechts) */
.u-publish-wrap { display: flex; align-items: center; justify-content: flex-end; }
.u-publish-form { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 100%; max-width: 360px; }
.u-publish-btn { padding: 14px 22px; font-size: 14px; font-weight: 700; letter-spacing: .02em; width: 100%; justify-content: center; }
.u-publish-hint { font-size: 11px; color: var(--u-fg-3); font-family: var(--u-mono); }

/* INAKTIV (keine Änderungen) — dezent neutral */
.u-publish-btn:not(.u-publish-btn-active) {
  background: rgba(255,255,255,.04);
  color: var(--u-fg-3);
  border: 1px solid rgba(255,255,255,.12);
}
.u-publish-btn:not(.u-publish-btn-active):hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  color: var(--u-fg-2);
}

/* AKTIV (es gibt Änderungen) — lime + pulsierend */
.u-publish-btn-active {
  background: linear-gradient(135deg, #b6ff3c 0%, #d4ff7a 100%);
  color: #0a0720;
  border: 1px solid #b6ff3c;
  box-shadow: 0 4px 14px rgba(182,255,60,.32), 0 0 0 0 rgba(182,255,60,.6);
  animation: u-pulse-lime 2s ease-in-out infinite;
}
.u-publish-btn-active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(182,255,60,.42), 0 0 0 6px rgba(182,255,60,.12);
  animation: none;
}
@keyframes u-pulse-lime {
  0%, 100% { box-shadow: 0 4px 14px rgba(182,255,60,.32), 0 0 0 0 rgba(182,255,60,.6); }
  50%      { box-shadow: 0 4px 14px rgba(182,255,60,.42), 0 0 0 10px rgba(182,255,60,0); }
}

/* ───── Prominente Suchbox ───── */
.u-search-hero { margin: 4px 0 22px; }
.u-search-wrap-big {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 18px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 14px;
  transition: .15s;
}
.u-search-wrap-big:focus-within {
  background: rgba(78,195,216,.06);
  border-color: rgba(78,195,216,.55);
  box-shadow: 0 0 0 4px rgba(78,195,216,.1);
}
.u-search-icon-svg { color: var(--u-fg-3); flex-shrink: 0; }
.u-search-wrap-big:focus-within .u-search-icon-svg { color: #4ec3d8; }
.u-search-input-big {
  flex: 1; padding: 16px 0; font-size: 16px; font-weight: 500;
  background: transparent; border: none; outline: none; color: var(--u-fg-1);
  font-family: inherit;
}
.u-search-input-big::placeholder { color: var(--u-fg-3); font-weight: 400; }
.u-search-input-big::-webkit-search-cancel-button,
.u-search-input-big::-webkit-search-decoration { display: none; }
.u-search-clear {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: rgba(255,255,255,.06); color: var(--u-fg-3);
  border-radius: 50%; cursor: pointer; font-size: 12px; padding: 0;
  transition: .15s;
}
.u-search-clear:hover { background: rgba(255,46,184,.18); color: #ff2eb8; }
.u-search-clear.is-visible { display: inline-flex; }
.u-search-wrap-big .u-search-count {
  font-size: 11px; color: var(--u-fg-3); font-family: var(--u-mono); white-space: nowrap;
  margin-right: 4px;
}
.u-search-hint { margin-top: 8px; font-size: 11.5px; color: var(--u-fg-3); padding-left: 4px; }
.u-search-hint kbd { display: inline-block; padding: 1px 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; font-family: var(--u-mono); font-size: 10.5px; line-height: 1.5; color: var(--u-fg-2); margin: 0 2px; }

.u-step form, .u-step a { width: 100%; }
.u-step-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--u-lime); color: #000; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.u-step-badge-xl { width: 64px; height: 64px; font-size: 34px; box-shadow: 0 0 0 6px rgba(182,255,60,.12); }
.u-step-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--u-fg-3); }
.u-step-label-xl { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--u-lime); }
.u-step-anpassen { justify-content: center; gap: 10px; }
.u-btn-step { width: 100%; text-align: center; justify-content: center; font-size: 13px; padding: 10px 14px; }
.u-step-arrow { font-size: 18px; color: var(--u-fg-3); flex-shrink: 0; align-self: flex-end; padding-bottom: 10px; }
.u-steps-path { font-size: 11px; color: var(--u-fg-3); font-family: var(--u-mono); margin-bottom: 20px; padding-left: 4px; }

/* Texte-Files Overview (gefundene texte-*.json) */
.u-texte-files { background: rgba(158,195,255,.04); border: 1px solid rgba(158,195,255,.15); border-radius: var(--u-radius); padding: 12px 16px; margin-bottom: 18px; }
.u-texte-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.u-texte-files-title { font-size: 12px; font-weight: 600; color: var(--u-fg-2); }
.u-texte-files-refresh { font-size: 11px; color: var(--u-fg-3); text-decoration: none; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--u-hairline); transition: .15s; }
.u-texte-files-refresh:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); }
.u-texte-files-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.u-texte-file { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--u-hairline); border-radius: 8px; font-size: 12px; }
.u-texte-file-cfg { background: rgba(182,255,60,.08); border-color: rgba(182,255,60,.3); }
.u-texte-file-name { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-1); }
.u-texte-file-locale { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--u-blue); background: rgba(158,195,255,.12); padding: 1px 6px; border-radius: 4px; }
.u-texte-file-cfg .u-texte-file-locale { color: var(--u-lime); background: rgba(182,255,60,.15); }
.u-texte-file-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #000; background: var(--u-lime); padding: 1px 6px; border-radius: 4px; }
.u-texte-files-count { font-size: 10.5px; color: var(--u-fg-3); margin-top: 8px; }
.u-texte-files-empty { font-size: 12px; color: var(--u-fg-3); padding: 6px 0; }
.u-texte-files-err { color: var(--u-mag); }
.u-texte-files-path { font-size: 10.5px; color: var(--u-fg-3); margin: 4px 0 10px; }
.u-texte-files-path code { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-blue); }
.u-texte-file-stray { background: rgba(255,46,184,.06); border-color: rgba(255,46,184,.35); }
.u-texte-file-stray .u-texte-file-locale { color: var(--u-mag); background: rgba(255,46,184,.12); }
.u-texte-file-tag-ok { background: rgba(100,220,100,.18); color: #7de897; }
.u-texte-file-tag-stray { background: rgba(255,46,184,.18); color: var(--u-mag); }
.u-texte-file-del { background: none; border: 1px solid rgba(255,46,184,.35); color: var(--u-mag); cursor: pointer; padding: 0 6px; font-size: 11px; line-height: 1.4; border-radius: 4px; margin-left: 2px; transition: .15s; }
.u-texte-file-del:hover { background: rgba(255,46,184,.18); color: #fff; border-color: var(--u-mag); }

/* ── Empty State ────────────────────────────────────────── */
.u-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--u-hairline); border-radius: var(--u-radius-lg); color: var(--u-fg-3); }
.u-empty h3 { color: var(--u-fg-2); font-size: 16px; }

@media (max-width: 640px) {
  .u-hdr-inner { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .u-site { padding-left: 0; border-left: none; }
  .u-user { margin-left: 0; }
  .u-main { padding: 24px 16px 40px; }
  h1 { font-size: 22px; }
}

/* ── Images Tab ─────────────────────────────────────────── */
.u-img-scan-bar { display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:12px 16px; background:var(--u-surface); border:1px solid var(--u-border); border-radius:var(--u-radius); flex-wrap:wrap; }
.u-img-filter-bar { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.u-img-filter { background:var(--u-surface); border:1px solid var(--u-border); border-radius:20px; color:var(--u-fg-3); font-size:12px; padding:5px 14px; cursor:pointer; transition:all .15s; }
.u-img-filter:hover { border-color:rgba(182,255,60,.3); color:var(--u-fg-2); }
.u-img-filter.u-img-filter-active { background:rgba(182,255,60,.1); border-color:rgba(182,255,60,.45); color:var(--u-lime); }
.u-img-filter-count { opacity:.7; }
.u-img-badge-unused { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.12); border-radius:4px; color:rgba(255,255,255,.55); font-size:9px; font-weight:600; padding:2px 6px; letter-spacing:.03em; text-transform:uppercase; }
.u-img-scan-info { font-size:12px; color:var(--u-fg-3); flex:1; }
.u-img-scan-info strong { color:var(--u-fg-2); }
.u-quota-wrap { display:flex; align-items:center; gap:12px; padding:12px 18px; background:rgba(182,255,60,.04); border:1px solid rgba(182,255,60,.15); border-radius:var(--u-radius); margin-bottom:24px; }
.u-quota-label { font-size:12px; color:var(--u-fg-2); white-space:nowrap; }
.u-quota-bar { flex:1; height:6px; background:var(--u-border); border-radius:3px; overflow:hidden; min-width:60px; }
.u-quota-fill { height:100%; background:var(--u-lime); border-radius:3px; transition:width .3s; }
.u-quota-fill.warn { background:#f4a62a; }
.u-quota-fill.full { background:var(--u-mag); }
.u-quota-count { font-size:11px; font-family:var(--u-mono); color:var(--u-fg-3); white-space:nowrap; }
.u-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.u-img-card { background:var(--u-surface); border:1px solid var(--u-border); border-radius:var(--u-radius); overflow:hidden; transition:border-color .15s; }
.u-img-card:hover { border-color:rgba(182,255,60,.35); }
.u-img-thumb-wrap { position:relative; width:100%; padding-top:56.25%; background:rgba(255,255,255,.03); overflow:hidden; cursor:zoom-in; }
.u-img-thumb-wrap:hover .u-img-zoom-hint { opacity:1; }
.u-img-zoom-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(0,0,0,.35); opacity:0; transition:opacity .15s; pointer-events:none; }
.u-img-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.u-img-thumb-wrap:hover .u-img-thumb { transform:scale(1.03); }
.u-img-thumb-err { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--u-fg-3); }
.u-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; backdrop-filter:blur(4px); }
.u-lightbox-img { max-width:min(100%,1200px); max-height:calc(100vh - 100px); object-fit:contain; border-radius:8px; cursor:default; box-shadow:0 12px 60px rgba(0,0,0,.7); display:block; }
.u-lightbox-caption { margin-top:14px; font-size:12px; color:rgba(255,255,255,.45); font-family:var(--u-mono); max-width:min(100%,1200px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-lightbox-path { margin-top:6px; font-size:11px; color:rgba(255,255,255,.28); font-family:var(--u-mono); max-width:min(100%,1200px); word-break:break-all; text-align:center; user-select:text; cursor:text; }
.u-lightbox-close { position:fixed; top:18px; right:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:50%; width:38px; height:38px; color:rgba(255,255,255,.7); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0; }
.u-lightbox-close:hover { background:rgba(255,255,255,.18); color:#fff; }
.u-img-body { padding:10px 12px 12px; }
.u-img-name { font-size:12px; font-weight:600; color:var(--u-fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.u-img-meta { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.u-img-meta-size { font-size:10.5px; font-family:var(--u-mono); color:var(--u-lime); opacity:.85; }
.u-img-meta-dim { font-size:10.5px; font-family:var(--u-mono); color:var(--u-fg-3); }
.u-img-meta-size + .u-img-meta-dim::before { content:'·'; margin-right:8px; color:var(--u-border); }
.u-img-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.u-img-act { flex:1; min-width:0; background:rgba(255,255,255,.04); border:1px solid var(--u-border); border-radius:6px; color:var(--u-fg-2); font-size:11px; padding:7px 4px; cursor:pointer; transition:background .15s,border-color .15s,color .15s; line-height:1.3; white-space:nowrap; }
.u-img-act:hover { background:rgba(255,255,255,.1); border-color:rgba(182,255,60,.35); color:var(--u-fg-1); }
.u-img-act-ai { flex-basis:100%; }
.u-img-replace-panel { display:none; margin-top:8px; padding-top:10px; border-top:1px solid var(--u-hairline); }
/* Swap-Modal */
.u-swap-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(3px); }
.u-swap-inner { background:var(--u-bg); border:1px solid var(--u-border); border-radius:14px; width:min(740px,100%); max-height:85vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.u-swap-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--u-border); flex-shrink:0; }
.u-swap-close { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:50%; width:30px; height:30px; color:var(--u-fg-2); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.u-swap-close:hover { background:rgba(255,255,255,.14); color:#fff; }
.u-swap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; padding:14px; overflow-y:auto; flex:1; }
.u-swap-item { background:var(--u-surface); border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; transition:border-color .12s,transform .12s; }
.u-swap-item:hover { border-color:rgba(182,255,60,.35); transform:scale(1.02); }
.u-swap-item.selected { border-color:var(--u-lime); box-shadow:0 0 0 2px rgba(182,255,60,.2); }
.u-swap-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.u-swap-item-name { font-size:10px; padding:4px 6px 5px; color:var(--u-fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-swap-footer { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--u-border); flex-shrink:0; background:rgba(0,0,0,.15); }
.u-img-replace-panel.open { display:block; }
.u-img-file-input { display:block; width:100%; font-size:11px; color:var(--u-fg-2); margin-bottom:8px; }
.u-img-file-input::file-selector-button { background:rgba(255,255,255,.06); border:1px solid var(--u-border); border-radius:4px; color:var(--u-fg-2); font-size:11px; padding:4px 10px; cursor:pointer; margin-right:8px; }
.u-img-status { font-size:11px; margin-top:6px; min-height:16px; }
.u-img-status.ok  { color:var(--u-lime); }
.u-img-status.err { color:var(--u-mag); }
.u-img-spinner { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:4px; }
/* KI-Bild Panel */
.u-img-scan-path { display:block; font-size:10.5px; font-family:var(--u-mono); color:var(--u-fg-3); margin-top:4px; word-break:break-all; }
.u-img-act-ai { border-color:rgba(182,255,60,.18) !important; }
.u-img-act-ai:hover { border-color:rgba(182,255,60,.5) !important; }
.u-img-act-analyze { border-color:rgba(124,156,255,.18) !important; }
.u-img-act-analyze:hover { border-color:rgba(124,156,255,.5) !important; }
.u-img-act-del { border-color:rgba(255,46,184,.25) !important; color:#ff8aa1 !important; margin-left:auto; }
.u-img-act-del:hover { background:rgba(255,46,184,.12) !important; border-color:rgba(255,46,184,.6) !important; color:#fff !important; }

/* Cache-Leeren-Status-Banner */
.u-img-clear-notice {
  display: flex; align-items: center; gap: 10px;
  background: rgba(244,196,48,.1);
  border: 1px solid rgba(244,196,48,.3);
  color: #f4c430;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  margin: 10px 0;
  animation: u-fade-in .2s ease;
}
@keyframes u-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Analyse-Panel */
.u-img-analyze-panel { margin-top:8px; padding-top:10px; border-top:1px solid var(--u-hairline); }
.u-img-analyze-result { font-size:11px; line-height:1.6; color:var(--u-fg-2); }
.u-img-analyze-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:3px 0; }
.u-img-analyze-label { color:var(--u-fg-3); white-space:nowrap; }
.u-img-analyze-val { font-family:'JetBrains Mono',monospace; font-size:10.5px; }
.u-img-savings-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-weight:600; font-size:11px; }
.u-img-savings-hi  { background:rgba(100,220,100,.15); color:#7de897; border:1px solid rgba(100,220,100,.3); }
.u-img-savings-mid { background:rgba(244,196,48,.1);   color:#f4c430; border:1px solid rgba(244,196,48,.3); }
.u-img-savings-lo  { background:rgba(255,255,255,.05); color:var(--u-fg-3); border:1px solid var(--u-border); }
.u-img-analyze-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.u-img-analyze-btn { flex:1; min-width:0; background:rgba(124,156,255,.08); border:1px solid rgba(124,156,255,.22); color:#7c9cff; border-radius:6px; font-size:11px; padding:6px 8px; cursor:pointer; transition:background .15s; white-space:nowrap; }
.u-img-analyze-btn:hover { background:rgba(124,156,255,.18); }
.u-img-analyze-btn:disabled { opacity:.4; cursor:default; }
.u-img-analyze-custom { margin-top:10px; padding-top:8px; border-top:1px dashed var(--u-hairline); }
.u-img-custom-w { font-family:var(--u-mono); font-size:12px; padding:5px 8px; border:1px solid var(--u-hairline); background:rgba(255,255,255,.04); color:var(--u-fg-1); border-radius:5px; outline:none; transition:border-color .15s; }
.u-img-custom-w:focus { border-color:rgba(124,156,255,.6); }
.u-img-custom-btn { padding:5px 10px !important; font-size:11px !important; }
.u-img-rewrite-btn { background:rgba(244,196,48,.08) !important; border-color:rgba(244,196,48,.3) !important; color:#f4c430 !important; }
.u-img-rewrite-btn:hover { background:rgba(244,196,48,.18) !important; }
.u-img-rewrite-status { font-size:11px; line-height:1.4; min-height:14px; }

/* WebP-Konvertierungs-Flow (Konvertieren → Rewrite → Verify) */
.u-webp-flow { display:flex; flex-direction:column; gap:10px; margin-top:8px; padding:10px 12px; background:rgba(255,255,255,.025); border:1px solid var(--u-hairline); border-radius:8px; }
.u-webp-step { display:flex; align-items:flex-start; gap:10px; }
.u-webp-step-ico { width:18px; flex-shrink:0; padding-top:1px; text-align:center; font-size:13px; line-height:1; }
.u-webp-step-ico .u-spinner { width:13px; height:13px; }
.u-webp-step-body { flex:1; min-width:0; }
.u-webp-step-label { font-size:12px; font-weight:600; color:var(--u-fg-1); line-height:1.4; }
.u-webp-step-detail { font-size:11px; color:var(--u-fg-2); margin-top:3px; line-height:1.5; word-break:break-word; }
.u-webp-step-detail code { font-family:var(--u-mono); font-size:10.5px; background:rgba(255,255,255,.06); padding:1px 5px; border-radius:3px; }
.u-img-analyze-status { margin-top:5px; font-size:11px; color:var(--u-fg-3); }
.u-img-ai-panel { display:none; margin-top:8px; padding-top:10px; border-top:1px solid var(--u-hairline); }
.u-img-ai-panel.open { display:block; }
.u-img-ai-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.u-img-ai-title { font-size:11px; font-weight:600; color:var(--u-fg-2); }
.u-img-ai-close { background:none; border:none; color:var(--u-fg-3); font-size:13px; cursor:pointer; padding:0 2px; line-height:1; transition:color .15s; }
.u-img-ai-close:hover { color:var(--u-fg-1); }
.u-img-ai-model { display:block; width:100%; box-sizing:border-box; background:rgba(255,255,255,.05); border:1px solid var(--u-border); border-radius:6px; color:var(--u-fg-1); font-size:11px; padding:6px 9px; margin-bottom:7px; outline:none; cursor:pointer; }
.u-img-ai-model:focus { border-color:rgba(182,255,60,.4); }
.u-img-ai-prompt { display:block; width:100%; box-sizing:border-box; background:rgba(255,255,255,.05); border:1px solid var(--u-border); border-radius:6px; color:var(--u-fg-1); font-size:11px; padding:7px 10px; resize:vertical; min-height:60px; font-family:inherit; outline:none; }
.u-img-ai-prompt:focus { border-color:rgba(182,255,60,.4); }
.u-img-ai-prompt::placeholder { color:var(--u-fg-3); }
.u-img-ai-status { font-size:11px; margin-top:6px; min-height:16px; line-height:1.4; }
.u-img-ai-status.ok  { color:var(--u-lime); }
.u-img-ai-status.err { color:var(--u-mag); }
.u-img-ai-confirm { margin-top:8px; background:rgba(255,200,50,.07); border:1px solid rgba(255,200,50,.25); border-radius:6px; padding:10px 12px; }
.u-img-ai-confirm-q { font-size:12px; font-weight:600; color:var(--u-fg-1); margin-bottom:8px; }
.u-img-ai-confirm-btns { display:flex; gap:6px; }
.u-img-ai-confirm-btns .u-btn { flex:1; font-size:11px; padding:6px 8px; text-align:center; }
.u-img-ai-confirm-no { background:var(--u-card); border:1px solid var(--u-hairline); color:var(--u-fg-2); }
.u-img-ai-confirm-no:hover { color:var(--u-fg-1); border-color:var(--u-fg-3); }
.u-ai-restore-btn { background:none; border:none; color:var(--u-blue); font-size:11px; cursor:pointer; padding:0; text-decoration:underline; }
.u-ai-restore-btn:hover { color:#fff; }
.u-ai-restore-btn:disabled { opacity:.5; cursor:default; }

/* ── Analysis Tabs (Pagespeed / SEO / GEO) ─────────────────── */
.u-analysis-panel { display:flex; flex-direction:column; gap:20px; }
.u-analysis-intro { color:var(--u-fg-2); font-size:13.5px; line-height:1.6; }
.u-analysis-loading { color:var(--u-fg-3); font-size:13px; padding:24px 0; display:flex; align-items:center; gap:10px; }
.u-spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.15); border-top-color: var(--u-lime); border-radius:50%; animation: u-spin .8s linear infinite; vertical-align:middle; flex-shrink:0; }
@keyframes u-spin { to { transform: rotate(360deg); } }
.u-btn-loading { opacity:.85; cursor:wait !important; }
.u-btn-loading .u-spinner { border-top-color:#0a0720; border-color:rgba(0,0,0,.2); }
.u-analysis-err { color:var(--u-mag); font-size:13px; padding:12px 0; }
.u-analysis-ok  { color:var(--u-lime); font-size:13px; padding:8px 0; }
.u-analysis-subh { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--u-fg-3); margin:16px 0 8px; border-top:1px solid var(--u-hairline); padding-top:14px; }

/* Score row (circle + summary) */
.u-analysis-score-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:4px; }
.u-analysis-score-summary { display:flex; flex-direction:column; gap:5px; font-size:13px; }

/* PSI dual scores */
.u-psi-scores { display:flex; gap:20px; flex-wrap:wrap; }
.u-psi-score-block { flex:1; min-width:200px; background:var(--u-surface); border:1px solid var(--u-hairline); border-radius:var(--u-radius); padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.u-psi-score-label { font-size:13px; font-weight:600; color:var(--u-fg-2); }

/* SVG score circle */
.u-psi-circle-wrap { width:90px; height:90px; flex-shrink:0; }
.u-psi-circle { width:90px; height:90px; }

/* Core vitals list */
.u-psi-vitals { display:flex; flex-direction:column; gap:5px; }
.u-psi-vital { display:flex; align-items:center; gap:8px; font-size:12px; }
.u-psi-vk { font-family:var(--u-mono); font-size:11px; color:var(--u-fg-3); width:32px; flex-shrink:0; cursor: help; border-bottom: 1px dotted var(--u-fg-3); }

/* PSI-Legende ("Was bedeuten FCP/LCP/...") */
.u-psi-legend { margin-top: 14px; }
.u-psi-legend > summary { font-size: 12px; color: var(--u-fg-3); cursor: pointer; padding: 4px 0; list-style: none; outline: none; }
.u-psi-legend > summary:hover { color: var(--u-fg-1); }
.u-psi-legend > summary::-webkit-details-marker { display: none; }
.u-psi-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 12px; }
.u-psi-legend-item { padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--u-hairline); border-radius: 8px; }
.u-psi-legend-key { font-family: var(--u-mono); font-size: 14px; font-weight: 700; color: var(--u-lime); margin-bottom: 2px; }
.u-psi-legend-name { font-size: 11.5px; color: var(--u-fg-2); margin-bottom: 6px; font-weight: 500; }
.u-psi-legend-desc { font-size: 11.5px; color: var(--u-fg-2); line-height: 1.55; margin-bottom: 8px; }
.u-psi-legend-bench { font-size: 10.5px; font-family: var(--u-mono); }
.u-psi-good { color: #7de897; }
.u-psi-mid  { color: #f4c430; }
.u-psi-bad  { color: var(--u-mag); }

/* ── Audit-Verlauf Tab ──────────────────────────────────────── */
.u-verlauf-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.u-verlauf-filter { background: rgba(255,255,255,.04); border: 1px solid var(--u-hairline); color: var(--u-fg-2); padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; transition: .15s; }
.u-verlauf-filter:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); }
.u-verlauf-filter.active { background: var(--u-lime-soft); border-color: rgba(182,255,60,.5); color: var(--u-lime); font-weight: 600; }

.u-verlauf-table { display: flex; flex-direction: column; gap: 1px; background: var(--u-hairline); border-radius: 10px; overflow: hidden; }
.u-verlauf-thead, .u-verlauf-row {
  display: grid;
  grid-template-columns: 140px 180px 1fr 90px 1.4fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  background: var(--u-bg-2);
}
.u-verlauf-thead { background: rgba(255,255,255,.04); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--u-fg-3); }
.u-verlauf-row:hover { background: var(--u-surface-2); }
.u-verlauf-time { font-size: 11.5px; color: var(--u-fg-3); font-family: var(--u-mono); }
.u-verlauf-kind { font-size: 12px; color: var(--u-fg-1); display: flex; align-items: center; gap: 8px; }
.u-verlauf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.u-verlauf-url { font-family: var(--u-mono); font-size: 11px; color: var(--u-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-verlauf-score { font-family: var(--u-mono); font-size: 14px; font-weight: 700; text-align: right; }
.u-verlauf-detail { font-size: 11px; color: var(--u-fg-3); font-family: var(--u-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .u-verlauf-thead, .u-verlauf-row { grid-template-columns: 100px 140px 1fr 70px; }
  .u-verlauf-detail, .u-verlauf-thead > div:last-child { display: none; }
}

/* ── FTP-Daten Browser ──────────────────────────────────────── */
.u-ftp-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.u-ftp-toolbar input { flex: 1; min-width: 200px; padding: 7px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--u-hairline); border-radius: 7px; color: var(--u-fg-1); font-size: 12.5px; outline: none; }
.u-ftp-toolbar input:focus { border-color: rgba(124,156,255,.5); }

/* Prominentes Hero-Suchfeld */
.u-ftp-search {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; padding: 4px 6px 4px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--u-hairline);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.u-ftp-search:focus-within {
  border-color: rgba(124,156,255,.65);
  background: rgba(124,156,255,.06);
  box-shadow: 0 0 0 3px rgba(124,156,255,.12);
}
.u-ftp-search-icon { font-size: 18px; opacity: .75; }
.u-ftp-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--u-fg-1); font-size: 16px; font-weight: 500;
  padding: 12px 0;
}
.u-ftp-search-input::placeholder { color: var(--u-fg-3); font-weight: 400; }
.u-ftp-search-input::-webkit-search-cancel-button { cursor: pointer; }
.u-ftp-search-stats { font-size: 11.5px; color: var(--u-fg-3); white-space: nowrap; padding: 0 6px; }
.u-ftp-search-stats strong { color: var(--u-fg-1); }
.u-ftp-reload { padding: 7px 12px !important; font-size: 14px !important; min-width: 40px; }

/* Server-Pfad-Anzeige (unter Breadcrumb) */
.u-ftp-path-info {
  padding: 6px 14px 10px;
  font-size: 11.5px; color: var(--u-fg-3);
}
.u-ftp-path-label { font-weight: 600; color: var(--u-fg-2); }
.u-ftp-path-val {
  font-family: var(--u-mono); font-size: 11px;
  background: rgba(255,255,255,.05);
  padding: 2px 8px; border-radius: 5px;
  color: var(--u-fg-1); word-break: break-all;
}
.u-ftp-thead, .u-ftp-row {
  display: grid;
  grid-template-columns: 1fr 130px 90px 140px;
  gap: 10px;
  padding: 8px 14px;
  align-items: center;
  border-bottom: 1px solid var(--u-hairline);
  font-size: 12px;
}
/* Admin-Variante mit Aktions-Spalte (Rename/Duplicate/Delete) */
.u-ftp-with-actions .u-ftp-thead,
.u-ftp-with-actions .u-ftp-row { grid-template-columns: 1fr 130px 90px 140px 110px; }
.u-ftp-col-act { text-align:center; display:flex; gap:4px; justify-content:center; }
.u-ftp-act-btn {
  background: rgba(255,255,255,.05); border: 1px solid var(--u-hairline);
  border-radius: 5px; cursor: pointer; font-size: 13px; padding: 3px 7px;
  color: var(--u-fg-2); transition: all .12s;
}
.u-ftp-act-btn:hover { background: rgba(255,255,255,.12); color: var(--u-fg-1); }
.u-ftp-act-btn.is-danger:hover { background: rgba(255,138,161,.18); color: #ff8aa1; border-color: rgba(255,138,161,.4); }
.u-ftp-act-btn:disabled { opacity: .5; cursor: wait; }
.u-ftp-thead { background: rgba(255,255,255,.04); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--u-fg-3); cursor: pointer; user-select: none; border-radius: 8px 8px 0 0; }
.u-ftp-thead > div:hover { color: var(--u-fg-1); }
.u-ftp-row:hover { background: rgba(255,255,255,.03); }
.u-ftp-col-name { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-ftp-col-type { font-size: 11px; color: var(--u-fg-2); }
.u-ftp-col-size { font-family: var(--u-mono); font-size: 11px; color: var(--u-fg-2); text-align: right; }
.u-ftp-col-mtime { font-family: var(--u-mono); font-size: 11px; color: var(--u-fg-3); }
.u-ftp-list { max-height: 600px; overflow-y: auto; border: 1px solid var(--u-hairline); border-top: none; border-radius: 0 0 8px 8px; }

/* Breadcrumb + Up-Button */
.u-ftp-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(158,195,255,.06);
  border: 1px solid rgba(158,195,255,.18);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: var(--u-mono);
}
.u-ftp-bc-label { color: var(--u-fg-3); font-size: 13px; }
.u-ftp-bc-link {
  color: var(--u-blue); text-decoration: none;
  padding: 2px 6px; border-radius: 4px;
  transition: .15s;
}
.u-ftp-bc-link:hover { background: rgba(158,195,255,.15); }
.u-ftp-bc-current { color: var(--u-fg-1); font-weight: 600; padding: 2px 6px; }
.u-ftp-bc-sep { color: var(--u-fg-3); font-size: 11px; opacity: .6; }
.u-ftp-bc-up {
  margin-left: auto;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--u-hairline);
  color: var(--u-fg-2);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--u-sans);
  cursor: pointer;
  transition: .15s;
}
.u-ftp-bc-up:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); background: rgba(255,255,255,.08); }

/* Klickbare Ordner-Zeilen */
.u-ftp-row-dir .u-ftp-col-name { color: var(--u-blue); font-weight: 600; }
.u-ftp-row-dir:hover { background: rgba(158,195,255,.08) !important; }
.u-ftp-row-dir:hover .u-ftp-col-name { color: var(--u-fg-1); }

/* ── View-As Tier-Switch (Admin) ────────────────────────────── */
.u-viewas-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,46,184,.06), rgba(124,156,255,.06));
  border: 1px solid rgba(255,46,184,.2);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 22px;
  font-size: 12.5px;
}
.u-viewas-label { color: var(--u-mag); font-weight: 700; }
.u-viewas-buttons { display: flex; gap: 4px; }
.u-viewas-btn {
  padding: 6px 12px; font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.04); color: var(--u-fg-2);
  border: 1px solid var(--u-hairline);
  border-radius: 6px; cursor: pointer; transition: .15s;
}
.u-viewas-btn:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); }
.u-viewas-btn.active {
  background: var(--u-mag);
  color: #fff;
  border-color: var(--u-mag);
  box-shadow: 0 0 12px rgba(255,46,184,.4);
}
.u-viewas-hint { color: var(--u-fg-3); font-size: 11px; flex: 1; min-width: 220px; }

/* Header View-As Dropdown */
.u-vat-switch { position: relative; }
.u-vat-btn {
  background: linear-gradient(135deg, rgba(255,46,184,.1), rgba(124,156,255,.1));
  border: 1px solid rgba(255,46,184,.3);
  color: var(--u-fg-1);
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center;
  transition: .15s;
}
.u-vat-btn:hover { background: linear-gradient(135deg, rgba(255,46,184,.22), rgba(124,156,255,.22)); border-color: var(--u-mag); }
.u-vat-btn strong { color: var(--u-mag); margin-left: 4px; }
.u-vat-menu {
  display: none;
  position: absolute;
  top: 100%; right: 0; margin-top: 6px;
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: 10px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  min-width: 200px;
  z-index: 60;
  overflow: hidden;
}
.u-vat-switch.open .u-vat-menu { display: block; }
.u-vat-head { padding: 10px 14px 6px; font-size: 10.5px; color: var(--u-fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.u-vat-opt {
  display: flex; align-items: center; width: 100%;
  padding: 8px 14px;
  background: none; border: none;
  font-size: 13px; color: var(--u-fg-2); text-align: left;
  cursor: pointer; transition: .12s;
}
.u-vat-opt:hover { background: rgba(255,255,255,.05); color: var(--u-fg-1); }
.u-vat-opt.active { background: rgba(255,46,184,.12); color: var(--u-mag); font-weight: 600; }
.u-vat-foot { padding: 8px 14px 10px; font-size: 10.5px; color: var(--u-fg-3); border-top: 1px solid var(--u-hairline); line-height: 1.5; }
@media (max-width: 800px) {
  .u-ftp-thead, .u-ftp-row { grid-template-columns: 1fr 80px 80px; }
  .u-ftp-with-actions .u-ftp-thead,
  .u-ftp-with-actions .u-ftp-row { grid-template-columns: 1fr 80px 110px; }
  .u-ftp-col-mtime, .u-ftp-col-type { display: none; }
}

/* Check list (SEO + GEO) */
.u-check-list { display:flex; flex-direction:column; gap:1px; }
.u-check-row  { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px; background:rgba(255,255,255,.025); }
.u-check-row:nth-child(odd) { background:rgba(255,255,255,.04); }
.u-check-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.u-check-label { font-size:12.5px; font-weight:500; color:var(--u-fg-1); }
.u-check-val  { font-size:11.5px; color:var(--u-fg-2); font-family:var(--u-mono); word-break:break-all; }
.u-check-hint { font-size:11px; color:var(--u-fg-3); margin-top:2px; }

/* Status badges (inline icons + vitals) */
.u-check-ok   { display:inline-block; color:#7de897; }
.u-check-warn { display:inline-block; color:#f4c430; }
.u-check-fail { display:inline-block; color:var(--u-mag); }

/* GEO schemas */
.u-geo-schemas { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.u-geo-schema-badge { background:rgba(158,195,255,.1); border:1px solid rgba(158,195,255,.25); color:var(--u-blue); border-radius:12px; font-size:11px; padding:2px 9px; font-family:var(--u-mono); }

/* GEO bot table */
.u-geo-bots { display:flex; flex-direction:column; gap:2px; }
.u-geo-bot-row { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:6px; font-size:12px; background:rgba(255,255,255,.025); }
.u-geo-bot-row:nth-child(odd) { background:rgba(255,255,255,.04); }
.u-geo-bot-status { font-size:10px; font-family:var(--u-mono); padding:2px 7px; border-radius:10px; font-weight:600; flex-shrink:0; }
.u-geo-bot-allowed  { background:rgba(100,220,100,.12); color:#7de897; border:1px solid rgba(100,220,100,.25); }
.u-geo-bot-blocked  { background:rgba(255,46,184,.1);   color:var(--u-mag);  border:1px solid rgba(255,46,184,.25); }
.u-geo-bot-partial  { background:rgba(244,196,48,.1);   color:#f4c430; border:1px solid rgba(244,196,48,.25); }
.u-geo-bot-unknown  { background:rgba(255,255,255,.05); color:var(--u-fg-3); border:1px solid var(--u-border); }
.u-geo-bot-not_mentioned { background:rgba(255,255,255,.05); color:var(--u-fg-3); border:1px solid var(--u-border); }
.u-geo-bot-name { flex:1; font-weight:500; }
.u-geo-bot-link { color:var(--u-fg-3); font-size:10px; text-decoration:none; }
.u-geo-bot-link:hover { color:var(--u-blue); }

/* ── Locked Tabs (Upsell-Logik) ──────────────────────────── */
.u-tab-locked { opacity:.6; }
.u-tab-locked:hover { opacity:.85; }
.u-tab-lock { display:inline-block; margin-left:6px; font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:1px 6px; border-radius:8px; background:rgba(244,196,48,.15); color:#f4c430; border:1px solid rgba(244,196,48,.3); text-transform:uppercase; }

/* Generischer Locked-Button-State (für Action-Features) */
.u-btn-locked {
  position: relative;
  background: rgba(244,196,48,.06) !important;
  border-color: rgba(244,196,48,.32) !important;
  color: #f4c430 !important;
  cursor: pointer !important;
  opacity: 0.85;
}
.u-btn-locked:hover {
  background: rgba(244,196,48,.16) !important;
  border-color: rgba(244,196,48,.55) !important;
  opacity: 1;
}

/* Upsell-Modal */
.u-upsell-overlay { position:fixed; inset:0; background:rgba(10,7,32,.75); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; animation:u-up-fade .2s ease; }
.u-upsell-card { background:linear-gradient(160deg,var(--u-surface) 0%,var(--u-surface-2) 100%); border:1px solid rgba(182,255,60,.25); border-radius:var(--u-radius-lg); padding:36px 32px 28px; max-width:440px; width:100%; text-align:center; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:u-up-pop .25s cubic-bezier(.2,.9,.4,1.2); }
.u-upsell-close { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--u-fg-3); font-size:24px; line-height:1; cursor:pointer; padding:4px 8px; transition:.15s; }
.u-upsell-close:hover { color:var(--u-fg-1); }
.u-upsell-icon { font-size:46px; margin-bottom:6px; filter:drop-shadow(0 0 20px rgba(244,196,48,.4)); }
.u-upsell-title { font-size:20px; margin:0 0 10px; color:var(--u-fg-1); }
.u-upsell-msg { color:var(--u-fg-2); font-size:14px; line-height:1.55; margin:0 0 22px; }
.u-upsell-actions { display:flex; flex-direction:column; gap:8px; }
.u-upsell-actions .u-btn { width:100%; justify-content:center; padding:10px 16px; text-decoration:none; }
.u-btn-secondary { background:rgba(255,255,255,.05); border:1px solid var(--u-hairline); color:var(--u-fg-2); }
.u-btn-secondary:hover { color:var(--u-fg-1); border-color:var(--u-fg-3); background:rgba(255,255,255,.08); }
@keyframes u-up-fade { from{opacity:0} to{opacity:1} }
@keyframes u-up-pop  { from{opacity:0;transform:scale(.92) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ── Aktivitäts-Log ──────────────────────────────────────── */
.u-log { display:flex; flex-direction:column; gap:2px; }
.u-log-row { display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid var(--u-hairline); transition:background .15s; }
.u-log-row:hover { background:rgba(255,255,255,.05); }
.u-log-ico { font-size:18px; width:30px; flex-shrink:0; text-align:center; line-height:1.2; }
.u-log-body { flex:1; min-width:0; }
.u-log-line1 { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.u-log-action { font-weight:600; font-size:13px; color:var(--u-fg-1); }
.u-log-who { font-size:11.5px; color:var(--u-fg-3); }
.u-log-who::before { content:"· "; }
.u-log-detail { font-size:11.5px; color:var(--u-fg-2); margin-top:3px; font-family:var(--u-mono); word-break:break-word; }
.u-log-time { font-size:11px; color:var(--u-fg-3); font-family:var(--u-mono); flex-shrink:0; white-space:nowrap; }
.u-log-edit    { border-left:3px solid var(--u-lime); }
.u-log-load    { border-left:3px solid var(--u-blue); }
.u-log-publish { border-left:3px solid #f4c430; }
.u-log-ai      { border-left:3px solid #ff7ed1; }
.u-log-scan    { border-left:3px solid var(--u-blue); }
.u-log-admin   { border-left:3px solid var(--u-fg-3); }
.u-log-err     { border-left:3px solid var(--u-mag); background:rgba(255,46,184,.05); }

/* ── Audit-History (Pagespeed/SEO/GEO Verläufe) ─────────────── */
.u-hist-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 14px; margin-top: 18px; }
.u-hist-box { background: var(--u-surface); border: 1px solid var(--u-hairline); border-radius: var(--u-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.u-hist-head { display: flex; flex-direction: column; gap: 2px; }
.u-hist-label { font-size: 12px; font-weight: 700; color: var(--u-fg-1); }
.u-hist-meta { font-size: 10.5px; color: var(--u-fg-3); }
.u-hist-chart { width: 100%; height: 110px; display: block; }
.u-hist-score { font-family: var(--u-mono); font-size: 22px; font-weight: 700; color: var(--u-fg-1); text-align: right; line-height: 1.1; }
.u-hist-score small { font-size: 11px; color: var(--u-fg-3); margin-left: 2px; font-weight: 400; }
/* PageSpeed-Verlauf: zwei größere Boxen direkt nebeneinander */
.u-hist-grid-psi { grid-template-columns: 1fr 1fr; gap: 18px; }
.u-hist-grid-psi .u-hist-box { max-width: none; padding: 16px 18px; gap: 8px; }
.u-hist-grid-psi .u-hist-chart { height: 260px; }
.u-hist-grid-psi .u-hist-label { font-size: 13px; }
@media (max-width: 720px) { .u-hist-grid-psi { grid-template-columns: 1fr; } }
/* SEO-/GEO-Verlauf: einzelne Box so groß wie EINE PageSpeed-Box (~660px, Chart 200px) */
.u-hist-grid-lg { grid-template-columns: minmax(0, 660px); gap: 18px; }
.u-hist-grid-lg .u-hist-box { max-width: none; padding: 16px 18px; gap: 8px; }
.u-hist-grid-lg .u-hist-chart { height: 260px; }
.u-hist-grid-lg .u-hist-label { font-size: 13px; }
@media (max-width: 720px) { .u-hist-grid-lg { grid-template-columns: 1fr; } }

/* ── Unterseiten-Panel (PSI/SEO/GEO) ────────────────────────── */
.u-sub-panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--u-hairline); }
.u-sub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.u-sub-toggle { background: rgba(158,195,255,.08); border: 1px solid rgba(158,195,255,.22); color: var(--u-blue); padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.u-sub-toggle:hover { background: rgba(158,195,255,.18); border-color: rgba(158,195,255,.5); }
.u-sub-meta { font-size: 11.5px; color: var(--u-fg-3); }
.u-sub-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.u-sub-list { display: flex; flex-direction: column; gap: 4px; }
.u-sub-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,.025); border: 1px solid var(--u-hairline); border-radius: 8px; cursor: pointer; transition: background .15s; }
.u-sub-row:hover { background: rgba(255,255,255,.05); }
.u-sub-cb { margin: 0; }
.u-sub-row-body { min-width: 0; }
.u-sub-title { font-size: 12.5px; font-weight: 600; color: var(--u-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-sub-url { font-size: 10.5px; color: var(--u-fg-3); font-family: var(--u-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-sub-url code { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-fg-3); }
.u-sub-last { font-size: 11px; color: var(--u-fg-3); text-align: right; min-width: 100px; }
.u-sub-status { min-width: 60px; text-align: right; font-size: 12px; }
.u-sub-score { display: inline-block; min-width: 28px; padding: 2px 6px; border-radius: 6px; background: rgba(182,255,60,.12); color: var(--u-lime); font-family: var(--u-mono); font-weight: 700; font-size: 11.5px; }
.u-sub-progress { margin-top: 10px; font-size: 12px; }
.u-btn-secondary { background: rgba(255,255,255,.05); border: 1px solid var(--u-hairline); color: var(--u-fg-2); padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.u-btn-secondary:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); background: rgba(255,255,255,.08); }

/* ── KI-Fix-UI (SEO/GEO Auto-Optimierung) ──────────────────── */
.u-aifix-bar { display: flex; justify-content: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--u-hairline); flex-direction: column; align-items: stretch; gap: 8px; }
.u-aifix-btn {
  background: var(--u-lime, #b6ff3c);
  border: 1px solid var(--u-lime, #b6ff3c);
  color: #0c0c10;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start; /* links ausgerichtet */
  transition: .15s;
}
.u-aifix-btn:hover { background: #c9ff5e; border-color: #c9ff5e; }
.u-aifix-btn:disabled { opacity: .6; cursor: wait; }
.u-aifix-status { width: 100%; }
.u-aifix-step { padding: 12px 14px; background: rgba(124,156,255,.08); border: 1px solid rgba(124,156,255,.25); border-radius: 8px; color: var(--u-fg-2); font-size: 12.5px; display: flex; align-items: center; gap: 10px; }

/* Live-Progress mit Step-Indicator (NDJSON-Stream-Phasen) */
.u-aifix-progress { padding: 14px 16px; background: rgba(124,156,255,.06); border: 1px solid rgba(124,156,255,.28); border-radius: 10px; }
.u-aifix-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--u-hairline); }
.u-aifix-progress-head strong { font-size: 13px; color: var(--u-fg-1); }
.u-aifix-progress-total { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-blue); }
.u-aifix-progress-foot { font-size: 11px; color: var(--u-fg-3); margin-top: 10px; font-style: italic; }
.u-aifix-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.u-aifix-steps .u-aifix-step { padding: 8px 12px; background: transparent; border: none; border-radius: 0; color: var(--u-fg-3); font-size: 12px; display: flex; align-items: center; gap: 10px; transition: color .2s, background .2s; }
.u-aifix-steps .u-aifix-step.u-aifix-step-active { color: var(--u-fg-1); background: rgba(182,255,60,.06); border-radius: 6px; font-weight: 600; }
.u-aifix-steps .u-aifix-step.u-aifix-step-complete { color: var(--u-fg-2); }
.u-aifix-step-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.u-aifix-step-done { background: rgba(182,255,60,.18); color: var(--u-lime, #b6ff3c); border: 1px solid rgba(182,255,60,.4); }
.u-aifix-step-running { background: rgba(182,255,60,.10); color: var(--u-lime, #b6ff3c); border: 1px solid rgba(182,255,60,.5); }
.u-aifix-step-pending { background: rgba(255,255,255,.03); color: var(--u-fg-3); border: 1px solid var(--u-hairline); }
.u-aifix-step-label { flex: 1; min-width: 0; }
.u-aifix-step-elapsed { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-lime, #b6ff3c); background: rgba(182,255,60,.10); padding: 2px 7px; border-radius: 99px; flex-shrink: 0; }
.u-aifix-err { padding: 12px 14px; background: rgba(255,46,184,.08); border: 1px solid rgba(255,46,184,.3); border-radius: 8px; color: var(--u-mag); font-size: 12.5px; }
.u-aifix-result { padding: 14px 16px; background: rgba(255,255,255,.03); border: 1px solid var(--u-hairline); border-radius: 10px; }
.u-aifix-backup { background: rgba(244,196,48,.08); border: 1px solid rgba(244,196,48,.28); border-radius: 8px; padding: 10px 13px; font-size: 12px; color: var(--u-fg-2); margin-bottom: 10px; line-height: 1.6; }
.u-aifix-backup code { font-family: var(--u-mono); font-size: 11px; color: #f4c430; background: rgba(0,0,0,.2); padding: 1px 5px; border-radius: 3px; word-break: break-all; }
.u-aifix-meta { font-size: 11.5px; color: var(--u-fg-3); margin-bottom: 10px; line-height: 1.6; }
.u-aifix-meta code { font-family: var(--u-mono); font-size: 10.5px; color: var(--u-blue); }
.u-aifix-changes { background: rgba(0,0,0,.15); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 12px; }
.u-aifix-changes strong { color: var(--u-fg-1); display: block; margin-bottom: 8px; }
.u-aifix-change { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--u-hairline); }
.u-aifix-change:last-child { border-bottom: none; margin-bottom: 0; }
.u-aifix-change-label { font-weight: 600; color: var(--u-fg-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.u-aifix-change-row { font-size: 11.5px; line-height: 1.4; font-family: var(--u-mono); margin: 2px 0; word-break: break-word; }
.u-aifix-old { color: #ff8aa1; }
.u-aifix-new { color: #7de897; }
.u-aifix-summary { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.u-aifix-pill { font-size: 11px; padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.u-aifix-pill-ok   { background: rgba(100,220,100,.15); color: #7de897; border: 1px solid rgba(100,220,100,.3); }
.u-aifix-pill-skip { background: rgba(244,196,48,.12); color: #f4c430; border: 1px solid rgba(244,196,48,.3); }
.u-aifix-patch { padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.18); margin-bottom: 5px; }
.u-aifix-patch-head { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.u-aifix-patch-type { font-family: var(--u-mono); font-weight: 600; color: var(--u-fg-1); }
.u-aifix-patch-status { font-family: var(--u-mono); font-size: 10px; color: var(--u-fg-3); margin-left: auto; }
.u-aifix-patch-desc { font-size: 11.5px; color: var(--u-fg-2); margin-top: 3px; word-break: break-word; line-height: 1.4; }
.u-aifix-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.u-aifix-ok { padding: 12px 14px; background: rgba(100,220,100,.08); border: 1px solid rgba(100,220,100,.28); border-radius: 8px; color: var(--u-fg-1); font-size: 12.5px; line-height: 1.6; }
.u-aifix-ok code { font-family: var(--u-mono); font-size: 11px; color: var(--u-lime); }

/* ── Welcome / Intro-Panel (initialer Zustand ohne Auswahl) ── */
.u-welcome { max-width: 760px; margin: 30px auto; text-align: center; padding: 40px 30px; }
.u-welcome-icon { font-size: 56px; margin-bottom: 14px; line-height: 1; }
.u-welcome-title { font-size: 28px; font-weight: 700; color: var(--u-fg-1); margin: 0 0 10px; letter-spacing: -.01em; }
.u-welcome-lead { font-size: 15px; color: var(--u-fg-2); margin: 0 0 36px; line-height: 1.5; max-width: 52ch; margin-left: auto; margin-right: auto; }
.u-welcome-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 40px; text-align: left; }
.u-welcome-group { background: var(--u-bg-2); border: 1px solid var(--u-hairline); border-radius: var(--u-radius); padding: 18px 18px 16px; transition: border-color .15s, transform .15s; }
.u-welcome-group:hover { border-color: var(--u-border); transform: translateY(-2px); }
.u-welcome-group-icon { font-size: 24px; margin-bottom: 8px; line-height: 1; }
.u-welcome-group h3 { font-size: 15px; font-weight: 700; color: var(--u-fg-1); margin: 0 0 6px; }
.u-welcome-group p { font-size: 12.5px; color: var(--u-fg-2); line-height: 1.5; margin: 0; }
.u-welcome-hint { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--u-lime-soft); border: 1px solid rgba(182,255,60,.3); border-radius: 999px; color: var(--u-fg-1); font-size: 13.5px; font-weight: 500; }
.u-welcome-arrow { font-size: 18px; animation: u-welcome-bounce 1.6s ease-in-out infinite; }
@keyframes u-welcome-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
@media (max-width: 720px) {
  .u-welcome-groups { grid-template-columns: 1fr; }
  .u-welcome-title { font-size: 22px; }
  .u-welcome { padding: 24px 18px; }
}

/* ── Tab-Switching Spinner-Overlay ── */
.u-content { position: relative; }
.u-tab-spinner {
  position: absolute; top: 0; left: 0; right: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 60px 20px 40px;
  background: linear-gradient(to bottom, var(--u-bg-1) 0%, rgba(10,7,32,0) 100%);
  z-index: 5;
  pointer-events: none;
}
.u-content-loading .u-tab-spinner { display: flex; }
.u-content-loading > .u-tab-panel-active { opacity: .35; transition: opacity .15s ease; pointer-events: none; }
.u-tab-spinner-ring {
  width: 38px; height: 38px;
  border: 3px solid var(--u-hairline);
  border-top-color: var(--u-lime);
  border-radius: 50%;
  animation: u-tab-spin .7s linear infinite;
}
.u-tab-spinner-label {
  font-family: var(--u-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--u-fg-3);
}
@keyframes u-tab-spin { to { transform: rotate(360deg); } }

/* ── Inline-Editor pro Text-Block ── */
.u-block-row { cursor: pointer; }
.u-block-row:focus-visible { outline: 2px solid var(--u-lime); outline-offset: 2px; }
.u-block-row.is-editing { border-color: var(--u-lime); }
.u-block-row.is-editing .u-block-cta { color: var(--u-lime); }
.u-block-row.is-editing .u-block-cta::before { content: '▾ '; }

.u-block-edit-inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--u-hairline);
  cursor: default;
}
.u-block-edit-form { display: flex; flex-direction: column; gap: 12px; }
.u-block-edit-field { position: relative; }
.u-block-edit-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--u-fg-3);
  margin-bottom: 5px;
  font-family: var(--u-mono);
}
.u-block-edit-label span { letter-spacing: 0; font-family: var(--u-sans); font-weight: 600; color: var(--u-fg-2); text-transform: none; font-size: 11.5px; }
.u-block-edit-input {
  width: 100%;
  background: var(--u-bg-1);
  border: 1px solid var(--u-border);
  color: var(--u-fg-1);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--u-sans);
  resize: vertical;
}
textarea.u-block-edit-input { min-height: 80px; line-height: 1.5; }
.u-block-edit-input:focus { outline: none; border-color: var(--u-lime); background: var(--u-bg-2); }
.u-block-edit-counter {
  position: absolute; bottom: -16px; right: 2px;
  font-family: var(--u-mono); font-size: 10.5px; color: var(--u-fg-3);
}
.u-block-edit-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.u-block-edit-actions .u-btn { padding: 8px 16px; font-size: 13px; }
.u-block-edit-cancel { margin-right: auto; }
.u-block-edit-expand { font-size: 12px; opacity: .8; margin-right: 4px; }
.u-block-edit-expand:hover { opacity: 1; }
.u-block-edit-status { font-size: 12px; font-family: var(--u-mono); flex-basis: 100%; min-height: 14px; }
.u-block-edit-status.u-edit-ok   { color: var(--u-lime); }
.u-block-edit-status.u-edit-err  { color: var(--u-mag); }
.u-block-edit-status.u-edit-noop { color: var(--u-fg-3); }

/* ── Inline-Publish-Status (statt globalem Top-Banner) ── */
.u-publish-status {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--u-lime-soft);
  border: 1px solid rgba(182,255,60,.35);
  border-radius: 10px;
  font-size: 13px;
  color: var(--u-fg-1);
  line-height: 1.5;
  animation: u-pub-slide .25s ease;
}
.u-publish-status-err {
  background: rgba(255,46,184,.12) !important;
  border-color: rgba(255,46,184,.40) !important;
  color: var(--u-fg-1) !important;
}
.u-publish-status-icon {
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--u-lime);
  margin-top: 1px;
}
.u-publish-status-err .u-publish-status-icon { color: var(--u-mag); }
.u-publish-status-msg { flex: 1; }
.u-publish-status-files {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--u-fg-3);
  font-family: var(--u-mono);
}
.u-publish-status-files code {
  background: rgba(0,0,0,.25);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.u-publish-status-close {
  background: transparent; border: 0;
  color: var(--u-fg-3); font-size: 14px;
  cursor: pointer; padding: 0 2px;
  line-height: 1;
  margin-left: 4px;
  flex-shrink: 0;
}
.u-publish-status-close:hover { color: var(--u-fg-1); }
@keyframes u-pub-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Freundlicher Intro-Tipp ── */
.u-texte-intro {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(182,255,60,.06), rgba(158,195,255,.04));
  border: 1px solid var(--u-hairline);
  border-left: 3px solid var(--u-lime);
  border-radius: var(--u-radius);
  margin: 18px 0 22px;
  font-size: 13.5px;
  color: var(--u-fg-2);
  line-height: 1.55;
}
.u-texte-intro-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.u-texte-intro-text strong { color: var(--u-fg-1); font-weight: 600; }

/* ── Admin-only Diagnose-Style ── */
.u-texte-files-admin {
  background: rgba(255,179,64,.04);
  border-color: rgba(255,179,64,.20);
}
.u-texte-files-admin > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.u-texte-files-admin > summary::-webkit-details-marker { display: none; }
.u-texte-files-admin > summary::after {
  content: '▾';
  color: var(--u-fg-3);
  font-size: 11px;
  margin-left: auto;
  transition: transform .15s;
}
.u-texte-files-admin[open] > summary::after { transform: rotate(180deg); }
.u-admin-only {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(255,179,64,.18);
  color: #ffb340;
  border: 1px solid rgba(255,179,64,.30);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  font-family: var(--u-mono);
}

/* ── Bildanalyse-Tab (Performance) ── */
.u-ba-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--u-bg-2);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.u-ba-toolbar-info { flex: 1; font-size: 13px; color: var(--u-fg-1); }
.u-ba-toolbar-sub { color: var(--u-fg-3); font-weight: 400; }

.u-ba-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--u-bg-2);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-radius);
  margin-bottom: 14px;
}
.u-ba-progress-bar { flex: 1; height: 8px; background: var(--u-border); border-radius: 4px; overflow: hidden; }
.u-ba-progress-fill { height: 100%; background: var(--u-lime); transition: width .3s; }
.u-ba-progress-label { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-fg-3); white-space: nowrap; }

.u-ba-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.u-ba-summary-card {
  background: var(--u-bg-2);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-radius);
  padding: 14px 16px;
  text-align: center;
}
.u-ba-summary-num { font-size: 26px; font-weight: 700; font-family: var(--u-mono); color: var(--u-fg-1); line-height: 1; }
.u-ba-summary-lab { font-size: 11.5px; color: var(--u-fg-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; font-family: var(--u-mono); }
.u-ba-summary-warn { border-color: rgba(255,179,64,.30); }
.u-ba-summary-warn .u-ba-summary-num { color: #ffb340; }
.u-ba-summary-ok { border-color: rgba(182,255,60,.30); }
.u-ba-summary-ok .u-ba-summary-num { color: var(--u-lime); }
.u-ba-summary-saving { border-color: rgba(124,156,255,.30); }
.u-ba-summary-saving .u-ba-summary-num { color: #7c9cff; }

.u-ba-tablewrap { overflow-x: auto; }
.u-ba-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.u-ba-table thead th {
  text-align: left; padding: 10px 12px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--u-fg-3); border-bottom: 1px solid var(--u-border);
  background: var(--u-bg-2);
  font-family: var(--u-mono);
}
.u-ba-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--u-hairline);
  vertical-align: middle;
}
.u-ba-table tbody tr:hover { background: rgba(255,255,255,.02); }
.u-ba-table tr.u-ba-row-warn { background: rgba(255,179,64,.04); }
.u-ba-table tr.u-ba-row-warn:hover { background: rgba(255,179,64,.07); }
.u-ba-thumb { width: 140px; height: 96px; object-fit: cover; border-radius: 6px; display: block; background: rgba(255,255,255,.04); }
.u-ba-thumb-na { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 96px; color: var(--u-fg-3); font-size: 11px; }
.u-ba-name { max-width: 320px; }
.u-ba-name span { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.u-ba-relpath { display: block; color: var(--u-fg-3); font-size: 10px; line-height: 1.3; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-family: var(--u-mono); }
.u-ba-empty { text-align: center; padding: 40px 20px; color: var(--u-fg-3); }
.u-ba-footnote { font-size: 11px; color: var(--u-fg-3); margin-top: 10px; font-style: italic; }

.u-ba-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--u-mono);
}
.u-ba-pill-pending { background: rgba(255,255,255,.06); color: var(--u-fg-3); }
.u-ba-pill-ok      { background: rgba(182,255,60,.12); color: var(--u-lime); border: 1px solid rgba(182,255,60,.25); }
.u-ba-pill-warn    { background: rgba(255,179,64,.14); color: #ffb340; border: 1px solid rgba(255,179,64,.35); }
.u-ba-pill-err     { background: rgba(255,46,184,.12); color: var(--u-mag); border: 1px solid rgba(255,46,184,.30); }
.u-ba-pill-skip    { background: rgba(255,255,255,.04); color: var(--u-fg-3); border: 1px solid var(--u-hairline); }
.u-ba-pill-unused  { background: rgba(0,0,0,.35); color: rgba(255,255,255,.55); font-size: 9px; margin-left: 6px; padding: 1px 5px; }

.u-ba-act-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  background: rgba(182,255,60,.10); color: var(--u-lime);
  border: 1px solid rgba(182,255,60,.30);
  font-family: var(--u-mono); font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  cursor: pointer; transition: .15s;
}
.u-ba-act-btn:hover:not(:disabled) { background: rgba(182,255,60,.18); border-color: var(--u-lime); }
.u-ba-act-btn:disabled { opacity: .6; cursor: default; }
.u-ba-act-btn.is-ok { background: rgba(182,255,60,.20); border-color: var(--u-lime); color: var(--u-lime); }

@media (max-width: 720px) {
  .u-ba-summary { grid-template-columns: repeat(2, 1fr); }
  .u-ba-thumb { width: 80px; height: 56px; }
}

/* ── Bildanalyse Filter-Bar ── */
.u-ba-filterbar {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  padding: 12px 16px;
  background: var(--u-bg-2);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-radius);
  margin-bottom: 14px;
  align-items: center;
}
.u-ba-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.u-ba-filter-lab {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--u-fg-3); margin-right: 6px;
  font-family: var(--u-mono);
}
.u-ba-filter {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--u-border);
  color: var(--u-fg-2);
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--u-sans);
}
.u-ba-filter:hover { border-color: var(--u-fg-3); color: var(--u-fg-1); }
.u-ba-filter.is-active {
  background: var(--u-lime-soft);
  border-color: var(--u-lime);
  color: var(--u-lime);
  font-weight: 600;
}
.u-ba-sort-select {
  background: var(--u-bg-1);
  border: 1px solid var(--u-border);
  color: var(--u-fg-1);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  font-family: var(--u-sans);
  cursor: pointer;
}
.u-ba-sort-select:focus { outline: none; border-color: var(--u-lime); }

/* Bildanalyse: Quick-Filter "Sparpotenzial" */
.u-ba-filter-hot {
  background: rgba(255,179,64,.08);
  border-color: rgba(255,179,64,.35) !important;
  color: #ffb340 !important;
}
.u-ba-filter-hot:hover { background: rgba(255,179,64,.14); }
.u-ba-filter-hot.is-active {
  background: rgba(255,179,64,.22) !important;
  border-color: #ffb340 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,179,64,.4) inset;
}

/* Bildanalyse: Zonen-Trennzeilen */
.u-ba-zone td {
  padding: 14px 12px 6px !important;
  border-bottom: 1px solid var(--u-border);
  background: rgba(255,255,255,.02);
}
.u-ba-zone-lab {
  font-weight: 700;
  font-size: 12px;
  color: var(--u-fg-1);
  letter-spacing: .02em;
}
.u-ba-zone-cnt {
  margin-left: 10px;
  font-size: 11px;
  color: var(--u-fg-3);
  font-family: var(--u-mono);
}
.u-ba-zone-hot td     { background: rgba(255,179,64,.06); }
.u-ba-zone-hot .u-ba-zone-lab     { color: #ffb340; }
.u-ba-zone-optimal td { background: rgba(182,255,60,.04); }
.u-ba-zone-optimal .u-ba-zone-lab { color: var(--u-lime); }
.u-ba-zone-unused td  { background: rgba(0,0,0,.18); }
.u-ba-zone-unused .u-ba-zone-lab  { color: var(--u-fg-3); }

/* Aktions-Buttons in Format-/Resize-/Status-Spalte */
.u-ba-act-hint {
  font-size: 10px;
  color: var(--u-fg-3);
  margin-top: 3px;
  font-family: var(--u-mono);
}
.u-ba-act-na {
  font-size: 11px;
  color: var(--u-fg-3);
}
.u-ba-act-na.is-ok {
  color: var(--u-lime);
  font-weight: 600;
}
.u-ba-act-del {
  margin-left: 6px;
  padding: 2px 6px !important;
  border-color: rgba(255,46,184,.35) !important;
  color: var(--u-mag) !important;
  font-size: 11px;
}
.u-ba-act-del:hover:not(:disabled) {
  background: rgba(255,46,184,.14) !important;
  border-color: var(--u-mag) !important;
}

/* Scan-Debug-Panel (Admin) — sitzt direkt unter dem Admin-Panel-Content */
.u-img-scan-debug {
  background: rgba(255,46,184,.05);
  border-top: 1px solid var(--u-hairline);
  padding: 12px 13px 14px;
  font-size: 10.5px;
  color: var(--u-fg-2);
  max-height: 32vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.u-img-scan-debug-head {
  font-weight: 700;
  color: var(--u-fg-1);
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.u-img-scan-debug-head #imgScanDebugCount {
  font-weight: 400;
  color: var(--u-fg-3);
  font-family: var(--u-mono);
  font-size: 10.5px;
  flex: 1;
}
.u-img-scan-debug-close {
  border: 1px solid var(--u-hairline);
  background: transparent;
  color: var(--u-fg-3);
  border-radius: 4px;
  width: 22px; height: 22px;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.u-img-scan-debug-close:hover { color: var(--u-fg-1); border-color: var(--u-fg-3); }
.u-img-scan-debug-list {
  overflow-y: auto;
  font-family: var(--u-mono);
  line-height: 1.7;
}
.u-img-scan-debug-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-img-scan-debug-path { color: var(--u-fg-1); }

/* Quellen-Anzeige unter dem Bildnamen */
.u-ba-sources {
  color: var(--u-fg-3) !important;
  font-family: var(--u-mono);
  font-size: 10px;
  display: block;
  margin-top: 3px;
  cursor: help;
}
.u-ba-sources-none { color: var(--u-fg-3); font-style: italic; }
.u-ba-sources-warn { color: #ffb340 !important; font-style: italic; }

/* Erfolgs-Banner nach WebP-Konvertierung */
.u-ba-success {
  margin: 14px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(182,255,60,.08), rgba(124,156,255,.06));
  border: 1px solid rgba(182,255,60,.35);
  border-radius: 10px;
  color: var(--u-fg-1);
  font-size: 13px;
}
.u-ba-success-head { font-size: 14px; margin-bottom: 10px; }
.u-ba-success-steps { margin: 0 0 12px 22px; padding: 0; line-height: 1.8; }
.u-ba-success-steps li { margin-bottom: 3px; }
.u-ba-success-steps code {
  background: rgba(0,0,0,.3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--u-lime);
}
.u-ba-success-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: var(--u-fg-2);
}
.u-ba-success-msg { flex: 0 0 auto; white-space: nowrap; }
.u-ba-success-btns {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.u-ba-success-btn {
  font-size: 12px !important;
  padding: 7px 12px !important;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

/* ── Bilder-Tab: Tabellen-Aktionsbuttons ────────────────────────────────── */
.u-img-actions-col { white-space: nowrap; }
.u-img-icon-btn {
  background: none;
  border: 1px solid var(--u-hairline);
  border-radius: 5px;
  color: var(--u-fg-2);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 5px 10px;
  transition: background .15s, color .15s, border-color .15s;
  vertical-align: middle;
}
.u-img-icon-btn:hover { background: rgba(255,255,255,.08); color: var(--u-fg-1); border-color: var(--u-fg-3); }
.u-img-icon-del { border-color: rgba(255,80,80,.35); color: rgba(255,100,100,.8); }
.u-img-icon-del:hover { background: rgba(255,60,60,.12) !important; color: #ff5555 !important; border-color: rgba(255,80,80,.7) !important; }
.u-img-icon-ai { border-color: rgba(182,255,60,.3); color: rgba(182,255,60,.85); }
.u-img-icon-ai:hover { background: rgba(182,255,60,.1) !important; color: var(--u-lime) !important; border-color: rgba(182,255,60,.6) !important; }

/* ── Bilder-Tab: Expand-Rows (Upload / KI) ──────────────────────────────── */
.u-img-expand-row td { padding: 0 !important; border-top: none !important; }
.u-img-expand-panel {
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid var(--u-hairline);
  padding: 14px 16px;
}
.u-img-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.u-img-expand-title { font-size: 12px; font-weight: 600; color: var(--u-fg-1); }
.u-img-expand-close {
  background: none;
  border: none;
  color: var(--u-fg-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  transition: color .15s;
}
.u-img-expand-close:hover { color: var(--u-fg-1); }
.u-img-expand-body { font-size: 12px; }

/* ── Bilder-Tab: Datei-Upload im Expand-Panel ───────────────────────────── */
.u-img-expand-file-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.u-img-expand-file-wrap input[type=file] {
  font-size: 11px;
  color: var(--u-fg-2);
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--u-hairline);
  border-radius: 5px;
  padding: 5px 8px;
  flex: 1 1 180px;
  cursor: pointer;
}

/* ── Bilder-Tab: Thumbnail-Link in Tabelle ──────────────────────────────── */
.u-ba-thumb-link { display: inline-block; cursor: zoom-in; }
.u-ba-thumb-link:hover .u-ba-thumb { opacity: .8; }


/* ───────────────────────── Locked Tab: Marketing-Pitch-Card ─────────────────
   Wird serverseitig statt des echten Tab-Inhalts gerendert (kein Daten-Load).
*/
.u-locked-pitch {
  max-width: 760px;
  margin: 30px auto;
  padding: 38px 44px;
  background: linear-gradient(135deg, rgba(182,255,60,.06), rgba(124,156,255,.06));
  border: 1px solid var(--u-border, rgba(255,255,255,.12));
  border-radius: 16px;
}
.u-locked-pitch-tier {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 18px;
}
.u-locked-tier-pro {
  background: rgba(124,156,255,.16);
  color: #a5beff;
  border: 1px solid rgba(124,156,255,.3);
}
.u-locked-tier-ent {
  background: rgba(255,179,64,.16);
  color: #ffb340;
  border: 1px solid rgba(255,179,64,.3);
}
.u-locked-tier-paid {
  background: rgba(255,255,255,.08);
  color: var(--u-fg-1);
  border: 1px solid rgba(255,255,255,.18);
}
.u-locked-pitch-headline {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.2;
  color: var(--u-fg-1);
}
.u-locked-pitch-tagline {
  font-size: 15px;
  color: var(--u-fg-2);
  line-height: 1.55;
  margin: 0 0 26px;
}
.u-locked-pitch-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.u-locked-pitch-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--u-fg-1);
}
.u-locked-pitch-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--u-lime, #b6ff3c);
  font-weight: 700;
  font-size: 14px;
}
.u-locked-pitch-value {
  margin: 24px 0;
  padding: 16px 20px;
  background: rgba(255,179,64,.07);
  border-left: 3px solid #ffb340;
  border-radius: 6px;
}
.u-locked-pitch-value strong {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffb340;
  margin-bottom: 6px;
}
.u-locked-pitch-value p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--u-fg-1);
}
.u-locked-pitch-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--u-border, rgba(255,255,255,.08));
}
.u-locked-pitch-cta-primary {
  font-size: 14px !important;
  padding: 11px 22px !important;
}
.u-locked-pitch-cta-note {
  font-size: 11px;
  color: var(--u-fg-3);
  margin-left: auto;
}
@media (max-width: 700px) {
  .u-locked-pitch { padding: 24px 22px; margin: 16px auto; }
  .u-locked-pitch-headline { font-size: 22px; }
  .u-locked-pitch-cta-note { margin-left: 0; flex-basis: 100%; }
}

/* Demo-Trend-Sparkline in Locked-Pitch (Pagespeed/SEO/GEO) */
.u-locked-trend {
  margin: 18px 0 26px;
  padding: 16px 18px;
  background: rgba(182,255,60,.04);
  border: 1px solid rgba(182,255,60,.18);
  border-radius: 10px;
}
.u-locked-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.u-locked-trend-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--u-fg-2);
  letter-spacing: .02em;
}
.u-locked-trend-delta {
  font-size: 12px;
  font-weight: 700;
  color: var(--u-lime, #b6ff3c);
  background: rgba(182,255,60,.12);
  padding: 3px 10px;
  border-radius: 999px;
}
.u-locked-trend-svg {
  width: 100%;
  height: 70px;
  display: block;
}
.u-locked-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--u-fg-2);
}
.u-locked-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u-locked-trend-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.u-locked-trend-legend-delta {
  font-weight: 700;
  font-size: 11px;
}
.u-locked-trend-foot {
  font-size: 11px;
  color: var(--u-fg-3);
  margin-top: 8px;
  font-style: italic;
}

/* Erfolgs-Bestätigung nach gesendeter Upgrade-Anfrage */
.u-upgrade-sent {
  width: 100%;
  text-align: center;
  padding: 18px 16px;
  background: rgba(182,255,60,.06);
  border: 1px solid rgba(182,255,60,.30);
  border-radius: 10px;
}
.u-upgrade-sent-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  background: var(--u-lime, #b6ff3c);
  color: #0c0c10;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.u-upgrade-sent-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--u-lime, #b6ff3c);
  margin-bottom: 6px;
}
.u-upgrade-sent-text {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 8px;
}
.u-upgrade-sent-meta {
  font-size: 10.5px;
  color: var(--u-fg-3);
  font-family: var(--u-font-mono, monospace);
  letter-spacing: .04em;
}

/* Widget-Aktiv-Indikator in der Sidebar (gruener/grauer Punkt vor dem Icon) */
.u-side-item-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px;
  flex: 0 0 auto;
  background: #555;
  align-self: center;
  transition: background .15s, box-shadow .15s;
}
.u-side-item-dot--on  {
  background: #27ae60;
  box-shadow: 0 0 6px rgba(39,174,96,.55);
}
.u-side-item-dot--off {
  background: rgba(255,255,255,0.18);
}