/* ── Novi-Palette: Light und Dark ────────────────────────────────────
     J.A.R.V.I.S. war in einem einzigen dunklen Farbschema fest
     verdrahtet — 1492 Farbliterale in 1388 Regeln. Light Mode hatte
     darauf keinerlei Wirkung: die Ansicht war in beiden Themen
     byte-identisch.

     Statt jedes Literal einzeln anzufassen, laufen sie jetzt über diese
     Variablen. Die Dark-Werte hier sind exakt die bisherigen, damit der
     dunkle Look unverändert bleibt — das war die Vorgabe. Darunter
     stehen die Light-Werte.

     Wichtig ist die ROLLE, nicht der Farbwert: #fff ist als Schrift
     etwas völlig anderes als #fff als Fläche. Beide Rollen bekommen
     darum eigene Variablen, auch wenn im Dunklen derselbe Wert steht. */
  :root {
    /* Schrift */
    --nv-text-strong: #fff;
    --nv-text: #e9e7f5;
    --nv-text-soft: #cfccdf;
    --nv-text-mut: #b9b6d4;
    --nv-text-mut2: #a9a2cc;
    --nv-text-dim: #9c98b8;
    --nv-text-dim2: #8a87a6;
    --nv-text-faint: #766ea3;
    --nv-ekpi-label: #a9a5c4;
    --nv-vio-text: #c4b5fd;
    --nv-vio-text-soft: #ede9fe;
    --nv-good-text: #4ade80;
    --nv-good-text2: #86efac;
    --nv-bad-text: #f87171;
    --nv-warn-text: #fb923c;
    --nv-yellow-text: #facc15;
    /* Flächen */
    --nv-page: #0a0a12;
    --nv-sidebar: #0d0d17;
    --nv-topbar: rgba(10, 10, 18, 0.92);
    --nv-card: rgba(24, 22, 38, 0.7);
    --nv-lift-1: rgba(255, 255, 255, 0.012);
    --nv-lift-2: rgba(255, 255, 255, 0.015);
    --nv-lift-3: rgba(255, 255, 255, 0.03);
    --nv-veil: rgba(10, 10, 18, 0.6);
    --nv-veil-strong: rgba(8, 6, 18, 0.86);
  }
  :root[data-theme="light"][data-legacy-light] {
    /* Schrift: dieselbe Abstufung, nur von dunkel nach hell gedacht */
    --nv-text-strong: #14121c;
    --nv-text: #221f2e;
    --nv-text-soft: #3a3550;
    --nv-text-mut: #4a4560;
    --nv-text-mut2: #55506e;
    --nv-text-dim: #5f5a7a;
    --nv-text-dim2: #6b6688;
    --nv-text-faint: #7d77a0;
    --nv-ekpi-label: #5b5578;
    /* Das helle Violett des Dark Mode ist auf Weiß unlesbar — hier die
       gesättigte Variante derselben Farbfamilie. */
    --nv-vio-text: #6d28d9;
    --nv-vio-text-soft: #5b21b6;
    --nv-good-text: #15803d;
    --nv-good-text2: #166534;
    --nv-bad-text: #b91c1c;
    --nv-warn-text: #c2410c;
    --nv-yellow-text: #a16207;
    /* Flächen */
    --nv-page: #f7f5fb;
    --nv-sidebar: #ffffff;
    --nv-topbar: rgba(255, 255, 255, 0.94);
    --nv-card: #ffffff;
    /* Im Dunklen hellt eine Fläche minimal auf; im Hellen muss sie
       minimal abdunkeln, sonst verschwindet die Abstufung. */
    --nv-lift-1: rgba(24, 16, 56, 0.025);
    --nv-lift-2: rgba(24, 16, 56, 0.035);
    --nv-lift-3: rgba(24, 16, 56, 0.055);
    --nv-veil: rgba(255, 255, 255, 0.72);
    --nv-veil-strong: rgba(20, 14, 40, 0.55);
  }

  :root {
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f7f7f8;
    --border-subtle: #e6e7eb;
    --border-strong: #d6d8dd;
    --text-primary: #000000;
    --text-secondary: #444444;
    --text-faint: #777777;
    --accent: #c24d59;
    --accent-strong: #a94551;
    --accent-soft: rgba(194, 77, 89, 0.08);
    --accent-soft-strong: rgba(194, 77, 89, 0.14);
    --header-a: #ce515e;
    --header-b: #a1434d;
    --header-text: #fdf3f0;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px -14px rgba(20, 15, 15, 0.22);
    /* TikTok's own brand pink — used only to tell TikTok-tagged elements
       (platform tags, icons) apart from YouTube ones at a glance.
       Constant across light/dark since it's a brand color, not a
       theme-reactive one. */
    --tiktok-brand: #fe2c55;
    --tiktok-brand-soft: rgba(254, 44, 85, 0.12);
  }

  :root[data-theme="dark"] {
    /* Boss-Novi-Referenzpalette: Navy-Schwarz, Violett, Gold-Akzent —
       dieselbe Sprache wie Studio, Startseite und Admin Terminal. */
    --bg-page: #070b14;
    --bg-card: #0d1220;
    --bg-card-hover: #131a2c;
    --border-subtle: rgba(139, 92, 246, 0.16);
    --border-strong: rgba(139, 92, 246, 0.34);
    --text-primary: #f4f3fa;
    --text-secondary: #9d9ab4;
    --text-faint: #6f6c86;
    --accent: #8b5cf6;
    --accent-strong: #a855f7;
    --accent-soft: rgba(139, 92, 246, 0.12);
    --accent-soft-strong: rgba(139, 92, 246, 0.2);
    --header-a: #191230;
    --header-b: #0c081c;
    --header-text: #e9e2ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -14px rgba(0, 0, 0, 0.65);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg-page: #ffffff;
      --bg-card: #ffffff;
      --bg-card-hover: #f7f7f8;
      --border-subtle: #e6e7eb;
      --border-strong: #d6d8dd;
      --text-primary: #000000;
      --text-secondary: #444444;
      --text-faint: #777777;
      --accent: #c24d59;
      --accent-strong: #a94551;
      --accent-soft: rgba(194, 77, 89, 0.08);
      --accent-soft-strong: rgba(194, 77, 89, 0.14);
      --header-a: #ce515e;
      --header-b: #a1434d;
      --header-text: #fdf3f0;
      --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px -14px rgba(20, 15, 15, 0.22);
    }
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--bg-page);
    color: var(--text-primary);
    /* Waagerecht beschneiden, ohne das senkrechte Scrollen zu verlieren:
       "overflow-x: hidden" macht das html-Element zu einem EIGENEN
       Scrollbereich. Da html mit dem Inhalt mitwächst, gibt es darin
       nichts zu scrollen — der Überstand liegt dann unerreichbar unter
       dem Bildschirmrand. Genau das hat die Handyansicht ausserhalb des
       Studios festgenagelt. "clip" beschneidet genauso, erzeugt aber
       keinen Scrollbereich, sodass die Seite normal scrollt. Die erste
       Zeile bleibt als Rückfall für sehr alte Browser stehen. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  a, button { font-family: inherit; }
  /* Design 3.0: Formularfelder sprechen dieselbe Schrift wie die Seite —
     vorher fielen Date-/Month-Inputs und Selects auf den Browser-Font
     zurueck ("December 2030" in fremder Schrift mitten in deutscher UI). */
  input, select, textarea { font-family: inherit; }

  .topbar {
    background: linear-gradient(120deg, var(--header-a), var(--header-b));
    color: var(--header-text);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .brand .mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .brand .mark svg {
    width: 18px;
    height: 18px;
    stroke: var(--header-text);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .brand .name {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1.15;
  }

  .brand .name small {
    display: block;
    font-size: 11px;
    font-weight: 450;
    opacity: 0.72;
    letter-spacing: 0.01em;
  }

  .user-chip-wrap {
    position: relative;
  }
  .user-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 650;
    flex: none;
    cursor: pointer;
    transition: background .2s;
  }
  .user-chip:hover { background: rgba(255, 255, 255, 0.28); }

  .user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.18);
    padding: 6px;
    z-index: 9999;
  }
  .user-dropdown.open { display: block; }

  .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 550;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
  }
  .user-dropdown-item:hover { background: var(--bg-card-hover); }
  .user-dropdown-item.active { color: var(--accent); }
  .user-dropdown-item svg { width: 18px; height: 18px; flex: none; }
  .user-dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 6px;
  }
  .user-dropdown-section-label {
    padding: 6px 12px 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .lang-btn.active { color: var(--accent); }
  .profile-role-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(46, 160, 67, 0.15);
    color: #2ea043;
  }

  main {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }

  .hero-row h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .hero-row .sub {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--text-secondary);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }

  /* ── J.A.R.V.I.S. promo card — a new, additive entry point on the
     home page. Matches the existing card language (bg-card, border,
     shadow) so it fits visually, but keeps a distinct violet accent +
     badge so it clearly reads as a new, separate system rather than
     one more workflow tile. ── */
  .novi-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(139, 92, 246, 0.06);
    flex-wrap: wrap;
  }
  .novi-promo-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .novi-promo-eyebrow { display: flex; align-items: center; gap: 10px; }
  .novi-promo-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #a855f7, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .novi-promo-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
    flex: none;
  }
  :root[data-theme="dark"] .novi-promo-badge { color: var(--nv-vio-text); background: rgba(139, 92, 246, 0.2); }
  .novi-promo-subtitle { font-size: 13px; color: var(--text-faint); }
  .novi-promo-btn {
    flex: none;
    border: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nv-text-strong);
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.55);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .novi-promo-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.65); }
  @media (max-width: 640px) {
    .novi-promo-card { flex-direction: column; align-items: stretch; text-align: left; }
    .novi-promo-btn { width: 100%; }
  }

  .home-category-tabs {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
  }
  .home-category-tab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-faint);
    padding: 9px 14px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
    transition: color .15s, background .15s;
  }
  .home-category-tab:hover { color: var(--text-secondary); background: var(--bg-card-hover); }
  .home-category-tab.active {
    color: var(--text-primary);
    background: var(--bg-card);
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }

  .tile {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
  }

  .tile:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }

  .tile:active { transform: translateY(0) scale(0.98); }

  .tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Drag-and-drop reordering — Home grid only (#grid), reorders the main
     nav tiles by personal priority; order persists in localStorage. */
  #grid .tile[draggable="true"] { cursor: grab; }
  #grid .tile.dragging { opacity: 0.4; cursor: grabbing; }
  #grid .tile.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
  }

  .badge {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: transform 150ms ease, color 150ms ease;
  }

  .tile:hover .badge {
    color: var(--accent-strong);
    transform: translateY(-1px);
  }

  .badge.has-photo {
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card-hover);
  }

  .badge.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .badge svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tile .label {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.003em;
    color: var(--text-primary);
  }

  .tile .sub {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: -8px;
  }

  .tile[hidden] { display: none; }

  /* Home grid only — square icon-only tiles, everything else (channel
     tiles, video-hub tiles, calendar-hub tiles) keeps the wide layout. */
  #grid .tile {
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
  }

  #grid .tile .badge {
    width: 32px;
    height: 32px;
  }

  #grid .tile .badge svg {
    width: 26px;
    height: 26px;
  }

  #grid .tile .label {
    font-size: 12px;
  }

  .empty {
    text-align: center;
    padding: 40px 12px;
    color: var(--text-faint);
    font-size: 13.5px;
  }

  footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }

  footer span {
    font-size: 11.5px;
    color: var(--text-faint);
  }

  .toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    background: var(--text-primary);
    color: var(--bg-page);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 10;
    white-space: nowrap;
  }

  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  .toast .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-strong);
    flex: none;
  }

  /* ── Epic full-screen loader (Live-KPIs abrufen) ────────────── */
  .epic-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: radial-gradient(circle at 50% 42%, rgba(194, 77, 89, 0.38) 0%, rgba(12, 9, 10, 0.95) 55%, rgba(4, 3, 4, 0.985) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: epic-fade-in 0.35s ease both;
  }
  .epic-loader[hidden] { display: none; }
  @keyframes epic-fade-in { from { opacity: 0; } to { opacity: 1; } }

  .epic-loader-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 480px; height: 480px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 170, 178, 0.25) 0%, transparent 70%);
    animation: epic-glow-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes epic-glow-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
  }

  .epic-loader-core {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .epic-loader-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(224, 120, 130, 0.28);
  }
  .epic-loader-ring-1 { inset: 0;    border-top-color:   #f6c3c9; animation: epic-spin 1.7s linear infinite; }
  .epic-loader-ring-2 { inset: 20px; border-right-color: #f3aab2; animation: epic-spin 2.3s linear infinite reverse; }
  .epic-loader-ring-3 { inset: 40px; border-bottom-color:#eb8792; animation: epic-spin 1.3s linear infinite; }
  @keyframes epic-spin { to { transform: rotate(360deg); } }

  .epic-loader-icon {
    color: #fff;
    opacity: 0.95;
    animation: epic-icon-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(243, 170, 178, 0.75));
  }
  @keyframes epic-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
  }

  .epic-loader-title {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.30em;
    color: #fff;
    text-shadow: 0 0 20px rgba(243, 170, 178, 0.6);
    text-align: center;
  }
  .epic-loader-sub {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 0.03em;
    min-height: 16px;
    text-align: center;
  }

  .epic-loader-bar {
    width: 230px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
  }
  .epic-loader-bar-fill {
    width: 36%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #f6c3c9, transparent);
    animation: epic-bar-slide 1.3s ease-in-out infinite;
  }
  @keyframes epic-bar-slide {
    0%   { transform: translateX(-140%); }
    100% { transform: translateX(340%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .epic-loader-ring, .epic-loader-icon, .epic-loader-bar-fill, .epic-loader-glow { animation: none !important; }
  }

  /* portfolio view */
  .view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .back-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    flex: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  .back-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--border-strong); }
  .back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .back-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .view-header h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
  .view-header .sub { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }

  .section-label {
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 6px 0 -6px;
  }

  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .kpi-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kpi-icon {
    width: 26px;
    height: 26px;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .kpi-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .kpi-label { font-size: 12px; color: var(--text-secondary); font-weight: 550; }
  .kpi-value { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .kpi-value.muted { color: var(--text-faint); font-weight: 600; }

  .kpi-progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    overflow: hidden;
  }

  .kpi-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
  }

  .kpi-progress-fill.fill-uploaded { background: #f4d35e; }
  .kpi-progress-fill.fill-published { background: #6fcf97; }

  /* Home — "Live Performance" panel (today's uploads/publishes) */
  .perf-panel {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px 18px;
    border: 1px solid #e6e7eb;
    box-shadow: 0 10px 24px -14px rgba(20, 15, 15, 0.12);
    color: #000000;
    margin-bottom: 4px;
    transition: border-color .6s, box-shadow .6s;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .perf-header { flex: none; }
  .perf-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; }
  .perf-panel.all-published {
    border-color: rgba(111, 207, 151, 0.5);
    box-shadow: 0 10px 40px -10px rgba(111, 207, 151, 0.3), 0 0 60px -15px rgba(111, 207, 151, 0.25);
  }

  .perf-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(0,0,0,0.02) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: perf-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes perf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  .perf-panel.all-published .perf-shimmer {
    background: linear-gradient(105deg, transparent 35%, rgba(111, 207, 151, 0.10) 50%, transparent 65%);
    background-size: 200% 100%;
  }

  .perf-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
  }

  .perf-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #b3202f;
    font-family: "Inter", sans-serif;
  }
  .perf-panel.all-published .perf-eyebrow { color: #2a9d5c; }

  .perf-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c24d59;
    margin-right: 7px;
    box-shadow: 0 0 0 3px rgba(194, 77, 89, 0.18);
    animation: perf-pulse 1.8s ease-in-out infinite;
  }
  .perf-panel.all-published .perf-live-dot {
    background: #6fcf97;
    box-shadow: 0 0 0 4px rgba(111, 207, 151, 0.22), 0 0 14px rgba(111, 207, 151, 0.35);
  }

  @keyframes perf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  .perf-date {
    font-size: 11px;
    color: #777777;
    font-variant-numeric: tabular-nums;
  }

  .perf-rings {
    display: flex;
    gap: 14px;
    justify-content: center;
  }

  .perf-ring-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    max-width: 130px;
  }

  .perf-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
  }

  .perf-ring { width: 100%; height: 100%; transform: rotate(-90deg); }

  .perf-ring-track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 6;
  }

  .perf-ring-fill {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .perf-ring-fill.fill-uploaded { stroke: #f4d35e; filter: drop-shadow(0 0 10px rgba(244, 211, 94, 0.5)); }
  .perf-ring-fill.fill-published { stroke: #6fcf97; filter: drop-shadow(0 0 10px rgba(111, 207, 151, 0.45)); }
  .perf-ring-fill.fill-complete { stroke: url(#perf-gradient-gold); filter: drop-shadow(0 0 14px rgba(111, 207, 151, 0.6)); stroke-width: 8; }

  .perf-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .perf-ring-value {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .perf-ring-value.value-complete {
    background: linear-gradient(135deg, #6fcf97, #a8edba, #6fcf97);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 19px;
  }

  .perf-ring-label {
    font-size: 11px;
    font-weight: 620;
    color: #000000;
  }

  .perf-ring-caption {
    font-size: 10px;
    color: #777777;
    font-variant-numeric: tabular-nums;
    margin-top: -3px;
  }

  .perf-celebration {
    text-align: center;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(111, 207, 151, 0.15) 0%, rgba(111, 207, 151, 0.06) 100%);
    border: 1px solid rgba(111, 207, 151, 0.3);
    animation: perf-celebrate-in .7s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
  }
  @keyframes perf-celebrate-in {
    0% { opacity: 0; transform: translateY(10px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .perf-celebration-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
    animation: perf-trophy-bounce 2s ease-in-out infinite;
  }
  @keyframes perf-trophy-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.08); }
  }
  .perf-celebration-title {
    font-size: 14px;
    font-weight: 700;
    color: #2a9d5c;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
  }
  .perf-celebration-sub {
    font-size: 11px;
    color: #777777;
  }

  .perf-status-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: #999999;
    letter-spacing: 0.04em;
  }
  .perf-status-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
  }
  .perf-status-dot.dot-uploaded { background: #f4d35e; box-shadow: 0 0 6px rgba(244, 211, 94, 0.4); }
  .perf-status-dot.dot-published { background: #6fcf97; box-shadow: 0 0 6px rgba(111, 207, 151, 0.4); }

  :root[data-theme="dark"] .perf-panel {
    background: linear-gradient(155deg, #1c1d21 0%, #101114 100%);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #f2efe9;
  }
  :root[data-theme="dark"] .perf-panel.all-published {
    border-color: rgba(111, 207, 151, 0.35);
    box-shadow: 0 20px 60px -14px rgba(111, 207, 151, 0.25), inset 0 1px 0 rgba(111, 207, 151, 0.15), 0 0 80px -20px rgba(111, 207, 151, 0.18);
  }
  :root[data-theme="dark"] .perf-shimmer {
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
    background-size: 200% 100%;
  }
  :root[data-theme="dark"] .perf-panel.all-published .perf-shimmer {
    background: linear-gradient(105deg, transparent 35%, rgba(111, 207, 151, 0.06) 50%, transparent 65%);
    background-size: 200% 100%;
  }
  :root[data-theme="dark"] .perf-eyebrow { color: #f0899a; }
  :root[data-theme="dark"] .perf-panel.all-published .perf-eyebrow { color: #6fcf97; }
  :root[data-theme="dark"] .perf-live-dot { background: #f0899a; box-shadow: 0 0 0 3px rgba(240, 137, 154, 0.18); }
  :root[data-theme="dark"] .perf-panel.all-published .perf-live-dot { background: #6fcf97; box-shadow: 0 0 0 4px rgba(111, 207, 151, 0.22), 0 0 14px rgba(111, 207, 151, 0.35); }
  :root[data-theme="dark"] .perf-date { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .perf-ring-track { stroke: rgba(255, 255, 255, 0.08); }
  :root[data-theme="dark"] .perf-ring-label { color: #f2efe9; }
  :root[data-theme="dark"] .perf-ring-caption { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .perf-celebration { background: linear-gradient(135deg, rgba(111, 207, 151, 0.12) 0%, rgba(111, 207, 151, 0.04) 100%); border-color: rgba(111, 207, 151, 0.18); }
  :root[data-theme="dark"] .perf-celebration-title { color: #6fcf97; }
  :root[data-theme="dark"] .perf-celebration-sub { color: rgba(242, 239, 233, 0.5); }
  :root[data-theme="dark"] .perf-status-line { color: rgba(242, 239, 233, 0.35); }
  :root[data-theme="dark"] .perf-status-dot { background: rgba(242, 239, 233, 0.2); }

  /* ── Monats-Ziel: same white/dark-themed card as every other tile —
     only the "MONATSZIEL · LIVE" label, the % readout and the progress
     ring's own colors stay distinct. Everything else (background,
     stats text, captions) matches .perf-panel exactly. ── */
  .goal-panel { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .goal-panel .perf-eyebrow { color: #7c5cff; }
  .goal-panel.goal-complete .perf-eyebrow { color: #2a9d5c; }
  .goal-panel .perf-live-dot { background: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18); }
  .goal-panel.goal-complete .perf-live-dot { background: #6fcf97; box-shadow: 0 0 0 4px rgba(111, 207, 151, 0.22), 0 0 14px rgba(111, 207, 151, 0.35); }

  .goal-ring-wrap { position: relative; width: 132px; height: 132px; margin: 2px 0; flex: none; }
  .goal-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
  .goal-ring-track { fill: none; stroke: rgba(0, 0, 0, 0.08); stroke-width: 10; }
  .goal-ring-fill {
    fill: none; stroke-width: 10; stroke-linecap: round;
    filter: drop-shadow(0 0 16px rgba(124, 92, 255, 0.55));
    transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .goal-panel.goal-complete .goal-ring-fill { filter: drop-shadow(0 0 20px rgba(111, 207, 151, 0.6)); }
  .goal-ring-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
  }
  .goal-ring-value {
    font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #b794ff, #7c5cff, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .goal-panel.goal-complete .goal-ring-value {
    background: linear-gradient(135deg, #a8edba, #6fcf97, #a8edba);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .goal-ring-caption { font-size: 10px; font-weight: 650; color: #999999; letter-spacing: 0.06em; text-transform: uppercase; }
  .goal-stats { margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .goal-stats-current { color: #000000; }
  .goal-stats-sep { font-size: 11px; font-weight: 500; color: #999999; margin: 0 5px; }
  .goal-stats-target { color: #999999; }
  .goal-remaining { font-size: 11px; color: #999999; margin-top: 1px; }
  .goal-substatus { font-size: 10.5px; color: #999999; margin-top: 2px; }
  /* Zweites Monatsziel: Short Views (01.08.) */
  .goal-short { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(139, 146, 167, 0.28); text-align: center; }
  .goal-short-kopf { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
  .goal-short-kopf span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8b93a7; font-weight: 700; }
  .goal-short-kopf b { font-size: 15px; font-weight: 800; color: #38bdf8; }
  .goal-short.is-fertig .goal-short-kopf b { color: #4ade80; }
  .goal-short-balken { height: 7px; border-radius: 999px; background: rgba(139, 146, 167, 0.22); overflow: hidden; margin-top: 7px; }
  .goal-short-balken span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #a855f7); min-width: 2px; }
  .goal-short.is-fertig .goal-short-balken span { background: linear-gradient(90deg, #4ade80, #22c55e); }
  .goal-short-zahlen { margin-top: 6px; font-size: 11px; color: #8b93a7; }
  .goal-short-zahlen b { font-weight: 800; }
  .goal-short-hinweis { margin-top: 6px; font-size: 10.5px; color: #8b93a7; line-height: 1.4; }
  .goal-loading { font-size: 12px; color: #999999; padding: 40px 0; }

  .goal-channel-dots { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 10px; max-width: 260px; }
  .goal-channel-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: rgba(0, 0, 0, 0.12);
    transition: transform .15s;
  }
  .goal-channel-dot.dot-ontrack { background: #6fcf97; box-shadow: 0 0 6px rgba(111, 207, 151, 0.5); }
  .goal-channel-dot.dot-halfway { background: #f4d35e; box-shadow: 0 0 6px rgba(244, 211, 94, 0.4); }
  .goal-channel-dot:hover { transform: scale(1.3); }

  :root[data-theme="dark"] .goal-panel .perf-eyebrow { color: #b794ff; }
  :root[data-theme="dark"] .goal-panel.goal-complete .perf-eyebrow { color: #6fcf97; }
  :root[data-theme="dark"] .goal-panel .perf-live-dot { background: #b794ff; box-shadow: 0 0 0 3px rgba(183, 148, 255, 0.2); }
  :root[data-theme="dark"] .goal-ring-track { stroke: rgba(255, 255, 255, 0.08); }
  :root[data-theme="dark"] .goal-ring-caption { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-stats-current { color: #f2efe9; }
  :root[data-theme="dark"] .goal-stats-sep { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-stats-target { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-remaining { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-substatus { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-loading { color: rgba(242, 239, 233, 0.4); }
  :root[data-theme="dark"] .goal-channel-dot { background: rgba(255, 255, 255, 0.14); }

  @media (max-width: 760px) {
    .home-dashboards-row { flex-direction: column; }
  }

  .channel-progress-section {
    margin-top: 16px;
  }
  .channel-progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .channel-progress-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .channel-progress-legend {
    display: flex;
    gap: 12px;
    font-size: 10.5px;
    color: var(--text-faint);
  }
  .channel-progress-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
  }
  .channel-progress-legend .leg-published::before { background: #6fcf97; }
  .channel-progress-legend .leg-uploaded::before { background: #f4d35e; }
  .channel-progress-legend .leg-open::before { background: var(--border-subtle); }

  .channel-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .channel-progress-name {
    width: 140px;
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .channel-progress-bar-wrap {
    flex: 1;
    height: 10px;
    background: var(--border-subtle);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
  }
  .channel-progress-fill-published {
    height: 100%;
    background: #6fcf97;
    transition: width .5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .channel-progress-fill-uploaded {
    height: 100%;
    background: #f4d35e;
    transition: width .5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .channel-progress-count {
    width: 48px;
    flex: none;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .channel-progress-row.row-complete .channel-progress-name { color: #2a9d5c; }
  .channel-progress-row.row-complete .channel-progress-count { color: #2a9d5c; }
  :root[data-theme="dark"] .channel-progress-row.row-complete .channel-progress-name { color: #6fcf97; }
  :root[data-theme="dark"] .channel-progress-row.row-complete .channel-progress-count { color: #6fcf97; }

  .kpi-goal-caption { font-size: 11px; color: var(--text-faint); }

  .channel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Portfolio's own channel grid only — always 5 per row (two rows of
     5 for the 10 channels), with larger profile pictures than the
     compact channel tiles used in the other channel pickers. */
  #channel-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  #channel-grid .channel-tile {
    padding: 14px 6px;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  #channel-grid .channel-tile .label {
    font-size: 12px;
    line-height: 1.25;
  }

  #channel-grid .channel-tile .sub {
    font-size: 10px;
  }

  .tile-kpi-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    text-align: left;
  }

  .tile-kpi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10.5px;
  }

  .tile-kpi-label {
    color: var(--text-faint);
    white-space: nowrap;
  }

  .tile-kpi-value {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
  }

  #channel-grid .badge {
    width: 68px;
    height: 68px;
  }

  #channel-grid .badge svg {
    width: 52px;
    height: 52px;
  }

  .channel-tile .sub { color: var(--text-faint); }

  .channel-tile.is-restricted { opacity: 0.5; }
  .channel-tile.is-restricted .sub { color: var(--accent); }

  /* Kanal-Strategie: EIN Fokus-Kanal, der Rest ruht sichtbar. */
  .tile-zustand-pille {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .tile-zustand-pille.ist-fokus {
    color: var(--accent);
    border: 1px solid var(--accent);
  }
  .tile-zustand-pille.ist-ruht {
    color: var(--text-faint);
    border: 1px solid var(--border-strong);
    opacity: 0.8;
  }
  .channel-tile.is-ruht { opacity: 0.6; }

  @media (max-width: 420px) {
    .channel-grid { gap: 8px; }
    .channel-tile { padding: 16px 12px; }

    #channel-grid { gap: 6px; }
    #channel-grid .channel-tile { padding: 8px 3px; }
    #channel-grid .badge { width: 40px; height: 40px; }
    #channel-grid .badge svg { width: 30px; height: 30px; }
    #channel-grid .channel-tile .label { font-size: 10px; }
    #channel-grid .channel-tile .sub { font-size: 8.5px; }
    .tile-kpi-row { font-size: 8px; gap: 3px; }
    .tile-kpi-list { gap: 2px; }
  }

  /* Compact channel-grid mode (Portfolio) — toggled via #channel-compact-toggle,
     state persisted in localStorage so it survives reloads. Smaller tiles,
     more per row, KPI list + handle hidden so many more channels fit above
     the fold at once. */
  #channel-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 8px;
  }

  #channel-grid.compact .channel-tile {
    padding: 8px 4px;
    gap: 4px;
  }

  #channel-grid.compact .badge {
    width: 38px;
    height: 38px;
  }

  #channel-grid.compact .badge svg {
    width: 28px;
    height: 28px;
  }

  #channel-grid.compact .channel-tile .label {
    font-size: 10.5px;
  }

  #channel-grid.compact .channel-tile .sub,
  #channel-grid.compact .tile-kpi-list {
    display: none;
  }

  /* workflow wizard */
  .stepper-track {
    height: 6px;
    border-radius: 999px;
    background: var(--border-subtle);
    overflow: hidden;
  }

  .stepper-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 200ms ease;
  }

  .stepper-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-faint);
  }

  .wizard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 28px 22px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .wizard-card h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.005em; }
  .wizard-card p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

  .step-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
  }

  /* Soft transition when switching between workflow steps — replayed by
     toggling this class every renderVideoStep() call (see JS). */
  @keyframes stepBodyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .step-body.step-body-animate { animation: stepBodyFadeIn 260ms ease; }
  @media (prefers-reduced-motion: reduce) {
    .step-body.step-body-animate { animation: none; }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
  }

  /* ── "Saved" confirmation badge — shown briefly after a manual
     input in the Video Produktion workflow is saved. Floats over the
     top-right corner of the field so it needs no layout changes. ── */
  .field-saved-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #1f9d55;
    color: #fff;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-2px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2;
  }
  .field-saved-badge::before {
    content: "";
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff;
    flex: none;
  }
  .field-saved-badge.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: field-saved-flash 0.6s ease;
  }
  @keyframes field-saved-flash {
    0%   { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.55); }
    60%  { box-shadow: 0 0 14px 4px rgba(31, 157, 85, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .field-saved-badge { transition: opacity 0.25s ease; }
    .field-saved-badge.is-visible { animation: none; }
  }

  .field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .field input[type="text"],
  .field input[type="datetime-local"],
  .field select,
  .field textarea {
    font: inherit;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    resize: vertical;
    transition: border-color 140ms ease;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--accent);
  }

  .checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .check-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
  }

  .check-item input { accent-color: var(--accent); width: 16px; height: 16px; }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
  }

  .gallery-tile {
    aspect-ratio: 1;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-faint);
    font-size: 10.5px;
    text-align: center;
  }

  .audio-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-page);
  }

  .audio-bar {
    flex: 1;
    height: 28px;
    border-radius: 8px;
    background: repeating-linear-gradient(
      90deg, var(--border-subtle) 0 3px, transparent 3px 6px
    );
  }

  .audio-hint, .render-log {
    font-size: 12px;
    color: var(--text-faint);
  }

  .render-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .render-log {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
  }

  .clip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .clip-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-page);
  }

  .clip-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .clip-meta { font-size: 11.5px; color: var(--text-faint); }

  /* calendar month navigation */
  .cal-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
  }
  .cal-month-nav span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 180px;
    text-align: center;
  }
  .cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s;
  }
  .cal-nav-btn:hover { background: var(--bg-card-hover); }

  .cal-uploadtime-box {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 14px 18px;
  }
  .cal-uploadtime-box svg { flex: none; stroke: var(--accent); }
  .cal-uploadtime-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
  .cal-uploadtime-value { font-size: 22px; font-weight: 750; color: var(--text-primary); margin-top: 2px; }
  .cal-uploadtime-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

  /* upload calendar */
  .cal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
  }

  .cal-table {
    border-collapse: collapse;
    width: 100%;
    min-width: max-content;
    font-size: 12.5px;
  }

  .cal-table th {
    position: sticky;
    top: 0;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    padding: 10px 12px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
  }

  .cal-table td {
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
  }

  .cal-table td:last-child { border-right: none; }

  .cal-day-cell {
    padding: 8px 12px !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--bg-card-hover);
    white-space: nowrap;
  }

  .cal-select {
    width: 100%;
    min-width: 128px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    padding: 8px 10px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .cal-select.state-uploaded { background: #f4d35e; color: #4a3800; font-weight: 600; }
  .cal-select.state-published { background: #6fcf97; color: #0b3d24; font-weight: 600; }
  .cal-select.state-uploaded option,
  .cal-select.state-published option { color: #1b1c20; background: #fff; }

  /* channel assets — Hauptfigur / Basisfigur / Profilbild / Kanalbanner */
  .asset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .asset-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .asset-preview {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-page);
    border: 1px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .asset-preview img {
    width: 100%;
    height: auto;
    display: block;
  }

  .asset-preview.has-image {
    border-style: solid;
    aspect-ratio: auto;
    height: auto;
  }

  .asset-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-faint);
    font-size: 10.5px;
    text-align: center;
    padding: 0 8px;
  }

  .asset-label { font-size: 13px; font-weight: 620; color: var(--text-primary); }

  .asset-actions { display: flex; gap: 8px; }

  .asset-actions .btn { flex: 1; padding: 8px 10px; font-size: 12px; }

  .btn-danger { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-danger:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

  /* Step 1 — fixed research prompt tool */
  .research-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-page);
  }

  :root { --prompt-zoom: 1; }

  .research-prompt-view {
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-size: calc(11.5px * var(--prompt-zoom));
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
    resize: vertical;
  }

  /* Floating prompt zoom control — only shown while a prompt textarea is
     on screen, scales every .research-prompt-view at once via
     --prompt-zoom, persisted in localStorage. */
  #prompt-zoom-control {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 500;
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: var(--shadow-card);
    font-size: 11.5px;
    color: var(--text-faint);
  }

  #prompt-zoom-control.show { display: flex; }

  #prompt-zoom-control .prompt-zoom-icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--text-faint);
  }

  #prompt-zoom-control input[type="range"] {
    width: 90px;
    accent-color: var(--accent);
  }

  #prompt-zoom-control .prompt-zoom-value {
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
    color: var(--text-secondary);
    font-weight: 600;
  }

  @media (max-width: 640px) {
    #prompt-zoom-control { right: 10px; bottom: 10px; padding: 6px 10px; }
    #prompt-zoom-control input[type="range"] { width: 64px; }
  }

  /* Sticky mini progress bar — hidden until the user scrolls past the
     Video-Produktion workflow's main stepper, then pins to the top so
     step position stays visible no matter how far down a step body is. */
  #video-mini-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 10px 20px;
    font-size: 11.5px;
    color: var(--text-faint);
    transform: translateY(-100%);
    transition: transform 200ms ease;
  }

  #video-mini-progress.show { transform: translateY(0); }

  #video-mini-progress-count { flex: none; font-weight: 650; color: var(--text-secondary); white-space: nowrap; }
  #video-mini-progress-name { flex: none; white-space: nowrap; }
  #video-mini-progress .stepper-track { max-width: 260px; }

  @media (max-width: 640px) {
    #video-mini-progress-name { display: none; }
    #video-mini-progress { padding: 8px 12px; gap: 8px; }
  }
  /* Prompts are for copy-pasting into ChatGPT, not for reading on screen —
     hiding the raw text keeps every step page short and scannable. The
     "Prompt kopieren" button next to each one still reads the textarea's
     .value directly, so copying is unaffected by it being hidden. */
  .research-prompt-view[readonly] {
    background: #f0f0f0;
    color: #555;
    display: none;
  }
  @media (prefers-color-scheme: dark) {
    .research-prompt-view[readonly] { background: #2a2a2e; color: #aaa; }
  }
  :root[data-theme="dark"] .research-prompt-view[readonly] { background: #2a2a2e; color: #aaa; }

  .research-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11.5px;
    color: var(--text-faint);
  }

  .research-hint svg { flex: none; margin-top: 1px; stroke: var(--accent); }

  /* ── Step help dropdown ──────────────────────────── */
  .step-help-wrap { position: relative; display: inline-block; }

  .step-help-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-card); color: var(--text-secondary);
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; margin-left: 8px;
    transition: background .12s, border-color .12s;
  }
  .step-help-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }

  .step-help-dropdown {
    position: absolute; top: 50%; right: calc(100% + 10px);
    transform: translateY(-50%);
    width: 300px; padding: 14px 16px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 150; display: none;
  }
  .step-help-dropdown.open { display: block; }
  .step-help-dropdown h4 { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
  .step-help-dropdown ol { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.8; }
  .step-help-dropdown ol li { color: var(--text-primary); }

  /* ── Admin Anleitung editor ─────────────────────── */
  .anleitung-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 18px 20px; transition: border-color .15s;
  }
  .anleitung-card:focus-within { border-color: var(--accent); }
  .anleitung-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .anleitung-card-header h3 { margin: 0; font-size: 14px; font-weight: 650; }
  .anleitung-card-header .step-badge {
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
  }
  .anleitung-items { display: flex; flex-direction: column; gap: 6px; }
  .anleitung-item {
    display: flex; align-items: center; gap: 8px;
  }
  .anleitung-item-num {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-card-hover); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; display: flex; align-items: center;
    justify-content: center;
  }
  .anleitung-item input {
    flex: 1; padding: 6px 10px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--border-subtle); background: var(--bg-body);
    color: var(--text-primary); outline: none; transition: border-color .12s;
  }
  .anleitung-item input:focus { border-color: var(--accent); }
  .anleitung-item-remove {
    flex: none; width: 24px; height: 24px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-faint); cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
  }
  .anleitung-item-remove:hover { background: var(--danger, #ea6161); color: #fff; }
  .anleitung-add-btn {
    padding: 4px 12px; font-size: 12px; border-radius: 6px; border: 1px dashed var(--border-strong);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    margin-top: 6px; transition: border-color .12s, color .12s;
  }
  .anleitung-add-btn:hover { border-color: var(--accent); color: var(--accent); }
  .anleitung-save-bar {
    display: flex; justify-content: flex-end; margin-top: 18px; gap: 10px;
  }
  .anleitung-save-bar .btn { min-width: 140px; }

  .voice-box {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; margin-bottom: 14px;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
  }
  :root[data-theme="dark"] .voice-box { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); }
  .voice-box svg { flex: none; width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; }
  .voice-box-label { font-size: 11px; color: var(--text-faint); }
  .voice-box-value { font-size: 13px; font-weight: 600; }

  .research-output-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .research-output-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-page);
  }

  .research-output-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
  }

  .research-output-empty { color: var(--text-faint); }

  .identity-collapsible {
    margin-top: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
  }
  .identity-summary {
    cursor: pointer;
    padding: 10px 12px;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    background: #f0f0f0;
  }
  @media (prefers-color-scheme: dark) {
    .identity-summary { background: #2a2a2e; }
  }
  :root[data-theme="dark"] .identity-summary { background: #2a2a2e; }
  .identity-summary::-webkit-details-marker { display: none; }
  .identity-summary::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(-45deg);
    transition: transform .15s;
    flex-shrink: 0;
  }
  .identity-collapsible[open] > .identity-summary::before {
    transform: rotate(45deg);
  }
  .identity-collapsible > .research-output-value {
    border-top: 1px solid var(--border-subtle);
  }

  .voiceover-upload-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-page);
    margin-top: 8px;
  }
  .voiceover-upload-box .field-label { margin-bottom: 0; }
  .voiceover-player {
    width: 100%;
    border-radius: 8px;
    height: 40px;
  }
  .voiceover-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .voiceover-file-row .voiceover-name {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .voiceover-remove-btn {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .voiceover-remove-btn:hover { color: #e74c3c; border-color: #e74c3c; }
  .sidebar-voiceover-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sidebar-voiceover-box audio {
    width: 100%;
    height: 36px;
    border-radius: 6px;
  }

  .vg-input-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-page);
    margin-top: 10px;
  }
  .vg-input-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vg-input-title { font-size: 13px; font-weight: 650; color: var(--text-primary); }
  .vg-input-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex: none;
  }
  .vg-input-status.ok { background: rgba(46, 160, 67, 0.15); color: #2ea043; }
  .vg-input-status.missing { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
  .vg-input-preview {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 100px;
    overflow-y: auto;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
  }
  .vg-input-empty { font-size: 12px; color: var(--text-faint); }

  .vg-bridge-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    font-size: 12px;
  }
  .vg-bridge-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--text-faint);
  }
  .vg-bridge-dot.ok { background: #2ea043; }
  .vg-bridge-dot.bad { background: #e74c3c; }

  .vg-start-btn { width: 100%; margin-top: 14px; font-size: 15px; padding: 14px; }

  .vg-progress {
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
  }
  .vg-progress-state { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
  .vg-log {
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    padding: 10px 12px;
    color: var(--text-secondary);
  }

  .vg-sync-check {
    margin-top: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
  }
  .vg-sync-check.ok { border-color: rgba(46, 160, 67, 0.4); }
  .vg-sync-check.fail { border-color: rgba(231, 76, 60, 0.4); }
  .vg-sync-check-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .vg-sync-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; color: var(--text-secondary); }
  .vg-sync-item-icon {
    width: 16px; height: 16px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none;
  }
  .vg-sync-item-icon.ok { background: rgba(46, 160, 67, 0.15); color: #2ea043; }
  .vg-sync-item-icon.fail { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
  .vg-sync-check-time { font-size: 11px; color: var(--text-faint); margin-top: 10px; }

  .networth-loading { font-size: 13px; color: var(--text-faint); padding: 20px 0; text-align: center; }
  .networth-hero {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 32px 20px; border-radius: 14px; border: 1px solid var(--border-subtle);
    background: var(--bg-page); text-align: center;
  }
  .networth-hero-value { font-size: 44px; font-weight: 800; color: var(--text-primary); line-height: 1; }
  .networth-hero-label { font-size: 13px; color: var(--text-faint); }
  .networth-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px; margin-top: 16px;
  }
  .networth-stat {
    display: flex; flex-direction: column; gap: 4px; padding: 14px;
    border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-page); text-align: center;
  }
  .networth-stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
  .networth-stat-label { font-size: 11px; color: var(--text-faint); }
  .networth-ext-row {
    display: flex; justify-content: space-between; font-size: 12px;
    color: var(--text-secondary); padding: 5px 0; border-bottom: 1px solid var(--border-subtle);
  }
  .networth-ext-row:last-child { border-bottom: none; }
  .networth-history-row {
    display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 6px;
    font-size: 11px; color: var(--text-secondary); padding: 6px 2px;
    border-bottom: 1px solid var(--border-subtle); align-items: center;
  }
  .networth-history-row:last-child { border-bottom: none; }
  .networth-history-row span:last-child { text-align: right; }
  .networth-methodology { font-size: 11px; color: var(--text-faint); margin-top: 14px; line-height: 1.5; }

  .wp-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .wp-toggle-btn svg {
    flex: none;
    width: 14px;
    height: 14px;
    stroke: var(--accent);
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
  }

  .wp-toggle-btn[aria-expanded="true"] svg { transform: rotate(90deg); }

  .wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  /* Video Produktion — persistent right-side dashboard (Schritt 1–9) */
  .video-workflow-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .video-workflow-main {
    flex: 1;
    min-width: 0;
  }

  .video-workflow-sidebar {
    width: 280px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 20px;
  }

  .video-workflow-sidebar .wizard-card {
    padding: 18px 16px;
    gap: 8px;
  }

  .video-sidebar-script-box {
    max-height: 180px;
    overflow-y: auto;
  }

  @media (max-width: 760px) {
    .video-workflow-layout {
      flex-direction: column;
    }
    .video-workflow-sidebar {
      width: 100%;
      position: static;
    }
  }

  .btn {
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 11px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
  }

  .btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
  .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

  /* open videos list */
  .open-video-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .open-video-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px 14px 14px 16px;
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-card);
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
    font: inherit;
    color: inherit;
  }

  .open-video-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-1px); }
  .open-video-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .ov-icon {
    width: 36px;
    height: 36px;
    flex: none;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ov-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  .ov-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .ov-title { font-size: 14px; font-weight: 620; color: var(--text-primary); }
  .ov-meta { font-size: 12px; color: var(--text-faint); }

  .ov-progress-track { height: 4px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
  .ov-progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

  .ov-image-progress { display: none; font-size: 11px; color: var(--text-faint); margin-top: -1px; }
  .ov-image-progress-track { height: 3px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; margin-top: 3px; }
  .ov-image-progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-strong); }

  .ov-render-progress { display: none; font-size: 11px; color: var(--text-faint); margin-top: -1px; }
  .ov-render-progress.is-done { color: #2ea043; }
  .ov-render-progress.is-error { color: #e74c3c; }

  .missing-upload-panel {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
  }
  .missing-upload-panel-title {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-secondary);
    margin-bottom: 10px;
  }
  .missing-upload-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .missing-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
  }
  .missing-upload-chip.is-uploaded {
    background: rgba(230, 162, 0, 0.14);
    color: #a06800;
  }
  .missing-upload-chip-status {
    font-weight: 450;
    opacity: 0.85;
  }

  .ov-remove {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
  }

  .ov-remove:hover { color: var(--accent); border-color: var(--border-strong); }
  .ov-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  /* The [hidden] attribute and .login-screen's own `display: flex` have
     equal CSS specificity, and the author rule above wins the tie — so
     without this, setting view-login.hidden = true left it visible and
     stacked on top of the app, forcing a scroll to reach Home. */
  .login-screen[hidden] { display: none; }

  .login-card {
    width: 100%;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 32px 26px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .login-card .mark {
    width: 40px;
    height: 40px;
  }

  .login-card h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
  }

  .login-card p.sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .login-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .login-field input {
    font-family: inherit;
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text-primary);
  }

  .login-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .login-error {
    font-size: 12.5px;
    color: var(--accent);
    display: none;
  }

  .login-error.show { display: block; }

  /* ── Sidebar ────────────────────────────────────────── */
  .app-layout {
    display: flex;
    min-height: calc(100vh - 58px);
  }

  .sidebar {
    width: 220px;
    flex: none;
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: calc(100vh - 58px);
    overflow-y: auto;
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 550;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
  }

  .sidebar-nav-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
  }

  .sidebar-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 650;
  }

  .sidebar-nav-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  .sidebar-nav-item.active svg {
    stroke-width: 1.8;
  }

  .sidebar-spacer { flex: 1; }

  .sidebar-version {
    font-size: 11px;
    color: var(--text-faint);
    padding: 8px 14px 0;
    font-variant-numeric: tabular-nums;
  }

  .app-layout > main {
    flex: 1;
    min-width: 0;
  }

  /* Mobile: sidebar becomes bottom bar */
  @media (max-width: 700px) {
    .app-layout {
      flex-direction: column;
    }
    .sidebar {
      width: 100%;
      height: auto;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      top: auto;
      flex-direction: row;
      padding: 6px 8px;
      gap: 2px;
      border-right: none;
      border-top: 1px solid var(--border-subtle);
      z-index: 100;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .sidebar-nav-item {
      flex-direction: column;
      gap: 3px;
      padding: 6px 8px;
      font-size: 10px;
      width: auto;
      flex: 0 0 auto;
      min-width: 64px;
      white-space: nowrap;
      text-align: center;
      justify-content: center;
    }
    .sidebar-nav-item svg {
      width: 22px;
      height: 22px;
    }
    .sidebar-spacer, .sidebar-version { display: none; }
    .app-layout > main {
      padding-bottom: 72px;
      /* .app-layout switches to flex-direction:column above — main's
         width is then a cross-axis property (default align-items:
         stretch), so oversized content (e.g. a row of header buttons
         that doesn't fit) grows main itself past the viewport instead
         of wrapping inside it. max-width pins it back to the column's
         own width so flex-wrap further down actually has a correct,
         narrow container to wrap against. */
      max-width: 100%;
    }

    /* Below 16px, iOS Safari auto-zooms the whole page on focus instead
       of just showing the keyboard — disorienting on every text field
       in the app. Bumping to 16px here (mobile-only, desktop keeps its
       tighter sizing) removes that without a layout rewrite. */
    input, textarea, select {
      font-size: 16px;
    }

    /* ── Topbar ── */
    .topbar { padding: 10px 12px; gap: 8px; }
    .brand .mark { width: 28px; height: 28px; border-radius: 7px; }
    .brand .mark svg { width: 15px; height: 15px; }
    .brand .name { font-size: 13px; }
    .brand .name small { font-size: 10px; }
    #logout-btn { padding: 5px 8px; font-size: 10px; }
    .topbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

    /* margin-left:auto on these view-header action buttons is what
       pushes them to the right on desktop, but it also makes Chromium
       size/wrap the flex line as if unlimited space were available on
       narrow screens, so the button end up rendered past the viewport
       edge instead of wrapping onto its own row. Dropping the auto
       margin here removes that miscalculation — the buttons still end
       up on their own wrapped line (via .view-header's flex-wrap),
       just left-aligned instead of pushed right. */
    #gesamt-refresh-btn, #tiktok-refresh-btn, #compare-export-csv-btn,
    #portfolio-refresh-btn, #ranking-channels-export-csv-btn, #ranking-videos-export-csv-btn {
      margin-left: 0 !important;
    }

    /* ── Main content ── */
    main { padding: 18px 12px 80px; gap: 16px; }
    .hero-row h1 { font-size: 20px; }
    .hero-row .sub { font-size: 12px; }
    .view-header h1 { font-size: 18px; }
    .view-header .sub { font-size: 11.5px; }

    /* ── Tile grids ── */
    .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #channel-grid { grid-template-columns: repeat(2, 1fr); }
    .tile { padding: 16px 14px; gap: 10px; border-radius: 12px; }
    .tile .label { font-size: 13px; }
    .tile .sub, .tile-sub { font-size: 11px; }
    .badge { width: 34px; height: 34px; }
    .badge svg { width: 28px; height: 28px; }
    #grid .tile { padding: 10px 8px; gap: 4px; }
    #grid .tile .badge { width: 26px; height: 26px; }
    #grid .tile .badge svg { width: 22px; height: 22px; }
    #grid .tile .label { font-size: 11px; }

    /* ── KPI cards ── */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi-card { padding: 12px 12px 10px; border-radius: 10px; gap: 6px; }
    .kpi-label { font-size: 10.5px; }
    .kpi-value { font-size: 18px; }

    /* ── Notification dropdown ── */
    .notif-dropdown { width: calc(100vw - 24px); right: -8px; max-height: 70vh; }
    .notif-item { padding: 8px 10px; gap: 8px; }
    .notif-title { font-size: 11px; }
    .notif-desc { font-size: 10px; }

    /* ── Rank items ── */
    .rank-item { padding: 8px 10px; gap: 8px; }
    .rank-pos { width: 24px; height: 24px; font-size: 11px; }
    .rank-name { font-size: 12px; }
    .rank-meta { font-size: 10px; }
    .rank-stat-value { font-size: 12px; }
    .rank-stat-label { font-size: 9px; }

    /* ── Calendar ── */
    .cal-month-nav span { font-size: 12px; }
    .cal-uploadtime-box { padding: 10px 14px; gap: 10px; }
    .cal-uploadtime-value { font-size: 18px; }
    .cal-uploadtime-label { font-size: 10px; }
    .cal-uploadtime-sub { font-size: 10px; }

    /* ── Step help dropdown ── */
    .step-help-dropdown { width: 240px; padding: 10px 12px; right: auto; left: calc(100% + 6px); }
    .step-help-dropdown ol { font-size: 11px; line-height: 1.7; }

    /* ── Admin Anleitung editor ── */
    .anleitung-card { padding: 14px 14px; }
    .anleitung-card-header h3 { font-size: 13px; }
    .anleitung-item input { font-size: 12px; padding: 5px 8px; }
    .anleitung-save-bar { flex-direction: column; }
    .anleitung-save-bar .btn { min-width: 0; width: 100%; }

    /* ── Workflow sidebar ── */
    .video-workflow-sidebar { font-size: 12px; }

    /* ── Open video cards ── */
    .open-video-card { padding: 10px 12px; gap: 10px; }
    .ov-title { font-size: 13px; }
    .ov-meta { font-size: 11px; }

    /* ── Login card ── */
    .login-card { padding: 24px 18px; border-radius: 14px; }

    /* ── Voice box ── */
    .voice-box { font-size: 12px; }

    /* ── Buttons ── */
    .btn { padding: 9px 14px; font-size: 12.5px; }
  }

  /* Extra-small phones (≤ 380px) */
  @media (max-width: 380px) {
    .grid { grid-template-columns: 1fr; }
    #grid { grid-template-columns: repeat(3, 1fr); }
    .topbar { padding: 8px 10px; }
    .notif-bell { width: 30px; height: 30px; }
    .notif-bell svg { width: 15px; height: 15px; }
    main { padding: 14px 10px 80px; }
  }

  /* ── Umsatzrechner ─────────────────────────────────────── */
  .ur-slider-row { margin-top: 8px; }

  #ur-views-slider {
    width: 100%;
    accent-color: var(--accent);
    height: 6px;
  }

  .ur-slider-value {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }

  .ur-rpm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .ur-rpm-row:last-child { border-bottom: none; }

  .ur-rpm-channel {
    flex: 1;
    min-width: 140px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .ur-rpm-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-faint);
  }

  .ur-rpm-input {
    width: 68px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
  }

  .ur-result-card {
    align-items: center;
    text-align: center;
    gap: 6px;
    background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
  }

  .ur-result-main {
    position: relative;
    width: 200px;
    height: 200px;
    max-width: 100%;
    margin: 4px auto 8px;
  }

  .ur-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
  }

  .ur-gauge-track {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 14;
  }

  .ur-gauge-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 14;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px var(--accent));
    transition: stroke-dashoffset 300ms ease;
  }

  .ur-result-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
  }

  .ur-result-amount {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .ur-result-caption {
    font-size: 11.5px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ur-result-formula {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .ur-breakdown-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    text-align: left;
  }

  .ur-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ur-breakdown-name {
    flex: 0 0 150px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ur-breakdown-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--border-subtle);
    overflow: hidden;
  }

  .ur-breakdown-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
    transition: width 300ms ease;
  }

  .ur-breakdown-amount {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 64px;
    text-align: right;
  }

  @media (max-width: 480px) {
    .ur-breakdown-name { flex-basis: 100px; }
  }

  /* ── Ranking list ───────────────────────────────────── */
  .rank-list { display: flex; flex-direction: column; gap: 6px; }

  .rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .rank-item:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }

  .rank-pos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
  }

  .rank-gold { background: linear-gradient(135deg, #FFD700, #FFC107); color: #5a4500; box-shadow: 0 2px 8px rgba(255,193,7,0.35); }
  .rank-silver { background: linear-gradient(135deg, #E0E0E0, #BDBDBD); color: #424242; box-shadow: 0 2px 8px rgba(189,189,189,0.35); }
  .rank-bronze { background: linear-gradient(135deg, #CD7F32, #A0522D); color: #fff; box-shadow: 0 2px 8px rgba(205,127,50,0.35); }

  .rank-item.rank-1 { border-color: rgba(255,193,7,0.4); background: rgba(255,215,0,0.06); }
  .rank-item.rank-2 { border-color: rgba(189,189,189,0.5); background: rgba(224,224,224,0.06); }
  .rank-item.rank-3 { border-color: rgba(205,127,50,0.4); background: rgba(205,127,50,0.06); }

  :root[data-theme="dark"] .rank-item.rank-1 { background: rgba(255,215,0,0.08); }
  :root[data-theme="dark"] .rank-item.rank-2 { background: rgba(224,224,224,0.05); }
  :root[data-theme="dark"] .rank-item.rank-3 { background: rgba(205,127,50,0.08); }

  .rank-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--bg-card-hover); flex: none; }
  .rank-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .rank-info { flex: 1; min-width: 0; }
  .rank-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank-meta { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

  .rank-stat { text-align: right; flex: none; }
  .rank-stat-value { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .rank-stat-label { font-size: 10px; color: var(--text-faint); }

  /* ── Video preview panel ────────────────────────────── */
  .video-preview-panel {
    position: fixed;
    top: 0; right: 0;
    width: 420px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    z-index: 200;
    display: none;
    flex-direction: column;
  }
  .video-preview-panel.open { display: flex; }

  .video-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  }
  .video-preview-header h3 { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

  .video-preview-close {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--border-subtle); background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary); flex: none; margin-left: 10px;
  }
  .video-preview-close:hover { background: var(--bg-card-hover); }
  .video-preview-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .video-preview-body { flex: 1; }
  .video-preview-body iframe { width: 100%; height: 100%; border: none; }

  @media (max-width: 700px) { .video-preview-panel { width: 100%; } }

  /* ── Background auto-save flash — briefly lights up in the header every
     time the debounced /api/hub-state PUT (scheduleSyncPush) succeeds, so
     background saving is visible without being intrusive. ── */
  .sync-flash-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    color: #fff;
    background: rgba(111, 207, 151, 0.35);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
  }

  .sync-flash-indicator.show { opacity: 1; transform: scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .sync-flash-indicator { transition: opacity 1ms; }
  }

  /* ── Notification bell ─────────────────────────────── */
  .notif-bell-wrap { position: relative; }

  .notif-bell {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
    color: var(--header-text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .notif-bell:hover { background: rgba(255,255,255,0.24); }
  .notif-bell svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .notif-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; border-radius: 8px;
    background: #f26666; color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; line-height: 1;
  }
  .notif-badge:empty { display: none; }

  .notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 340px; max-height: 420px; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 300; display: none;
  }
  .notif-dropdown.open { display: block; }

  .notif-dropdown-header {
    padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
    font-size: 13px; font-weight: 650;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .notif-mark-all-btn {
    font-family: inherit; font-size: 11px; font-weight: 650; color: var(--accent);
    background: none; border: none; cursor: pointer; padding: 2px; white-space: nowrap;
  }
  .notif-mark-all-btn:hover { color: var(--accent-strong); }
  .notif-mark-all-btn:disabled { color: var(--text-faint); cursor: default; }

  .notif-browser-toggle-row { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
  .notif-browser-toggle-label {
    display: flex; align-items: center; gap: 8px; font-size: 11.5px;
    color: var(--text-secondary); cursor: pointer;
  }

  .notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
    transition: background .12s;
  }
  .notif-item:last-child { border-bottom: none; }
  .notif-item.unread { background: rgba(59,130,246,0.06); }
  :root[data-theme="dark"] .notif-item.unread { background: rgba(59,130,246,0.1); }

  .notif-medal {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex: none; margin-top: 2px;
  }
  .notif-medal.bronze { background: linear-gradient(135deg, #CD7F32, #A0522D); }
  .notif-medal.silver { background: linear-gradient(135deg, #E0E0E0, #BDBDBD); }
  .notif-medal.gold { background: linear-gradient(135deg, #FFD700, #FFC107); }
  .notif-medal.diamond { background: linear-gradient(135deg, #B9F2FF, #7DF9FF); }

  .notif-body { flex: 1; min-width: 0; }
  .notif-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notif-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
  .notif-time { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

  .notif-read-btn {
    font-size: 10px; color: var(--accent); background: none; border: none;
    cursor: pointer; padding: 2px 0; flex: none; white-space: nowrap; margin-top: 2px;
  }
  .notif-read-btn:hover { text-decoration: underline; }

  .notif-empty { padding: 24px 14px; text-align: center; font-size: 12px; color: var(--text-faint); }

  /* ── Upload time tag ───────────────────────────────── */
  .upload-time-tag {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 4px;
    background: var(--bg-card-hover); color: var(--text-secondary);
    margin-left: 6px; vertical-align: middle;
  }

  /* ── Kennzahlen detail pages ───────────────────────── */
  .kz-detail-hero {
    display: flex; align-items: center; gap: 14px; padding: 18px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 16px; box-shadow: var(--shadow-card); margin-top: 18px;
  }
  .kz-detail-hero .kz-hero-badge {
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
  }
  .kz-detail-hero .kz-hero-badge svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .kz-detail-hero h2 { margin: 0; font-size: 19px; }
  .kz-detail-hero p { margin: 4px 0 0; color: var(--text-faint); font-size: 13px; }

  .kz-section {
    margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 14px; padding: 16px 18px;
  }
  .kz-section h3 {
    margin: 0 0 10px; font-size: 12.5px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-faint); font-weight: 700;
  }
  .kz-section h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-primary); }
  .kz-section h4:first-child { margin-top: 0; }
  .kz-section p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
  .kz-section p:last-child { margin-bottom: 0; }

  .kz-formula-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
  .kz-formula-label:first-child { margin-top: 0; }
  .kz-formula {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--bg-page); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 10px 14px; font-size: 12.5px;
    color: var(--text-primary); margin: 0 0 6px; overflow-x: auto; white-space: pre;
  }

  .kz-ampel-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 4px 0 10px; }
  .kz-ampel-bar span { flex: 1; }
  .kz-ampel-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4px; }
  .kz-ampel-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
  .kz-ampel-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .kz-ampel-legend-range { color: var(--text-faint); font-variant-numeric: tabular-nums; }

  .kz-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; }
  .kz-list li { margin-bottom: 2px; }

  .kz-combo-row { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
  .kz-combo-row:first-child { border-top: none; padding-top: 0; }
  .kz-combo-cond { flex: 1; font-size: 13px; font-weight: 650; color: var(--text-primary); }
  .kz-combo-result { flex: 1.4; font-size: 13px; color: var(--text-secondary); }

  .kz-table-wrap { overflow-x: auto; }
  .kz-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
  .kz-table th, .kz-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
  .kz-table th { color: var(--text-faint); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; }

  .kz-callout {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--accent-soft-strong);
    font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin-top: 14px;
  }
  .kz-callout svg { width: 16px; height: 16px; flex: none; margin-top: 1px; stroke: var(--accent); fill: none; stroke-width: 1.8; }

  .kz-rpm-no-data {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 22px 16px; color: var(--text-faint); font-size: 13px;
  }

  /* ── Channel Detail: Kennzahlen-Auswertung + View-Jail-Status ──── */
  .kz-eval-list {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 4px 16px; box-shadow: var(--shadow-card);
  }
  .kz-eval-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
  }
  .kz-eval-row:last-child { border-bottom: none; }
  .kz-eval-label { flex: 1 1 140px; font-size: 13px; font-weight: 650; color: var(--text-primary); cursor: pointer; }
  .kz-eval-label:hover { color: var(--accent); }
  .kz-eval-value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); flex: 0 0 auto; }
  .kz-eval-badge {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff;
    white-space: nowrap;
  }
  .kz-eval-na { color: var(--text-faint); font-style: italic; }

  .vj-status-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 18px 18px 20px; box-shadow: var(--shadow-card);
  }
  .vj-status-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .vj-status-badge { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; color: #fff; }
  .vj-status-plateau { font-size: 15px; font-weight: 700; color: var(--text-primary); }
  .vj-status-desc { font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.55; }
  .vj-status-suggestions { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }

  .trend-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px 16px 18px; box-shadow: var(--shadow-card);
  }
  .trend-metric-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .trend-metric-tab {
    font-family: inherit; font-size: 11.5px; font-weight: 650; color: var(--text-secondary);
    background: var(--bg-card-hover); border: 1px solid var(--border-subtle); border-radius: 999px;
    padding: 5px 12px; cursor: pointer;
  }
  .trend-metric-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .trend-chart-wrap { margin-top: 14px; }
  .trend-svg { width: 100%; height: 160px; display: block; overflow: visible; }
  .trend-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
  .trend-area { fill: var(--accent-soft); stroke: none; }
  .trend-gridline { stroke: var(--border-subtle); stroke-width: 1; }
  .trend-dot { fill: var(--accent); }
  .trend-stats-row { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }
  .trend-current-value { font-size: 20px; font-weight: 750; color: var(--text-primary); margin-top: 2px; }

  .tiktok-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
  .tiktok-channel-card {
    position: relative;
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px;
  }
  .tiktok-channel-head { display: flex; align-items: center; gap: 8px; }
  .tiktok-channel-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--tiktok-brand-soft);
    display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; color: var(--tiktok-brand);
  }
  .tiktok-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .tiktok-channel-name {
    font-size: 13.5px; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tiktok-channel-remove {
    flex: none; background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 4px; display: flex; border-radius: 6px;
  }
  .tiktok-channel-remove:hover { color: var(--accent); background: var(--bg-card-hover); }
  .tiktok-connected-badge, .tiktok-disconnected-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none;
  }
  .tiktok-connected-badge { background: rgba(66, 196, 122, 0.16); color: #2f9e5c; }
  .tiktok-disconnected-badge { background: var(--bg-card-hover); color: var(--text-faint); }
  .tiktok-kpi-row { display: flex; gap: 14px; }
  .tiktok-kpi-item { flex: 1; min-width: 0; }
  .tiktok-kpi-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.02em; }
  .tiktok-kpi-value { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
  .tiktok-channel-actions { display: flex; gap: 8px; }

  .channel-status-dot {
    position: absolute; top: 12px; right: 12px; width: 10px; height: 10px;
    border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-card);
  }

  .tile-sparkline-slot { display: block; width: 100%; height: 26px; margin-top: 8px; }
  .tile-sparkline { width: 100%; height: 100%; display: block; }
  .tile-sparkline path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
  .tile-sparkline.tiktok path { stroke: var(--tiktok-brand, var(--accent)); }

  .tile-pin-btn {
    position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-card-hover); border: 1px solid var(--border-subtle); color: var(--text-faint);
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0;
  }
  .tile-pin-btn:hover { color: var(--accent); }
  .tile-pin-btn.pinned { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  .tile-select-checkbox {
    position: absolute; bottom: 10px; left: 10px; width: 18px; height: 18px; z-index: 2; cursor: pointer;
  }

  .health-score-badge {
    position: absolute; bottom: 10px; right: 10px; min-width: 26px; height: 20px; padding: 0 6px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 750; color: #fff; z-index: 2;
  }
  .health-score-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .health-score-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
  .health-score-headline { display: flex; align-items: center; gap: 12px; }
  .health-score-headline-value { font-size: 30px; font-weight: 800; }
  .health-score-headline-label { font-size: 11.5px; color: var(--text-faint); }

  .bulk-action-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--bg-card-hover); border: 1px solid var(--border-subtle);
  }
  .bulk-action-count { font-size: 12px; font-weight: 650; color: var(--text-secondary); flex: none; }
  .bulk-goal-field { display: flex; align-items: center; gap: 6px; flex: none; }
  .bulk-goal-field input {
    width: 90px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-subtle);
    background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12px;
  }

  .compare-picker-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px;
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; cursor: pointer;
  }
  .compare-picker-item.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
  .compare-picker-checkbox {
    width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong);
    flex: none; display: flex; align-items: center; justify-content: center; color: #fff;
  }
  .compare-picker-item.selected .compare-picker-checkbox { background: var(--accent); border-color: var(--accent); }
  .compare-picker-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compare-picker-platform-tag, .platform-tag {
    flex: none; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--bg-card-hover); color: var(--text-faint);
  }
  .compare-picker-platform-tag.tiktok, .platform-tag.tiktok {
    background: var(--tiktok-brand-soft); color: var(--tiktok-brand);
  }

  .compare-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table { border-collapse: collapse; width: 100%; min-width: 460px; }
  .compare-table th, .compare-table td {
    padding: 10px 14px; text-align: left; font-size: 12.5px; border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .compare-table th { font-weight: 700; color: var(--text-primary); background: var(--bg-card); position: sticky; top: 0; }
  .compare-table .compare-row-label { color: var(--text-secondary); font-weight: 600; font-variant-numeric: normal; }
  .compare-table td.compare-best { color: var(--accent); font-weight: 750; }
  .compare-table .compare-na { color: var(--text-faint); font-style: italic; }

  .cmdk-overlay {
    position: fixed; inset: 0; background: rgba(20, 15, 15, 0.45); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; z-index: 1000;
  }
  .cmdk-overlay[hidden] { display: none; }
  .cmdk-modal {
    width: 100%; max-width: 560px; max-height: 70vh; background: var(--bg-card);
    border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .cmdk-input-row {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle); color: var(--text-faint); flex: none;
  }
  .cmdk-input-row input {
    flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--text-primary);
    font-family: inherit; font-size: 15px;
  }
  .cmdk-esc-hint {
    font-family: inherit; font-size: 10.5px; font-weight: 700; color: var(--text-faint);
    background: var(--bg-card-hover); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 2px 6px;
  }
  .cmdk-results { overflow-y: auto; padding: 6px; }
  .cmdk-group-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-faint); padding: 10px 10px 4px;
  }
  .cmdk-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px;
    cursor: pointer; color: var(--text-primary);
  }
  .cmdk-item.active { background: var(--accent-soft); }
  .cmdk-item-icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
  .cmdk-item-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmdk-item-tag {
    flex: none; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--bg-card-hover); color: var(--text-faint);
  }
  .cmdk-item-tag.tiktok { background: var(--tiktok-brand-soft); color: var(--tiktok-brand); }
  .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px; gap: 12px; }
  .empty-state-icon-circle {
    width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none;
  }
  .empty-state-icon-circle svg { width: 26px; height: 26px; }
  .empty-state-text { font-size: 12.5px; color: var(--text-faint); max-width: 260px; line-height: 1.5; margin: 0; }

  .revenue-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px 18px 18px; box-shadow: var(--shadow-card);
  }
  .revenue-figures { display: flex; gap: 22px; flex-wrap: wrap; }
  .revenue-figure-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.02em; }
  .revenue-figure-value { font-size: 20px; font-weight: 750; color: var(--text-primary); margin-top: 2px; }
  .revenue-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }
  .revenue-connected-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: rgba(66, 196, 122, 0.16); color: #2f9e5c; margin-left: 8px;
  }

  .valuation-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px 18px 18px; box-shadow: var(--shadow-card);
  }
  .valuation-headline { font-size: 26px; font-weight: 800; color: var(--text-primary); margin-top: 4px; }
  .valuation-range { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
  .valuation-basis { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }
  .valuation-gauge-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .valuation-gauge { width: 64px; height: 64px; transform: rotate(-90deg); overflow: visible; flex: none; }
  .valuation-gauge-track { fill: none; stroke: var(--border-subtle); stroke-width: 10; }
  .valuation-gauge-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 500ms ease; }
  .valuation-gauge-multiple { font-size: 16px; font-weight: 750; color: var(--text-primary); }
  .valuation-gauge-caption { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

  .trend-forecast { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
  .trend-forecast-label { font-size: 11.5px; font-weight: 650; color: var(--text-secondary); }
  .trend-forecast-row { display: flex; gap: 8px; margin-top: 8px; }
  .trend-forecast-row input {
    flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-subtle);
    background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 13px;
  }
  .trend-forecast-result { font-size: 12.5px; color: var(--text-secondary); margin-top: 10px; line-height: 1.5; }

  .roi-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px 18px 18px; box-shadow: var(--shadow-card);
  }
  .roi-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
  .roi-input-field label { display: block; font-size: 11px; font-weight: 650; color: var(--text-secondary); margin-bottom: 4px; }
  .roi-input-field input, .roi-input-field select {
    width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-subtle);
    background: var(--bg-page); color: var(--text-primary); font-family: inherit; font-size: 13px;
  }
  .roi-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
  .roi-result-item { background: var(--bg-card-hover); border-radius: 10px; padding: 10px 12px; }
  .roi-result-label { font-size: 10.5px; color: var(--text-faint); }
  .roi-result-value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
  .roi-result-value.positive { color: #42c47a; }
  .roi-result-value.negative { color: #e2555f; }
  .roi-note { font-size: 11px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }

  .settings-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 16px 18px 18px; box-shadow: var(--shadow-card);
  }
  .settings-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
  .settings-input-field label { display: block; font-size: 11px; font-weight: 650; color: var(--text-secondary); margin-bottom: 4px; }
  .settings-input-field input {
    width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-subtle);
    background: var(--bg-page); color: var(--text-primary); font-family: inherit; font-size: 13px;
  }
  .settings-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .settings-custom-badge { font-size: 10.5px; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
  .settings-note { font-size: 11px; color: var(--text-faint); margin-top: 10px; line-height: 1.5; }

  .rhythm-summary { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
  .rhythm-grid { display: flex; gap: 4px; margin-top: 8px; }
  .rhythm-cell {
    flex: 1; min-width: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 11px; font-weight: 750; color: #fff;
  }
  .rhythm-cell-met { background: #42c47a; }
  .rhythm-cell-missed { background: #e2555f; }
  .rhythm-cell-nogoal { background: var(--bg-card-hover); color: var(--text-faint); }
  .rhythm-week-labels { display: flex; gap: 4px; margin-top: 4px; }
  .rhythm-week-labels span { flex: 1; min-width: 0; text-align: center; font-size: 9.5px; color: var(--text-faint); }

  .uploadtime-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .uploadtime-row { display: flex; align-items: center; gap: 8px; }
  .uploadtime-row-label { width: 100px; flex: none; font-size: 11.5px; color: var(--text-secondary); }
  .uploadtime-row-track { flex: 1; min-width: 0; height: 8px; border-radius: 4px; background: var(--bg-card-hover); overflow: hidden; }
  .uploadtime-row-fill { height: 100%; background: var(--accent); border-radius: 4px; }
  .uploadtime-row-fill.best { background: #42c47a; }
  .uploadtime-row-meta { width: 100px; flex: none; text-align: right; font-size: 10.5px; color: var(--text-faint); }
  .uploadtime-recommendation { font-size: 13.5px; font-weight: 700; margin-top: 14px; color: var(--text-primary); }
  .uploadtime-current { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

  .activity-log-form { display: flex; gap: 8px; align-items: flex-start; }
  .activity-log-form textarea {
    flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-subtle);
    background: var(--bg-page); color: var(--text-primary); font-family: inherit; font-size: 13px;
    resize: vertical; min-height: 40px;
  }
  .activity-log-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .activity-log-entry {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 10px; background: var(--bg-card-hover); border: 1px solid var(--border-subtle);
  }
  .activity-log-entry-body { flex: 1; min-width: 0; }
  .activity-log-entry-text { font-size: 13px; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
  .activity-log-entry-time { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
  .activity-log-entry-delete {
    flex: none; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px;
  }
  .activity-log-entry-delete:hover { color: var(--accent); }

  /* ── J.A.R.V.I.S. — deliberately self-contained dark theme, independent
     of the app's light/dark var(--...) system. Everything is scoped under
     .novi-studio-view so nothing here leaks into the rest of the app, and
     nothing from the app's theme leaks in here — this is meant to look
     like a distinct product, not a themed variant of the old workflow. ── */
  /* ── Admin Terminal & Unterseiten im Novi-Look ────────────────────
     Diese Seiten hängen an der Novi-Studio-Homepage, deshalb tragen sie
     dasselbe dunkelviolette Design wie das Studio. Statt Dutzende
     Einzelregeln zu überschreiben, wird hier die Farbpalette im Scope
     neu belegt — alle Bausteine (.wizard-card, .btn, .tile, .networth-*)
     lesen ohnehin nur diese Variablen und ziehen automatisch mit.
     Gleiche :not([hidden])-Falle wie bei .novi-studio-view: ohne sie
     gewänne "display" gegen das UA-[hidden] und der dunkle Screen läge
     dauerhaft über der ganzen Seite. ── */
  .novi-dark-page {
    --bg-page: #14122400;
    --bg-card: rgba(22, 20, 36, 0.78);
    --bg-card-hover: rgba(31, 28, 50, 0.9);
    --border-subtle: rgba(139, 92, 246, 0.18);
    --border-strong: rgba(139, 92, 246, 0.34);
    --text-primary: #ffffff;
    --text-secondary: #c9c6de;
    --text-faint: #8a87a6;
    --accent: #a855f7;
    --accent-strong: #c4b5fd;
    --accent-soft: rgba(139, 92, 246, 0.12);
    --accent-soft-strong: rgba(139, 92, 246, 0.2);
    --shadow-card: 0 18px 44px -30px rgba(139, 92, 246, 0.75);

    position: fixed; inset: 0; z-index: 300; overflow-y: auto;
    color: var(--nv-text);
    background:
      radial-gradient(circle at 20% 12%, rgba(139, 92, 246, 0.17), transparent 46%),
      radial-gradient(circle at 84% 86%, rgba(168, 85, 247, 0.12), transparent 52%),
      var(--nv-page);
  }
  .novi-dark-page:not([hidden]) { display: block; padding: 30px 28px 60px; }
  .novi-dark-page > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .novi-dark-page h1 { color: var(--nv-text-strong); }
  .novi-dark-page .sub { color: var(--nv-text-dim); }
  .novi-dark-page .back-btn { background: rgba(139, 92, 246, 0.1); }
  .novi-dark-page .back-btn:hover { background: rgba(139, 92, 246, 0.2); }
  .novi-dark-page .back-btn svg { stroke: #c4b5fd; }
  .novi-dark-page .tile { backdrop-filter: blur(6px); }
  .novi-dark-page .tile:hover { border-color: rgba(168, 85, 247, 0.5); }
  .novi-dark-page .tile .badge svg { stroke: #c4b5fd; }
  .novi-dark-page .tile .label { color: var(--nv-text-strong); }
  .novi-dark-page .tile .sub { color: var(--nv-text-dim2); }
  .novi-dark-page .btn:hover { border-color: rgba(168, 85, 247, 0.5); }
  /* Formularfelder erben die Variablen nicht überall — hier explizit. */
  .novi-dark-page select,
  .novi-dark-page input,
  .novi-dark-page textarea {
    background: rgba(10, 10, 18, 0.55); color: var(--nv-text);
    border-color: rgba(139, 92, 246, 0.22);
  }
  .novi-dark-page table { color: #c9c6de; }
  .novi-dark-page th { color: var(--nv-text); }

  /* ── J.A.R.V.I.S. Homepage (Auswahl Studio / Admin Terminal) ──
     Eigener Vollbild-Screen im Novi-Look. Dieselbe :not([hidden])-Falle
     wie bei .novi-studio-view weiter unten: ohne sie gewinnt "display"
     gegen das UA-[hidden] und der dunkle Screen läge dauerhaft über der
     ganzen Seite. ── */
  .novi-entry-view {
    position: fixed; inset: 0; z-index: 300;
    background:
      radial-gradient(circle at 22% 18%, rgba(139, 92, 246, 0.2), transparent 46%),
      radial-gradient(circle at 82% 82%, rgba(168, 85, 247, 0.14), transparent 52%),
      var(--nv-page);
    color: var(--nv-text); font-family: inherit;
    overflow-y: auto;
  }
  /* Studio-Ansicht als Hintergrund der Startseite und der Preisseite:
     Timeline, Clips und Wellenform aus dem Bildmaterial, unten
     eingeblendet und nach oben ausgeblendet, damit die Schrift darüber
     ruhig bleibt. Rein dekorativ, darum pointer-events: none. */
  .novi-entry-view::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 68%;
    background: url("/hub-assets/novi-bg-timeline.webp") center bottom / cover no-repeat;
    opacity: 0.34;
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.75) 34%, transparent 92%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.75) 34%, transparent 92%);
    pointer-events: none;
  }
  /* Zusätzlicher Schleier: hält den Kontrast der Karten oben drüber. */
  .novi-entry-view::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(10, 10, 18, 0.86) 0%, rgba(10, 10, 18, 0.45) 55%, transparent 78%);
  }
  .novi-entry-view > * { position: relative; z-index: 1; }
  .novi-entry-view:not([hidden]) {
    display: flex; align-items: center; justify-content: center; padding: 28px;
  }
  .novi-entry-back {
    position: absolute; top: 22px; left: 22px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.22);
    color: #b9a9f0; border-radius: 10px; padding: 8px 14px 8px 10px;
    font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
    transition: background .16s ease;
  }
  .novi-entry-back:hover { background: rgba(139, 92, 246, 0.18); }
  .novi-entry-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .novi-entry-inner { width: 100%; max-width: 880px; text-align: center; }
  .novi-entry-head { margin-bottom: 40px; }
  /* ══ Novi-Emblem ══
     Ersetzt die frühere flache Kachel mit Sternchen. Aufgebaut aus vier
     Ebenen: atmende Aura, rotierender Lichtring als Rand, dunkler Kern
     mit Orbit-Grafik und ein umlaufender Funke. Größe kommt aus --s,
     dieselbe Markup-Einheit trägt darum Startseite und Sidebar.
     Animiert werden nur transform und opacity — das läuft auf der GPU
     und kostet praktisch keine Rechenzeit. ══ */
  .novi-mark {
    --s: 62px;
    position: relative; flex: none; display: inline-block;
    width: var(--s); height: var(--s);
  }
  /* Lichtwolke hinter dem Zeichen. Reine Deko, darum pointer-events: none. */
  .novi-mark-aura {
    position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
    background:
      radial-gradient(circle at 36% 40%, rgba(124, 58, 237, 0.45), transparent 58%),
      radial-gradient(circle at 70% 60%, rgba(34, 211, 238, 0.32), transparent 56%);
    filter: blur(5px);
    animation: novi-mark-breathe 4.2s ease-in-out infinite;
  }
  /* Das Zeichen ist echt freigestellt: die Helligkeit des erzeugten
     Bildes wurde in einen Alphakanal umgerechnet, der Leuchtschein
     bleibt dabei erhalten. Ein mix-blend-mode kam nicht in Frage —
     .novi-entry-inner hat z-index und bildet damit einen eigenen
     Stapelkontext, in dem "screen" gegen Transparenz statt gegen den
     Hintergrund blendet und ein schwarzer Kasten stehen bliebe. */
  .novi-mark-img {
    position: relative; display: block;
    width: 100%; height: 100%; object-fit: contain;
  }
  @keyframes novi-mark-breathe {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.09); }
  }
  /* Ohne Bewegung bleibt das Zeichen als ruhiges Logo bestehen. */
  @media (prefers-reduced-motion: reduce) {
    .novi-mark-aura { animation: none; }
  }

  .novi-entry-logo {
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
  }
  /* Die alte 30px-Regel galt dem frueheren Icon-SVG und schrumpfte das
     neue Zeichen mit. Das Zeichen bringt seine Groesse ueber --s mit. */
  .novi-entry-logo > svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .novi-entry-title {
    font-size: 40px; font-weight: 850; letter-spacing: -0.02em; line-height: 1.1;
    background: linear-gradient(120deg, #fff 20%, #c4b5fd);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .novi-entry-badge {
    display: inline-block; margin-top: 12px; padding: 5px 13px; border-radius: 999px;
    background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.32);
    color: var(--nv-vio-text); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .novi-entry-subtitle { margin: 16px auto 0; max-width: 460px; font-size: 14.5px; color: var(--nv-text-dim); line-height: 1.6; }

  .novi-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .novi-entry-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 26px 24px; border-radius: 20px; text-align: left; cursor: pointer;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.13), rgba(22, 20, 36, 0.9) 62%);
    border: 1px solid rgba(139, 92, 246, 0.22); color: inherit; font: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .novi-entry-card:hover {
    transform: translateY(-3px); border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 22px 48px -26px rgba(168, 85, 247, 0.9);
  }
  .novi-entry-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 4px;
    background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(139, 92, 246, 0.28);
  }
  .novi-entry-card-icon svg { width: 22px; height: 22px; stroke: #c4b5fd; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .novi-entry-card-title { font-size: 20px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-entry-card-sub { font-size: 13px; color: var(--nv-text-dim); line-height: 1.6; flex: 1; }
  .novi-entry-card-cta {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
    font-size: 13px; font-weight: 700; color: var(--nv-vio-text);
  }
  .novi-entry-card-cta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-entry-card:hover .novi-entry-card-cta { color: #ddd3ff; }

  @media (max-width: 760px) {
    .novi-entry-view:not([hidden]) { align-items: flex-start; padding: 74px 16px 32px; }
    .novi-entry-grid { grid-template-columns: 1fr; gap: 14px; }
    .novi-entry-title { font-size: 30px; }
    .novi-entry-head { margin-bottom: 28px; }
    .novi-entry-card { padding: 20px 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .novi-entry-card:hover { transform: none; }
  }


  /* ══ Startseite — Neon-Glassmorphism ═══════════════════════════════════
     Sehr dunkler Mitternachtsgrund, violette und cyanfarbene Neonakzente,
     halbtransparente Glaskarten mit Verlaufsrand, dezente Leuchtschleier
     und eine Datenvisualisierung im Hintergrund.

     Alles hier ist rein optisch. Jede Schaltfläche, jede Kennung und jeder
     Ereignis-Handler bleibt unverändert; die Dekoration liegt in eigenen
     Ebenen mit pointer-events: none und aria-hidden.

     Ausschliesslich auf #view-studio-gate gescoped — die Preisseite nutzt
     dieselbe .novi-entry-view und darf davon nichts abbekommen. ══ */
  #view-studio-gate {
    --neon-violet: #7C3AED;
    --neon-lilac:  #A78BFA;
    --neon-cyan:   #22D3EE;
    --neon-ink:    #06040F;
    /* Zeigerposition für die Parallaxe, -1 bis 1. Ohne Zeiger bleibt 0. */
    --px: 0; --py: 0;
    background: var(--neon-ink);
    /* Nur waagerecht beschneiden — ein pauschales overflow: hidden hätte
       das senkrechte Scrollen mit abgeschaltet. */
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* Erzeugte Hintergrundgrafik als unterste Ebene. */
  #view-studio-gate::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("/hub-assets/novi-gate-bg.webp") center / cover no-repeat;
    opacity: 0.85; height: auto;
    mask-image: none; -webkit-mask-image: none;
  }
  /* Schleier, der die Mitte beruhigt, damit der Inhalt trägt. */
  #view-studio-gate::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 55% at 50% 46%, rgba(6, 4, 15, 0.9) 0%, rgba(6, 4, 15, 0.5) 45%, transparent 78%),
      linear-gradient(to bottom, rgba(6, 4, 15, 0.75), transparent 28%, transparent 68%, rgba(6, 4, 15, 0.9));
  }
  #view-studio-gate .novi-entry-inner { padding-bottom: 54px; }

  .novi-splash-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  #view-studio-gate .novi-splash-fx { z-index: 0; }

  /* Leuchtschleier: drei langsam driftende Farbwolken. Sie tragen die
     mystische Tiefe, ohne dass ein Verlauf als Fläche sichtbar wird. */
  .novi-splash-aurora { position: absolute; border-radius: 50%; filter: blur(90px); }
  .novi-splash-aurora.a1 {
    width: 52vw; height: 52vw; left: -14vw; top: -12vw;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 68%);
    animation: noviAuroraDrift 19s ease-in-out infinite alternate;
  }
  .novi-splash-aurora.a2 {
    width: 44vw; height: 44vw; right: -12vw; top: 6vw;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 66%);
    animation: noviAuroraDrift 23s ease-in-out infinite alternate-reverse;
  }
  .novi-splash-aurora.a3 {
    width: 60vw; height: 40vw; left: 22vw; bottom: -18vw;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.28), transparent 70%);
    animation: noviAuroraDrift 27s ease-in-out infinite alternate;
  }
  @keyframes noviAuroraDrift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.75; }
    to   { transform: translate3d(4%, 3%, 0) scale(1.14); opacity: 1; }
  }

  /* Sternfeld. */
  .novi-splash-stars {
    position: absolute; inset: 0;
    background-image:
      radial-gradient(1.3px 1.3px at 12% 18%, rgba(255,255,255,0.9), transparent),
      radial-gradient(1.1px 1.1px at 68% 12%, rgba(196,181,253,0.85), transparent),
      radial-gradient(1.5px 1.5px at 86% 52%, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.2px 1.2px at 28% 74%, rgba(165,243,252,0.8), transparent),
      radial-gradient(1.3px 1.3px at 78% 86%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1px 1px at 44% 34%, rgba(216,180,254,0.7), transparent);
    background-size: 380px 380px;
    animation: noviStarBreath 5.5s ease-in-out infinite alternate;
    transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 6px), 0);
  }
  @keyframes noviStarBreath { from { opacity: 0.4; } to { opacity: 0.95; } }

  /* Feines Datenraster, das sich mit dem Zeiger verschiebt. */
  .novi-splash-grid {
    position: absolute; inset: -6%;
    background-image:
      linear-gradient(rgba(124, 58, 237, 0.13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 211, 238, 0.09) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 10%, transparent 76%);
    transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 14px), 0);
  }

  /* Radarringe hinter dem Zeichen — die Datenvisualisierung des Themas. */
  .novi-splash-orbit {
    position: absolute; left: 50%; top: 38%; border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.22);
    transform: translate(-50%, -50%);
  }
  .novi-splash-orbit.o1 { width: 340px; height: 340px; }
  .novi-splash-orbit.o2 {
    width: 520px; height: 520px; border-color: rgba(34, 211, 238, 0.16);
    border-style: dashed; animation: noviOrbitTurn 48s linear infinite;
  }
  .novi-splash-orbit.o3 { width: 720px; height: 720px; border-color: rgba(124, 58, 237, 0.12); }
  @keyframes noviOrbitTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }

  /* Waagerechter Abtaststreifen — ruhiges Lebenszeichen des Systems. */
  .novi-splash-scan {
    position: absolute; left: 0; right: 0; height: 220px;
    background: linear-gradient(to bottom, transparent, rgba(124, 58, 237, 0.11), rgba(34, 211, 238, 0.07), transparent);
    animation: noviScanSweep 9s ease-in-out infinite;
  }
  @keyframes noviScanSweep { 0% { top: -220px; } 100% { top: 100%; } }

  .novi-splash-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 92% 86% at 50% 50%, transparent 46%, rgba(3, 2, 8, 0.82) 100%);
  }

  /* ── Inhalt ───────────────────────────────────────────────────────── */
  #view-studio-gate .novi-entry-inner { z-index: 1; }
  #view-studio-gate .novi-entry-title {
    font-size: clamp(42px, 6.6vw, 82px); font-weight: 800;
    letter-spacing: -0.035em; line-height: 1.02;
    background: linear-gradient(104deg, #ffffff 0%, #d8ccff 38%, #a78bfa 64%, #67e8f9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 26px rgba(124, 58, 237, 0.55));
    text-shadow: none;
  }
  #view-studio-gate .novi-entry-badge {
    border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.08); color: #a5f3fc;
    letter-spacing: 0.2em; text-transform: uppercase;
    box-shadow: 0 0 22px -6px rgba(34, 211, 238, 0.7), inset 0 0 18px -10px rgba(34, 211, 238, 0.9);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  #view-studio-gate .novi-entry-subtitle { color: var(--nv-text-mut2); }

  /* ── Glaskarten mit Verlaufsrand ──────────────────────────────────────
     Der Rand entsteht aus einem Verlauf, der über eine Maske nur als
     Kontur stehen bleibt — eine echte 1-px-Linie mit Farbverlauf, die
     border-image auf gerundeten Ecken nicht sauber hinbekommt. */
  #view-studio-gate .novi-entry-card {
    position: relative; border-radius: 20px; border: none;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      0 24px 60px -28px rgba(0, 0, 0, 0.95),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.09);
    transform: none;
    transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, background .22s ease;
    overflow: hidden;
  }
  #view-studio-gate .novi-entry-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(140deg, rgba(196, 181, 253, 0.95), rgba(34, 211, 238, 0.6) 40%, rgba(255, 255, 255, 0.07) 74%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  /* Lichtschein, der beim Überfahren von oben in die Karte wandert. */
  #view-studio-gate .novi-entry-card::after {
    content: ""; position: absolute; left: -30%; top: -60%; width: 60%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    transform: translateX(-120%); transition: transform .55s ease;
    pointer-events: none;
  }
  #view-studio-gate .novi-entry-card:hover,
  #view-studio-gate .novi-entry-card:focus-visible {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.07);
    box-shadow:
      0 34px 76px -30px rgba(0, 0, 0, 0.95),
      0 0 46px -12px rgba(124, 58, 237, 0.65),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  }
  #view-studio-gate .novi-entry-card:hover::after,
  #view-studio-gate .novi-entry-card:focus-visible::after { transform: translateX(320%); }
  #view-studio-gate .novi-entry-grid > .novi-entry-card:nth-child(2)::before {
    background: linear-gradient(140deg, rgba(103, 232, 249, 0.95), rgba(167, 139, 250, 0.55) 42%, rgba(255, 255, 255, 0.07) 76%);
  }
  #view-studio-gate .novi-entry-grid > .novi-entry-card:nth-child(2):hover,
  #view-studio-gate .novi-entry-grid > .novi-entry-card:nth-child(2):focus-visible {
    box-shadow:
      0 34px 76px -30px rgba(0, 0, 0, 0.95),
      0 0 46px -12px rgba(34, 211, 238, 0.6),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  }
  #view-studio-gate .novi-entry-card-icon {
    border-radius: 14px; border: 1px solid rgba(167, 139, 250, 0.28);
    background: rgba(124, 58, 237, 0.14);
    box-shadow: inset 0 0 22px -10px rgba(167, 139, 250, 0.9);
  }
  #view-studio-gate .novi-entry-card-title { letter-spacing: -0.015em; }
  #view-studio-gate .novi-entry-card-cta { color: var(--nv-vio-text); }

  /* Stufennummer als ruhige Systembeschriftung. */
  .novi-splash-stage {
    position: absolute; top: 16px; right: 18px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
    color: rgba(196, 181, 253, 0.45);
  }

  /* Auth-Leiste als Glas-Pillen. */
  #view-studio-gate .novi-entry-auth-btn {
    position: relative; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  #view-studio-gate .novi-entry-auth-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, 0.7);
    background: rgba(124, 58, 237, 0.18);
    box-shadow: 0 0 26px -8px rgba(124, 58, 237, 0.9);
  }
  #view-studio-gate .novi-entry-auth-btn.primary {
    border-color: transparent; color: var(--nv-text-strong);
    background: linear-gradient(120deg, #7C3AED, #a855f7 55%, #22D3EE);
    box-shadow: 0 0 30px -10px rgba(124, 58, 237, 0.95);
  }
  #view-studio-gate .novi-entry-auth-btn.primary:hover {
    box-shadow: 0 0 42px -8px rgba(124, 58, 237, 1), 0 0 26px -12px rgba(34, 211, 238, 0.9);
  }
  #view-studio-gate .novi-entry-auth-user { color: var(--nv-text-mut2); }

  /* Laufschrift als schmale Glasleiste am Fensterrand. */
  .novi-splash-marquee {
    position: fixed; left: 0; right: 0; bottom: 0;
    overflow: hidden; pointer-events: none;
    border-top: 1px solid rgba(167, 139, 250, 0.16);
    background: rgba(6, 4, 15, 0.55);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 8px 0;
  }
  #view-studio-gate .novi-splash-marquee { z-index: 1; }
  .novi-splash-marquee-track { display: flex; width: max-content; animation: noviSplashMarquee 30s linear infinite; }
  .novi-splash-marquee-track span {
    font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
    color: rgba(167, 139, 250, 0.45); white-space: nowrap; padding-right: 30px;
  }
  @keyframes noviSplashMarquee { to { transform: translate3d(-50%, 0, 0); } }

  /* Das Zeichen bekommt auf dieser Seite einen kräftigeren Schein. */
  #view-studio-gate .novi-entry-logo .novi-mark { --s: 118px; }
  #view-studio-gate .novi-entry-logo .novi-mark-aura {
    inset: -34%;
    background:
      radial-gradient(circle at 40% 42%, rgba(124, 58, 247, 0.6), transparent 60%),
      radial-gradient(circle at 66% 58%, rgba(34, 211, 238, 0.45), transparent 58%);
    filter: blur(10px);
  }

  @media (max-width: 760px) {
    .novi-splash-orbit.o3 { display: none; }
    .novi-splash-orbit.o1 { width: 240px; height: 240px; }
    .novi-splash-orbit.o2 { width: 360px; height: 360px; }
    #view-studio-gate .novi-entry-logo .novi-mark { --s: 84px; }
    #view-studio-gate .novi-entry-inner { padding-bottom: 62px; }
  }

  /* Ohne Bewegung bleibt die Seite vollständig und ruhig lesbar. */
  @media (prefers-reduced-motion: reduce) {
    .novi-splash-aurora, .novi-splash-stars, .novi-splash-orbit.o2, .novi-splash-scan,
    .novi-splash-marquee-track { animation: none; }
    .novi-splash-scan { display: none; }
    .novi-splash-stars, .novi-splash-grid { transform: none; }
    #view-studio-gate .novi-entry-card:hover { transform: none; }
    #view-studio-gate .novi-entry-card::after { display: none; }
  }


  /* Zahlen stehen jetzt unter dem Instrument. */
  .novi-ekpi > .novi-ekpi-value {
    margin-top: 6px; text-align: center;
    font-size: clamp(19px, 2.2vw, 27px); font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--nv-text-strong);
  }
  /* Pfeil und Differenz stehen direkt unter der Zahl. */
  .novi-ekpi > .novi-ekpi-delta {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    margin-top: 3px;
  }
  .novi-ekpi .novi-ekpi-delta-note {
    font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(167, 139, 250, 0.55);
  }
  /* Nächstes Achievement unter der Abonnenten-Kachel. Dieselbe
     Bernstein-Farbe wie die Zielmarke in der Kurve darüber. */
  .novi-ekpi > .novi-ekpi-goal {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(251, 191, 36, 0.16);
    font-size: 10.5px; font-weight: 700;
  }
  .novi-ekpi-goal-target { color: rgba(251, 191, 36, 0.95); }
  .novi-ekpi-goal-eta { color: var(--nv-text-mut2); font-weight: 600; }
  .novi-ekpi-goal-eta.is-unknown { color: #7c6ba8; }

  .perf-panel .perf-ring-value { display: block; text-align: center; margin-top: 4px; font-size: 20px; font-weight: 800; color: #fff; }
  .perf-panel .perf-ring-value.value-complete { color: #86efac; }
  .goal-ring-below { text-align: center; margin-top: 4px; }
  .goal-ring-below .goal-ring-value { display: block; font-size: 26px; font-weight: 800; color: #fff; }
  .goal-ring-below .goal-ring-caption { display: block; font-size: 10.5px; color: #a9a2cc; }



  /* ══ Verlaufskurven ═══════════════════════════════════════════════════
     Fläche unter der Linie als Verlauf, die Linie selbst leuchtend, am
     Ende ein pulsierender Punkt für den aktuellen Stand. Grün bei
     steigender, rot bei fallender Reihe. ══ */
  .novi-spark-wrap {
    --spark-color: rgba(196, 181, 253, 0.75);
    position: relative; width: 100%; height: 96px;
    display: flex; align-items: center; justify-content: center;
  }
  .novi-spark-wrap.is-up   { --spark-color: #4ade80; }
  .novi-spark-wrap.is-down { --spark-color: #f87171; }
  .novi-spark-wrap.is-flat { --spark-color: rgba(196, 181, 253, 0.7); }
  .novi-spark { width: 100%; height: 100%; display: block; overflow: visible; }

  .novi-spark-grid line { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
  .novi-spark-area { stroke: none; }
  .novi-spark-line {
    fill: none; stroke: var(--spark-color); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px var(--spark-color));
    /* Die Linie zeichnet sich beim Erscheinen von links nach rechts.
       pathLength normiert die Strichlänge, sonst müsste sie gemessen
       werden — das ginge nur mit JavaScript. */
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: noviSparkDraw 1.1s ease-out forwards;
  }
  @keyframes noviSparkDraw { to { stroke-dashoffset: 0; } }

  .novi-spark-dot { fill: var(--spark-color); filter: drop-shadow(0 0 6px var(--spark-color)); }
  .novi-spark-pulse {
    fill: none; stroke: var(--spark-color); stroke-width: 1.6;
    transform-box: fill-box; transform-origin: center;
    animation: noviSparkPulse 2s ease-out infinite;
  }
  @keyframes noviSparkPulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(3.6); opacity: 0; }
  }

  /* Zielmarke: das nächste Achievement. Bewusst in Bernstein statt in der
     Kurvenfarbe — es ist kein Messwert, sondern eine Marke. */
  .novi-spark-goal {
    stroke: rgba(251, 191, 36, 0.7); stroke-width: 1.4; stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
  }
  .novi-spark-goal-label {
    fill: rgba(251, 191, 36, 0.92); font-size: 11px; font-weight: 800;
    font-variant-numeric: tabular-nums; paint-order: stroke;
    stroke: rgba(10, 6, 22, 0.85); stroke-width: 3px; stroke-linejoin: round;
  }

  .novi-spark-wrap.is-empty { border: 1px dashed rgba(139, 92, 246, 0.22); border-radius: 12px; }
  .novi-spark-empty { font-size: 11px; color: #7c6ba8; }

  /* ══ Achievements-Seite ═══════════════════════════════════════════════
     Eigene Klassen (novi-ach-*), damit sich hier nichts mit den KPI- oder
     Workflow-Bausteinen überschneidet. ══ */
  .novi-ach-next {
    position: relative; overflow: hidden;
    padding: 20px 22px; margin-bottom: 16px; border-radius: 18px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(251, 191, 36, 0.14), transparent 60%),
      linear-gradient(160deg, rgba(38, 26, 62, 0.92), rgba(18, 12, 34, 0.95));
    box-shadow: 0 18px 44px -28px rgba(251, 191, 36, 0.5);
  }
  .novi-ach-next.is-done { border-color: rgba(74, 222, 128, 0.3); }
  .novi-ach-next-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(251, 191, 36, 0.9);
  }
  .novi-ach-next.is-done .novi-ach-next-label { color: var(--nv-good-text2); }
  .novi-ach-next-value {
    margin-top: 6px; font-size: clamp(26px, 4vw, 38px); font-weight: 800;
    line-height: 1.05; color: var(--nv-text-strong); font-variant-numeric: tabular-nums;
  }
  .novi-ach-next-value span { font-size: 0.55em; font-weight: 700; color: var(--nv-text-mut2); }
  .novi-ach-next-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-top: 10px;
  }
  .novi-ach-next-remaining { font-size: 13px; font-weight: 700; color: var(--nv-vio-text-soft); }
  .novi-ach-next-eta {
    font-size: 12.5px; font-weight: 800; color: #0b0718;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
  }
  .novi-ach-next-sub { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #8b84ad; }

  .novi-ach-bar {
    position: relative; height: 6px; margin-top: 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.07); overflow: hidden;
  }
  .novi-ach-bar.big { height: 10px; margin-top: 12px; }
  .novi-ach-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #a78bfa, #fbbf24);
  }
  .novi-ach-row.is-done .novi-ach-bar > span { background: linear-gradient(90deg, #22c55e, #4ade80); }

  .novi-ach-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; margin-top: 8px; border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.16);
    background: rgba(24, 16, 44, 0.55);
  }
  .novi-ach-row.is-done {
    border-color: rgba(74, 222, 128, 0.26);
    background: linear-gradient(120deg, rgba(20, 48, 34, 0.55), rgba(24, 16, 44, 0.55));
  }
  .novi-ach-badge {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #0b0718;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
  }
  .novi-ach-row.is-done .novi-ach-badge { background: linear-gradient(135deg, #86efac, #22c55e); }
  .novi-ach-badge.badge-bronze { background: linear-gradient(135deg, #f0b27a, #b9722f); }
  .novi-ach-badge.badge-silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
  .novi-ach-badge.badge-gold   { background: linear-gradient(135deg, #fde68a, #f59e0b); }
  .novi-ach-badge.badge-diamond { background: linear-gradient(135deg, #a5f3fc, #22d3ee); }
  .novi-ach-row-main { flex: 1; min-width: 0; }
  .novi-ach-row-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
  }
  .novi-ach-row-title { font-size: 13.5px; font-weight: 700; color: var(--nv-vio-text-soft); }
  .novi-ach-row-note { font-size: 11.5px; color: var(--nv-text-mut2); font-variant-numeric: tabular-nums; }
  .novi-ach-row.is-done .novi-ach-row-note { color: var(--nv-good-text2); }
  .novi-ach-row-sub { margin-top: 6px; font-size: 10.5px; color: #7c6ba8; }
  .novi-ach-count {
    margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; color: var(--nv-vio-text);
    background: rgba(139, 92, 246, 0.18);
  }
  .novi-ach-empty {
    padding: 22px; border-radius: 16px; font-size: 13px; line-height: 1.6;
    color: var(--nv-text-mut2); border: 1px dashed rgba(139, 92, 246, 0.24);
    background: rgba(24, 16, 44, 0.5);
  }
  /* Ein Abschnitt je Kennzahl (Abonnenten, Long Views). */
  /* Tempo-Prognose in der Monatsziel-Box. */
  .goal-forecast {
    margin-top: 10px; padding: 8px 10px; border-radius: 10px;
    font-size: 11px; line-height: 1.45; text-align: center;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.26);
    color: #ede9fe;
  }
  .goal-forecast b { display: block; font-size: 12px; font-weight: 800; }
  .goal-forecast span { display: block; color: #a9a2cc; margin-top: 2px; }
  .goal-forecast.is-good {
    background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); color: #86efac;
  }
  .goal-forecast.is-quiet {
    background: rgba(255, 255, 255, 0.04); border-color: rgba(139, 92, 246, 0.18); color: #a9a2cc;
  }

  .novi-ach-metric { margin-bottom: 26px; }
  .novi-ach-metric:last-of-type { margin-bottom: 14px; }
  .novi-ach-metric-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    font-size: 15px; font-weight: 800; color: var(--nv-text-strong);
  }
  .novi-ach-metric-head::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.35), transparent);
  }

  @media (max-width: 760px) {
    .novi-ach-next { padding: 16px; }
    .novi-ach-next-row { flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .novi-spark-line { animation: none; stroke-dashoffset: 0; }
    .novi-spark-pulse { animation: none; opacity: 0; }
  }

  /* Hinweiskasten in den Phasenseiten. */
  .novi-hint {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
  }
  .novi-hint-icon { flex: none; margin-top: 1px; }
  .novi-hint-icon svg {
    width: 17px; height: 17px; fill: none; stroke: #fbbf24;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-hint-text { font-size: 12.5px; line-height: 1.6; color: #e8dcc0; }
  .novi-hint-text b { color: #fde68a; }
  .novi-hint-text i { color: #fef3c7; font-style: italic; }

  /* Charakter-Referenzen im Video-Dashboard. */
  .novi-vd-chars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Charakter Studio: eine Karte je Kanal — Kopf mit Profilbild und
     Name, darunter die Hauptfigur mit JSON, mittig darunter die
     Basisfigur. Die inneren Figur-Karten sind dieselben wie im
     Video-Dashboard. */
  .novi-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
  .novi-cs-card { background: rgba(15, 20, 34, 0.72); border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16)); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
  .novi-cs-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
  .novi-cs-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(56, 189, 248, 0.14); color: #7dd3fc; font-weight: 700; font-size: 15px; }
  .novi-cs-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-cs-name { font-weight: 700; font-size: 15px; }
  .novi-cs-handle { font-size: 11.5px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
  .novi-cs-main .novi-vd-char-frame { min-height: 220px; }
  .novi-cs-base { display: flex; justify-content: center; }
  .novi-cs-base .novi-vd-char { max-width: 260px; width: 100%; }
  .novi-vd-char {
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 12px;
    background: rgba(139, 92, 246, 0.07); padding: 8px;
  }
  /* Schachbrett statt einfarbigem Grund: die Novi-Figur ist weiss und
     verschwand auf einfarbigem Grund je nach Motiv. So ist immer
     erkennbar, wo das Bild aufhoert und was transparent ist. */
  .novi-vd-char-frame {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background-color: #6b6480;
    background-image:
      linear-gradient(45deg, rgba(0,0,0,0.22) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.22) 75%),
      linear-gradient(45deg, rgba(0,0,0,0.22) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.22) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
  }
  .novi-vd-char-frame img { width: 100%; height: 100%; object-fit: contain; }
  .novi-vd-char-empty {
    font-size: 10.5px; color: #efeaff; text-align: center; padding: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }
  .novi-vd-char-name { font-size: 11px; font-weight: 700; color: #ddd6fe; text-align: center; }
  .novi-vd-char-copy {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
    padding: 6px 8px; border-radius: 8px;
    background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(139, 92, 246, 0.4); color: var(--nv-vio-text);
    transition: background .14s ease, border-color .14s ease;
  }
  .novi-vd-char-copy:hover { background: rgba(139, 92, 246, 0.3); border-color: rgba(168, 85, 247, 0.7); }
  .novi-vd-char-copy svg {
    width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-vd-char-missing { font-size: 10px; color: #7c6ba8; text-align: center; line-height: 1.4; }

  .novi-studio-view {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--nv-page);
    color: var(--nv-text);
    font-family: inherit;
  }
  /* [hidden] and .novi-studio-view are equal-specificity selectors, so
     without :not([hidden]) here this "display: flex" would win the
     cascade (author stylesheet beats the UA stylesheet's [hidden]{display:
     none} regardless of source order) and the dark overlay would cover
     the entire site — home page included — even while "hidden" is set.
     This is exactly that bug, fixed. */
  .novi-studio-view:not([hidden]) {
    display: flex;
  }

  /* ── Sidebar ── */
  .novi-sidebar {
    flex: none;
    width: 264px;
    height: 100%;
    overflow-y: auto;
    background: var(--nv-sidebar);
    border-right: 1px solid rgba(139, 92, 246, 0.14);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
  }
  .novi-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
  /* .novi-sidebar-logo-icon entfiel mit dem alten Kachel-Logo —
     dort steht jetzt dasselbe .novi-mark-Emblem in klein. */
  .novi-sidebar-logo-text b { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--nv-text-strong); }
  .novi-sidebar-logo-text span { display: block; font-size: 10px; color: #7c7996; margin-top: 1px; }
  .novi-nav-list { display: flex; flex-direction: column; gap: 2px; }
  .novi-nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 9px;
    border: none; background: none; width: 100%; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #a5a2c0;
    transition: background .12s ease, color .12s ease;
  }
  .novi-nav-item:hover { background: rgba(139, 92, 246, 0.1); color: var(--nv-text); }
  .novi-nav-item.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(99, 102, 241, 0.18));
    color: var(--nv-text-strong);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.35);
  }
  .novi-nav-item svg { flex: none; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .novi-sidebar-spacer { flex: 1; min-height: 20px; }
  .novi-assistant-card {
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 14px;
    padding: 14px;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.1), var(--nv-lift-2));
  }
  .novi-assistant-head { display: flex; align-items: center; gap: 10px; }
  .novi-assistant-avatar {
    flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: #1a1a28; display: flex; align-items: center; justify-content: center;
  }
  .novi-assistant-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-assistant-name { font-size: 13px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-assistant-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6ee7a0; margin-top: 1px; }
  .novi-assistant-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
  .novi-assistant-desc { font-size: 11.5px; color: var(--nv-text-dim2); line-height: 1.5; margin: 10px 0 12px; }
  .novi-assistant-btn {
    width: 100%; border: none; border-radius: 9px; padding: 9px;
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong); cursor: pointer;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .novi-assistant-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* ── Main column ── */
  .novi-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; }
  .novi-topbar {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.14);
    position: sticky; top: 0; z-index: 2;
    background: var(--nv-topbar);
    backdrop-filter: blur(8px);
  }
  .novi-topbar-title { display: flex; align-items: center; gap: 10px; }
  .novi-topbar-title h1 {
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--nv-text-strong);
  }
  .novi-topbar-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(139, 92, 246, 0.18); color: var(--nv-vio-text);
    border: 1px solid rgba(139, 92, 246, 0.35);
  }
  .novi-topbar-sub { margin: 5px 0 0; font-size: 13px; color: var(--nv-text-dim); }
  .novi-topbar-sub b { color: var(--nv-vio-text); font-style: italic; font-weight: 600; }
  .novi-topbar-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
  .novi-icon-btn {
    position: relative;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.2); background: rgba(139, 92, 246, 0.06);
    color: var(--nv-text-mut); align-items: center; justify-content: center; cursor: pointer;
  }
  /* #novi-topbar-youtube-btn reuses this class and is shown/hidden live
     via the [hidden] attribute — see the [hidden] cascade note on
     .novi-yt-open-btn above for why this must be :not([hidden]) and not
     an unconditional "display: flex". */
  .novi-icon-btn:not([hidden]) { display: flex; }
  .novi-icon-btn:hover { background: rgba(139, 92, 246, 0.14); }
  .novi-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* :not([hidden]) ist hier Pflicht — ein unbedingtes display:flex würde
     das hidden-Attribut überstimmen (höhere Spezifität als die
     Browser-Regel display:none), und der rote Punkt klebte dann
     dauerhaft an der Glocke, auch ohne eine einzige Benachrichtigung. */
  .novi-icon-btn-badge:not([hidden]) {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
    background: #ef4444; color: var(--nv-text-strong); font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .novi-profile-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px 5px 5px; border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.2); background: rgba(139, 92, 246, 0.06);
    cursor: pointer;
  }
  .novi-profile-chip:hover { background: rgba(139, 92, 246, 0.14); }
  .novi-profile-avatar {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none;
    background: #1a1a28; display: flex; align-items: center; justify-content: center;
  }
  .novi-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-profile-text { text-align: left; }
  .novi-profile-name { font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.25; }
  .novi-profile-sub { font-size: 10.5px; color: var(--nv-text-dim2); line-height: 1.25; }
  .novi-profile-chip svg { width: 14px; height: 14px; stroke: #8a87a6; fill: none; stroke-width: 2; }

  /* ── Top-right channel selector dropdown ── */
  .novi-channel-selector { position: relative; }
  .novi-channel-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    width: 320px; max-width: calc(100vw - 24px);
    background: #14121f; border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 14px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    padding: 8px; max-height: 420px; overflow-y: auto;
  }
  .novi-channel-dropdown:not([hidden]) { display: block; }
  .novi-channel-dropdown-head {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nv-text-faint); padding: 6px 8px 8px;
  }
  .novi-channel-dropdown-empty { padding: 16px 8px; font-size: 12px; color: #82809c; text-align: center; line-height: 1.5; }
  .novi-channel-dropdown-item {
    display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left;
    padding: 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer;
    font-family: inherit; color: inherit; margin-bottom: 2px;
  }
  .novi-channel-dropdown-item:hover { background: rgba(139, 92, 246, 0.1); }
  .novi-channel-dropdown-item.is-active { border-color: rgba(168, 85, 247, 0.4); background: rgba(139, 92, 246, 0.12); }
  /* Profil zu 100 % ausgefüllt — grün hinterlegt mit grünem Randstreifen
     links, damit es auch beim schnellen Überfliegen der Liste auffällt. */
  .novi-channel-dropdown-item.is-complete {
    background: rgba(74, 222, 128, 0.09);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: inset 3px 0 0 #4ade80;
  }
  .novi-channel-dropdown-item.is-complete:hover { background: rgba(74, 222, 128, 0.16); }
  /* Aktiv + fertig: der Aktiv-Zustand bleibt sichtbar, das Grün bleibt führend. */
  .novi-channel-dropdown-item.is-complete.is-active { border-color: rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.15); }
  .novi-channel-dropdown-item.is-complete .novi-channel-dropdown-item-pct { color: var(--nv-good-text); font-weight: 800; }
  .novi-channel-dropdown-item-done-badge {
    display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: auto;
    font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(74, 222, 128, 0.18); color: var(--nv-good-text); padding: 2px 7px; border-radius: 999px;
  }
  .novi-channel-dropdown-item-done-badge svg {
    width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-channel-dropdown-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .novi-channel-dropdown-item-name { font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-channel-dropdown-item-active-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); flex: none;
  }
  .novi-channel-dropdown-item-char { font-size: 11px; color: #b9a9f0; }
  .novi-channel-dropdown-item-meta { display: flex; gap: 8px; font-size: 10px; color: var(--nv-text-dim2); flex-wrap: wrap; align-items: center; }
  .novi-channel-dropdown-item-pct { font-weight: 700; color: var(--nv-vio-text); }
  .novi-channel-dropdown-footer { border-top: 1px solid rgba(139, 92, 246, 0.14); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
  .novi-channel-dropdown-link {
    width: 100%; background: none; border: none; color: var(--nv-vio-text); font-family: inherit; font-size: 11.5px; font-weight: 700;
    cursor: pointer; padding: 9px 8px; text-align: center; border-radius: 8px;
  }
  .novi-channel-dropdown-link:hover { background: rgba(139, 92, 246, 0.1); }

  /* ── Active channel dashboard panel + compact context card ── */
  .novi-active-channel-panel { margin-bottom: 22px; }
  .novi-active-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin: 16px 0; }
  .novi-acp-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nv-text-faint); margin-bottom: 4px; }
  .novi-acp-stat-value { font-size: 14.5px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.35; }
  .novi-acp-assets-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
  .novi-acp-asset-badge {
    display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; border: 1px solid;
  }
  .novi-acp-asset-badge.present { color: var(--nv-good-text); background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.3); }
  .novi-acp-asset-badge.missing { color: var(--nv-text-dim2); background: rgba(139, 92, 246, 0.06); border-color: rgba(139, 92, 246, 0.16); }
  .novi-acp-asset-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; }
  .novi-acp-next-step { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(139, 92, 246, 0.14); }
  .novi-acp-next-step-text { font-size: 12.5px; color: var(--nv-text-mut); }
  .novi-acp-next-step-text b { color: var(--nv-text); }

  .novi-context-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.16); border-radius: 16px;
    padding: 16px 20px; margin-bottom: 22px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  }
  .novi-context-card-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nv-text-mut); flex: none; }
  .novi-context-card-items { display: flex; flex-wrap: wrap; gap: 8px 18px; flex: 1; }
  .novi-context-card-item { font-size: 12px; color: var(--nv-text-soft); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .novi-context-card-item b { color: var(--nv-text); font-weight: 700; }
  .novi-context-card-item.ok { color: var(--nv-good-text); }
  .novi-context-card-item.missing { color: var(--nv-text-dim2); }

  .novi-content { padding: 26px 28px 40px; max-width: 1440px; margin: 0 auto; }

  /* ── Hero ── */
  .novi-hero {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center;
    margin-bottom: 22px;
  }
  .novi-hero-title {
    font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.25;
    background: linear-gradient(135deg, #ffffff, #c4b5fd, #a855f7);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .novi-hero-subtitle { font-size: 14.5px; color: var(--nv-text-mut); line-height: 1.6; margin: 0 0 10px; max-width: 480px; }
  .novi-hero-tagline { font-size: 13.5px; font-style: italic; color: var(--nv-text-dim); margin: 0 0 20px; line-height: 1.5; }
  .novi-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .novi-hero-btn {
    border-radius: 11px; padding: 12px 22px; font-family: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 7px;
  }
  .novi-hero-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-hero-btn-primary {
    border: none; color: var(--nv-text-strong);
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.55);
  }
  .novi-hero-btn-primary:hover { transform: translateY(-1px); }
  .novi-hero-btn-secondary {
    border: 1px solid rgba(139, 92, 246, 0.3); color: var(--nv-vio-text); background: rgba(139, 92, 246, 0.08);
  }
  .novi-hero-btn-secondary:hover { background: rgba(139, 92, 246, 0.16); }
  .novi-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
  .novi-hero-visual-glow {
    position: absolute; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 70%);
    filter: blur(6px);
  }
  .novi-hero-visual-ring {
    position: absolute; width: 210px; height: 210px; border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
  }
  /* The mascot source is a plain JPEG with a solid white background (no
     alpha channel possible), which is exactly what made it read as "a
     white square" — object-fit:contain alone left the full rectangular
     canvas visible. This wraps it in a dark violet "portal" plate and
     masks the image into a soft-edged circle so the white background
     fades into the plate instead of cutting a hard shape against the
     dark studio backdrop. No new artwork, no change to the figure itself. */
  .novi-hero-visual-portal {
    position: absolute; width: 196px; height: 196px; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(88, 58, 148, 0.55), rgba(20, 14, 36, 0.96) 72%);
    box-shadow: inset 0 0 36px rgba(139, 92, 246, 0.4), 0 0 46px rgba(139, 92, 246, 0.22);
  }
  .novi-hero-mascot {
    position: relative;
    width: 168px; height: 168px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 100%);
    mask-image: radial-gradient(circle, #000 62%, transparent 100%);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
  }

  /* ── Workflow overview ── */
  .novi-panel {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 18px;
  }
  .novi-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .novi-panel-head-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-text-mut); }
  .novi-panel-head-link { font-size: 12px; color: #a855f7; text-decoration: none; cursor: pointer; }
  .novi-panel-head-link:hover { text-decoration: underline; }
  .novi-workflow-steps { display: flex; gap: 6px; justify-content: space-between; }
  .novi-workflow-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; text-align: center; min-width: 0; }
  .novi-workflow-step-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.3);
    display: flex; align-items: center; justify-content: center; color: var(--nv-vio-text);
  }
  .novi-workflow-step-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .novi-workflow-step-num { font-size: 10px; font-weight: 700; color: var(--nv-text-faint); }
  .novi-workflow-step-title { font-size: 12px; font-weight: 700; color: var(--nv-text); }
  .novi-workflow-step-sub { font-size: 10.5px; color: #7c7996; line-height: 1.3; max-width: 110px; }
  .novi-progress-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
  .novi-progress-label { font-size: 12px; color: #a5a2c0; flex: none; }
  .novi-progress-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #6366f1); }
  .novi-progress-pct { font-size: 12px; font-weight: 700; color: var(--nv-text); flex: none; }

  /* ── Dashboard card grid ── */
  .novi-dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
  .novi-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex; flex-direction: column;
    min-height: 120px;
  }
  .novi-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .novi-card-head-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nv-text-mut); }
  .novi-card-status-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .novi-card-status-badge.progress { background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); }
  .novi-card-status-badge.muted { background: rgba(139, 92, 246, 0.1); color: var(--nv-text-dim2); }
  .novi-card-placeholder { font-size: 12.5px; color: #82809c; line-height: 1.5; margin: auto 0; }
  .novi-card-link {
    margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--nv-vio-text);
    text-decoration: none; display: flex; align-items: center; gap: 5px; cursor: pointer;
  }
  .novi-card-link:hover { color: var(--nv-text); }
  .novi-card-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

  /* Aktuelles Projekt */
  .novi-project-thumb { width: 100%; height: 90px; border-radius: 10px; object-fit: cover; margin-bottom: 12px; background: #1a1a28; }
  .novi-project-title { font-size: 14px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.35; margin-bottom: 8px; }
  .novi-project-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--nv-text-dim2); flex-wrap: wrap; margin-bottom: 12px; }
  .novi-project-meta span { display: flex; align-items: center; gap: 4px; }
  .novi-project-meta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .novi-project-steps { display: flex; gap: 6px; margin-bottom: 10px; }
  .novi-mini-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .novi-mini-step-dot {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.1); color: #58547a; border: 1px solid rgba(139, 92, 246, 0.2);
  }
  .novi-mini-step-dot.done { background: #4ade80; color: #0a0a12; border-color: transparent; }
  .novi-mini-step-dot.active { background: linear-gradient(135deg, #a855f7, #7c3aed); color: var(--nv-text-strong); border-color: transparent; }
  .novi-mini-step-dot svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; }
  .novi-project-next { font-size: 11.5px; color: var(--nv-text-dim2); margin-bottom: 12px; }
  .novi-project-next b { color: var(--nv-vio-text); font-weight: 600; }
  .novi-card-cta {
    border: none; border-radius: 9px; padding: 10px; width: 100%;
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong); cursor: pointer;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .novi-card-cta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }
  .novi-card-cta.secondary { background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); }

  /* Qualitätsstatus ring */
  .novi-quality-body { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
  .novi-quality-ring { position: relative; width: 84px; height: 84px; flex: none; }
  .novi-quality-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .novi-quality-ring-track { fill: none; stroke: rgba(139, 92, 246, 0.14); stroke-width: 8; }
  .novi-quality-ring-fill { fill: none; stroke: #4ade80; stroke-width: 8; stroke-linecap: round; }
  .novi-quality-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .novi-quality-ring-pct { font-size: 17px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-quality-ring-label { font-size: 9px; color: var(--nv-text-dim2); }
  .novi-quality-status { font-size: 12px; font-weight: 700; color: var(--nv-good-text); }
  .novi-quality-status-sub { font-size: 10.5px; color: var(--nv-text-dim2); margin-top: 2px; }
  .novi-quality-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
  .novi-quality-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--nv-text-mut); }
  .novi-quality-row-label { display: flex; align-items: center; gap: 6px; }
  .novi-quality-row-label svg { width: 13px; height: 13px; stroke: #4ade80; fill: none; stroke-width: 2.4; }
  .novi-quality-row-value { font-weight: 700; color: var(--nv-text); }

  /* Module status */
  .novi-module-count { font-size: 22px; font-weight: 800; color: var(--nv-text-strong); margin-bottom: 4px; }
  .novi-module-count span { font-size: 13px; font-weight: 600; color: var(--nv-text-dim2); }
  .novi-module-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
  .novi-module-stat { text-align: center; padding: 10px 4px; border-radius: 10px; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.14); }
  .novi-module-stat-value { font-size: 16px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-module-stat-label { font-size: 9.5px; color: var(--nv-text-dim2); margin-top: 2px; }

  /* Studio Aktivität */
  .novi-activity-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 8px; }
  .novi-activity-row { display: flex; align-items: flex-start; gap: 10px; }
  .novi-activity-icon {
    flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
    background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text);
    display: flex; align-items: center; justify-content: center;
  }
  .novi-activity-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .novi-activity-text { font-size: 12px; color: var(--nv-text-soft); line-height: 1.4; }
  .novi-activity-time { font-size: 10.5px; color: #6f6c8a; margin-top: 2px; }

  /* Performance (empty state) */
  .novi-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 6px; margin: auto 0; }
  .novi-empty-state-icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(139, 92, 246, 0.1); color: var(--nv-text-faint);
    display: flex; align-items: center; justify-content: center;
  }
  .novi-empty-state-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .novi-empty-state-title { font-size: 12.5px; font-weight: 700; color: var(--nv-text-soft); }
  .novi-empty-state-sub { font-size: 11px; color: #82809c; line-height: 1.5; max-width: 220px; }

  /* Insights */
  .novi-insights-sub { font-size: 10.5px; color: var(--nv-text-faint); margin: -6px 0 12px; }
  .novi-insight-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(139, 92, 246, 0.1); }
  .novi-insight-row:first-child { border-top: none; padding-top: 0; }
  .novi-insight-icon {
    flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
  }
  .novi-insight-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .novi-insight-icon.star { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-insight-icon.trend { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-insight-icon.bulb { background: rgba(139, 92, 246, 0.18); color: var(--nv-vio-text); }
  .novi-insight-text { flex: 1; font-size: 12px; color: var(--nv-text-soft); line-height: 1.4; }
  .novi-insight-details { flex: none; font-size: 11px; font-weight: 700; color: #a855f7; cursor: pointer; white-space: nowrap; margin-top: 1px; }

  /* ── Bottom chat bar ── */

  /* ── Channel Profiles: page header, list, editor accordion ── */
  .novi-page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
  }
  .novi-page-header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--nv-text-strong); letter-spacing: -0.01em; }
  .novi-page-header p { margin: 0; font-size: 13px; color: var(--nv-text-dim); max-width: 520px; line-height: 1.5; }

  .novi-profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .novi-profile-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 16px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .novi-profile-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .novi-profile-card-name { font-size: 15px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-profile-card-char { font-size: 12px; color: #b9a9f0; margin-top: 2px; }
  .novi-profile-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--nv-text-dim2); margin: 10px 0 12px; }
  .novi-profile-card-meta span { display: flex; align-items: center; gap: 4px; }
  .novi-completeness-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .novi-completeness-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-completeness-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #6366f1); }
  .novi-completeness-pct { font-size: 11px; font-weight: 700; color: var(--nv-vio-text); flex: none; }
  .novi-profile-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .novi-profile-card-actions .novi-card-cta,
  .novi-profile-card-actions .novi-card-cta.secondary { flex: 1; min-width: 120px; padding: 8px; font-size: 12px; }
  .novi-profile-card.is-active { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 12px 28px -14px rgba(139, 92, 246, 0.5); }
  /* Fertig eingerichtetes Profil: grüner Grund, grüner Rand, grüner
     Fortschrittsbalken. Der aktive Kanal bleibt zusätzlich erkennbar —
     die beiden Zustände schliessen sich nicht aus. */
  .novi-profile-card.is-complete {
    background: linear-gradient(160deg, rgba(74, 222, 128, 0.14), rgba(74, 222, 128, 0.04) 62%, var(--nv-lift-2));
    border-color: rgba(74, 222, 128, 0.45);
  }
  .novi-profile-card.is-complete.is-active {
    border-color: rgba(74, 222, 128, 0.75);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.3), 0 12px 28px -14px rgba(74, 222, 128, 0.5);
  }
  .novi-profile-card.is-complete .novi-completeness-fill { background: linear-gradient(90deg, #22c55e, #4ade80 60%, #86efac); }
  .novi-profile-card.is-complete .novi-completeness-pct { color: var(--nv-good-text2); font-weight: 800; }
  .novi-profile-card-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; }
  .novi-profile-card-done-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(74, 222, 128, 0.18); border: 1px solid rgba(74, 222, 128, 0.45); color: var(--nv-good-text2);
  }
  .novi-profile-card-done-badge svg {
    width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-profile-card-active-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text);
  }

  .novi-accordion-section { border: 1px solid rgba(139, 92, 246, 0.16); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  .novi-accordion-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px; cursor: pointer; background: rgba(139, 92, 246, 0.06);
    font-size: 13.5px; font-weight: 700; color: var(--nv-text);
  }
  .novi-accordion-head:hover { background: rgba(139, 92, 246, 0.1); }
  .novi-accordion-head svg { width: 16px; height: 16px; stroke: #b9b6d4; fill: none; stroke-width: 2; transition: transform .15s ease; flex: none; }
  .novi-accordion-section.open .novi-accordion-head svg { transform: rotate(180deg); }
  .novi-accordion-body { padding: 18px; display: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .novi-accordion-section.open .novi-accordion-body { display: grid; }
  .novi-field { display: flex; flex-direction: column; gap: 6px; }
  .novi-field.span-2 { grid-column: 1 / -1; }
  .novi-field label { font-size: 11.5px; font-weight: 600; color: #a5a2c0; }
  .novi-field input, .novi-field textarea, .novi-field select {
    font-family: inherit; font-size: 13px; color: var(--nv-text);
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 9px; padding: 9px 11px; outline: none; resize: vertical;
  }
  .novi-field input:focus, .novi-field textarea:focus, .novi-field select:focus { border-color: rgba(168, 85, 247, 0.6); }
  .novi-field textarea { min-height: 68px; }
  .novi-field-hint { font-size: 10.5px; color: #6f6c8a; line-height: 1.4; }
  .novi-field-warning { font-size: 10.5px; color: #f4b942; line-height: 1.4; }
  .novi-yt-field-row { display: flex; gap: 8px; align-items: flex-start; }
  .novi-yt-field-row input { flex: 1; }
  .novi-yt-open-btn {
    flex: none; border: 1px solid rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.1);
    color: var(--nv-vio-text); border-radius: 9px; padding: 9px 12px; font-size: 12px; font-weight: 700;
    align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  /* Same equal-specificity trap as .novi-studio-view earlier: an
     unconditional "display: flex" here would beat the browser's
     [hidden]{display:none} regardless of source order, since author
     rules always win over the UA stylesheet — this button is now
     rendered with [hidden] toggled live (see the youtube-url input
     handler), so it must respect that. */
  .novi-yt-open-btn:not([hidden]) { display: flex; }
  .novi-yt-open-btn:hover { background: rgba(139, 92, 246, 0.18); }
  .novi-yt-open-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* ── Finale Kanal-Assets & Character Consistency ── */
  .novi-section-sub { font-size: 12.5px; color: var(--nv-text-dim); margin: 0 0 14px; line-height: 1.5; }
  .novi-subsection-title {
    font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nv-vio-text); margin: 22px 0 12px;
  }
  .novi-subsection-title:first-of-type { margin-top: 0; }
  .novi-asset-multi-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 4px 0 10px; font-size: 11.5px; font-weight: 700; color: #a5a2c0;
  }
  .novi-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
  .novi-asset-card {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  }
  .novi-asset-card-title { font-size: 12.5px; font-weight: 700; color: var(--nv-text); }
  .novi-asset-card-purpose { font-size: 10.5px; color: #82809c; line-height: 1.4; margin-top: -4px; }
  .novi-asset-preview {
    width: 100%; min-height: 100px; max-height: 320px; border-radius: 10px; overflow: hidden;
    background: rgba(10, 10, 18, 0.5); border: 1px dashed rgba(139, 92, 246, 0.25);
    display: flex; align-items: center; justify-content: center;
    color: #58547a; font-size: 10.5px; text-align: center; padding: 6px;
  }
  /* object-fit: contain (not cover) so the whole uploaded image is
     always visible, never cropped — accuracy matters here since these
     images are meant to be a binding character-consistency reference. */
  .novi-asset-preview img { max-width: 100%; max-height: 308px; width: auto; height: auto; object-fit: contain; }
  .novi-asset-file-row { font-size: 11px; color: var(--nv-text-mut); }
  .novi-asset-filename { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .novi-asset-link-input, .novi-asset-small-textarea {
    width: 100%; font-family: inherit; font-size: 11.5px; color: var(--nv-text);
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px; padding: 7px 9px; outline: none; resize: vertical;
  }
  .novi-asset-small-textarea { min-height: 44px; }
  .novi-asset-link-input:focus, .novi-asset-small-textarea:focus { border-color: rgba(168, 85, 247, 0.6); }
  .novi-asset-btn-row { display: flex; gap: 6px; }
  .novi-asset-btn {
    flex: 1; text-align: center; border: 1px solid rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.1);
    color: var(--nv-vio-text); border-radius: 8px; padding: 7px; font-size: 11px; font-weight: 700;
    cursor: pointer; font-family: inherit;
  }
  .novi-asset-btn:hover { background: rgba(139, 92, 246, 0.18); }
  .novi-asset-btn.danger { color: var(--nv-bad-text); border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.08); }
  .novi-asset-btn.danger:hover { background: rgba(248, 113, 113, 0.16); }
  .novi-asset-json-editor { min-height: 120px; font-family: monospace; font-size: 11.5px; }
  .novi-asset-item-json {
    width: 100%; font-family: monospace; font-size: 10.5px; color: var(--nv-vio-text); min-height: 70px;
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px; padding: 7px 9px; outline: none; resize: vertical;
  }
  .novi-asset-item-json:focus { border-color: rgba(168, 85, 247, 0.6); }

  /* ── Dashboard: Content & Verpackung Workflow status sub-block ── */
  .novi-cpw-status {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(139, 92, 246, 0.14);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }
  .novi-cpw-status-info { font-size: 12.5px; color: var(--nv-text-mut); display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .novi-cpw-status-info b { color: var(--nv-text); }
  .novi-cpw-status-next { font-size: 11.5px; color: var(--nv-text-dim2); }

  /* ── Content & Verpackung Workflow: module list ── */
  .novi-cw-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
  .novi-cw-module-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 16px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .novi-cw-module-head { display: flex; align-items: flex-start; gap: 12px; }
  .novi-cw-module-num {
    flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text); font-size: 13px; font-weight: 800;
  }
  .novi-cw-module-title { font-size: 14px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.3; }
  .novi-cw-module-desc { font-size: 11.5px; color: var(--nv-text-dim); line-height: 1.5; margin: 0; }
  .novi-cw-status-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; flex: none; white-space: nowrap;
  }
  .novi-cw-status-badge.st-nichtgestartet { background: rgba(139, 92, 246, 0.1); color: var(--nv-text-dim2); }
  .novi-cw-status-badge.st-inbearbeitung { background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); }
  .novi-cw-status-badge.st-prompterstellt { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
  .novi-cw-status-badge.st-outputeingefuegt { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-cw-status-badge.st-inpruefung { background: rgba(251, 146, 60, 0.18); color: var(--nv-warn-text); }
  .novi-cw-status-badge.st-freigegeben { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-cw-module-progress-track { height: 5px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-cw-module-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #6366f1); }
  .novi-cw-module-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .novi-cw-module-actions .novi-card-cta { flex: 1; min-width: 110px; padding: 8px; font-size: 11.5px; }

  .novi-cw-summary-panel { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
  .novi-cw-summary-track { flex: 1; min-width: 160px; height: 8px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-cw-summary-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #6366f1); }
  .novi-cw-summary-pct { font-size: 15px; font-weight: 800; color: var(--nv-text-strong); flex: none; }
  .novi-cw-summary-count { font-size: 11.5px; color: var(--nv-text-dim2); flex: none; }

  /* ── Content & Verpackung Workflow: module detail view ── */
  .novi-cwm-section { background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.16); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
  /* Aufklappbare Zusammenfassungen auf den Phasenseiten. */
  /* Kompakte Kontext-Reihe (02.08.): eingeklappte Nachschlage-Boxen
     stehen nebeneinander; sobald eine aufgeklappt wird, nimmt sie die
     volle Breite. */
  .novi-kontext-gruppe {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px; margin-bottom: 14px; align-items: start;
  }
  .novi-kontext-gruppe > .novi-cwm-section { margin-bottom: 0; padding: 9px 14px; }
  .novi-kontext-gruppe > .novi-cwm-section.is-open { grid-column: 1 / -1; padding: 14px 18px; }
  .novi-kontext-gruppe .novi-collapse-head { font-size: 10px; }
  .novi-kontext-gruppe .novi-collapse-hint { display: none; }
  .novi-kontext-gruppe > .novi-cwm-section.is-open .novi-collapse-hint { display: inline; }
  @media (max-width: 700px) {
    .novi-kontext-gruppe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .novi-cwm-section.is-collapsible > .novi-collapse-body { display: none; }
  .novi-cwm-section.is-collapsible.is-open > .novi-collapse-body { display: block; animation: noviCollapseIn 0.22s ease both; }
  @keyframes noviCollapseIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .novi-collapse-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin-bottom: 0 !important; padding: 4px 0; border-radius: 8px; transition: color 0.15s ease; }
  .novi-collapse-head:hover { color: #ddd6fe; }
  .novi-collapse-head:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 3px; }
  .novi-collapse-hint { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: #7c6ba8; }
  .novi-collapse-chev { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s ease; }
  .novi-cwm-section.is-open > .novi-collapse-head > .novi-collapse-chev { transform: rotate(180deg); }
  .novi-cwm-section.is-open > .novi-collapse-head > .novi-collapse-hint { color: #a78bfa; }
  .novi-cwm-section.is-collapsible.is-open > .novi-collapse-body { margin-top: 12px; }
  /* Kanalbanner über der Übersicht. */
  .novi-ov-banner { position: relative; width: 100%; aspect-ratio: 1152 / 200; max-height: 220px; border-radius: 18px; overflow: hidden; margin-bottom: 18px; border: 1px solid rgba(139,92,246,0.28); background: linear-gradient(120deg, #150f2b, #0d0a1a); box-shadow: 0 18px 46px -22px rgba(0,0,0,0.9); }
  .novi-ov-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .novi-ov-banner-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,6,18,0.86) 0%, rgba(8,6,18,0.42) 45%, rgba(8,6,18,0.08) 100%); }
  .novi-ov-banner-name { position: absolute; left: 22px; bottom: 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--nv-text-strong); text-shadow: 0 2px 14px rgba(0,0,0,0.85); }
  @media (max-width: 700px) {
    .novi-ov-banner { border-radius: 14px; margin-bottom: 14px; }
    .novi-ov-banner-name { left: 14px; bottom: 10px; font-size: 16px; }
  }
  .novi-cwm-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nv-vio-text); margin-bottom: 12px; }
  .novi-cwm-context-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; font-size: 12px; color: var(--nv-text-soft); }
  .novi-cwm-context-grid div b { color: var(--nv-text); display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--nv-text-faint); margin-bottom: 2px; }
  .novi-cwm-prompt-box {
    position: relative; background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 10px;
    padding: 14px 16px; font-family: monospace; font-size: 11.5px; color: var(--nv-text-soft); line-height: 1.6;
    white-space: pre-wrap; max-height: 360px; overflow-y: auto;
  }
  .novi-cwm-copy-btn { margin-top: 10px; }
  .novi-cwm-output-textarea, .novi-cwm-notes-textarea {
    width: 100%; font-family: inherit; font-size: 13px; color: var(--nv-text);
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 9px; padding: 12px 14px; outline: none; resize: vertical;
  }
  .novi-cwm-output-textarea { min-height: 220px; }
  .novi-cwm-notes-textarea { min-height: 80px; }
  .novi-cwm-output-textarea:focus, .novi-cwm-notes-textarea:focus { border-color: rgba(168, 85, 247, 0.6); }
  .novi-cwm-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .novi-cwm-status-select {
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--nv-text);
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 9px; padding: 8px 12px; outline: none; cursor: pointer;
  }
  .novi-cwm-approved-note { font-size: 11px; color: var(--nv-good-text); }
  .novi-cwm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

  /* ── Video Projects: form ── */
  .novi-form-panel { background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.16); border-radius: 14px; padding: 20px; }
  .novi-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

  /* ── Video Projects: list ── */
  .novi-vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
  .novi-vp-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
  .novi-vp-controls input[type="search"] { flex: 1 1 200px; min-width: 160px; }
  .novi-vp-controls select { flex: 0 1 auto; max-width: 210px; }
  @media (max-width: 760px) {
    .novi-vp-controls { gap: 8px; }
    .novi-vp-controls select { flex: 1 1 46%; max-width: none; }
  }
  .novi-vp-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 16px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .novi-vp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .novi-vp-card-name { font-size: 15px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-vp-card-sub { font-size: 11.5px; color: #b9a9f0; margin-top: 2px; }
  .novi-vp-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--nv-text-dim2); }
  .novi-vp-status-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; flex: none; white-space: nowrap;
  }
  .novi-vp-status-badge.st-entwurf { background: rgba(139, 92, 246, 0.1); color: var(--nv-text-dim2); }
  .novi-vp-status-badge.st-inbearbeitung { background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); }
  .novi-vp-status-badge.st-pausiert { background: rgba(251, 146, 60, 0.18); color: var(--nv-warn-text); }
  .novi-vp-status-badge.st-bereitzurpruefung { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-vp-status-badge.st-veroeffentlicht { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-vp-status-badge.st-archiviert { background: rgba(139, 92, 246, 0.08); color: #58547a; }
  .novi-vp-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .novi-vp-card-actions .novi-card-cta { flex: 1; min-width: 90px; padding: 8px; font-size: 11.5px; }

  /* ── Video Projects: detail — phase track ── */
  .novi-vp-phase-track { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
  .novi-vp-phase-pill {
    font-size: 10.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.18); color: var(--nv-text-dim2); background: rgba(139, 92, 246, 0.05);
  }
  .novi-vp-phase-pill.current { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); font-weight: 700; }
  .novi-vp-phase-pill.past { color: var(--nv-good-text); border-color: rgba(74, 222, 128, 0.25); background: rgba(74, 222, 128, 0.08); }
  .novi-vp-cc-outputs { display: flex; flex-wrap: wrap; gap: 8px; }
  .novi-vp-phase-open-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -6px 0 14px; }
  .novi-vp-phase-open-label { font-size: 11.5px; color: var(--nv-text-dim2); }
  .novi-vp-phase-open-current { color: var(--nv-vio-text); font-weight: 700; }
  .novi-cw-status-badge.st-ueberarbeiten { background: rgba(248, 113, 113, 0.14); color: var(--nv-bad-text); }

  /* ── Phase 01: Themenfindung & Themenvalidierung ── */
  .novi-warning-banner {
    background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.3); border-radius: 12px;
    padding: 12px 16px; font-size: 12.5px; color: var(--nv-warn-text); margin-bottom: 18px; line-height: 1.5;
  }
  .novi-p01-rec-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; flex: none; }
  .novi-p01-rec-badge.go { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-p01-rec-badge.maybe { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-p01-rec-badge.nogo { background: rgba(248, 113, 113, 0.16); color: var(--nv-bad-text); }

  /* ── Novi-Hub-Seiten (Ranking, Kennzahlen, View Jail, Umsatzrechner) ──
     Diese Seiten zeigen dieselben Inhalte wie die gleichnamigen Bereiche
     im Creator Hub. Statt die Render-Logik ein zweites Mal zu schreiben
     (zwei Wahrheiten, die auseinanderlaufen), wird der vorhandene Markup
     wiederverwendet und hier nur umgefärbt: .novi-hub-embed überschreibt
     die Theme-Variablen auf die dunkel-violette Novi-Palette, wodurch
     kz-*, rank-*, ur-* und vj-* automatisch ins Studio-Design passen. ── */
  .novi-hub-embed {
    --bg-page: transparent;
    --bg-card: rgba(139, 92, 246, 0.05);
    --bg-card-hover: rgba(139, 92, 246, 0.12);
    --border-subtle: rgba(139, 92, 246, 0.18);
    --border-strong: rgba(139, 92, 246, 0.32);
    --text-primary: #e9e7f5;
    --text-secondary: #cfccdf;
    --text-faint: #8a87a6;
    --accent: #a855f7;
    --accent-strong: #c4b5fd;
    --accent-soft: rgba(139, 92, 246, 0.12);
    --accent-soft-strong: rgba(139, 92, 246, 0.28);
    --shadow-card: none;
    color: var(--text-secondary);
  }
  .novi-hub-embed .tile {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18); color: var(--nv-text); box-shadow: none;
  }
  .novi-hub-embed .tile:hover { border-color: rgba(168, 85, 247, 0.55); transform: translateY(-2px); }
  .novi-hub-embed .tile .label { color: var(--nv-text-strong); }
  .novi-hub-embed .badge { background: rgba(139, 92, 246, 0.16); color: var(--nv-vio-text); }
  .novi-hub-embed .rank-item {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), var(--nv-lift-1));
    border: 1px solid rgba(139, 92, 246, 0.16); box-shadow: none;
  }
  .novi-hub-embed .rank-name { color: var(--nv-text-strong); }
  .novi-hub-embed .rank-stat-value { color: var(--nv-text-strong); }
  .novi-hub-embed .btn {
    background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: var(--nv-vio-text);
  }
  .novi-hub-embed .btn:hover { background: rgba(139, 92, 246, 0.2); }
  .novi-hub-embed .wizard-card {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18); box-shadow: none;
  }
  .novi-hub-embed input[type="number"], .novi-hub-embed input[type="text"] {
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2); color: var(--nv-text);
  }
  .novi-hub-embed .kz-detail-hero { background: rgba(139, 92, 246, 0.07); border-color: rgba(139, 92, 246, 0.2); }
  .novi-hub-embed h1, .novi-hub-embed h2, .novi-hub-embed h3 { color: var(--nv-text-strong); }

  /* Epischer Kopfbereich dieser Seiten — Glow + Verlauf wie im Hero. */
  .novi-hub-hero {
    position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.10) 45%, rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(139, 92, 246, 0.28);
  }
  .novi-hub-hero::after {
    content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 68%); pointer-events: none;
  }
  .novi-hub-hero-eyebrow {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-vio-text);
  }
  .novi-hub-hero-title { font-size: 27px; font-weight: 800; color: var(--nv-text-strong); margin: 6px 0 4px; line-height: 1.15; }
  .novi-hub-hero-sub { font-size: 13px; color: var(--nv-text-mut); margin: 0; position: relative; z-index: 1; }
  .novi-hub-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .novi-hub-back {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
    background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: var(--nv-vio-text);
    border-radius: 10px; padding: 7px 13px; font-size: 12px; font-weight: 700;
  }
  .novi-hub-back:hover { background: rgba(139, 92, 246, 0.2); }
  .novi-hub-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Kachelraster dieser Seiten — etwas größer als die Einstellungs-1:1er. */
  .novi-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .novi-hub-tile {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 16px; padding: 18px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
    text-align: center; cursor: pointer; font-family: inherit; min-height: 132px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .novi-hub-tile:hover {
    border-color: rgba(168, 85, 247, 0.55); transform: translateY(-2px);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.15), var(--nv-lift-3));
  }
  .novi-hub-tile-icon {
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.16); color: var(--nv-vio-text); overflow: hidden;
  }
  .novi-hub-tile-icon img { width: 100%; height: 100%; object-fit: cover; }
  .novi-hub-tile-icon svg {
    width: 23px; height: 23px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-hub-tile-title { font-size: 13.5px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.3; }
  .novi-hub-tile-sub { font-size: 10.5px; color: var(--nv-text-dim); line-height: 1.45; }
  .novi-hub-note { font-size: 12.5px; color: var(--nv-text-dim2); margin: 0 0 14px; }

  /* ── Profil-Button unten in der Sidebar ── */
  .novi-userbtn {
    display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
    font-family: inherit; text-align: left;
    border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 14px; padding: 11px 12px;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.1), var(--nv-lift-2));
    transition: border-color .15s ease, background .15s ease;
  }
  .novi-userbtn:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(139, 92, 246, 0.16); }
  .novi-userbtn-avatar {
    flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.22); color: var(--nv-vio-text); font-size: 12px; font-weight: 800;
  }
  .novi-userbtn-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-userbtn-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .novi-userbtn-name { font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-userbtn-sub {
    font-size: 10px; color: var(--nv-text-dim2); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .novi-userbtn-arrow {
    width: 14px; height: 14px; flex: none; fill: none; stroke: #8a87a6;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ── Profilseite ── */
  .novi-prof-idrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .novi-prof-avatar {
    flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.2); color: var(--nv-vio-text); font-size: 25px; font-weight: 800;
    border: 1px solid rgba(139, 92, 246, 0.32);
  }
  .novi-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-prof-idactions { display: flex; gap: 8px; flex-wrap: wrap; }
  .novi-prof-idactions .novi-asset-btn { flex: none; min-width: 130px; }
  .novi-prof-choices { display: flex; gap: 10px; flex-wrap: wrap; }
  .novi-prof-choice {
    display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: var(--nv-text-mut);
    border: 1px solid rgba(139, 92, 246, 0.24); border-radius: 12px; padding: 11px 16px;
    background: rgba(139, 92, 246, 0.06);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .novi-prof-choice:hover { border-color: rgba(168, 85, 247, 0.5); color: var(--nv-text-strong); }
  .novi-prof-choice.active {
    border-color: #4ade80; background: rgba(74, 222, 128, 0.14); color: var(--nv-text-strong);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35);
  }
  .novi-prof-choice-icon { display: flex; }
  .novi-prof-choice-icon svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-prof-choice-flag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
    background: rgba(139, 92, 246, 0.2); color: var(--nv-vio-text); padding: 3px 7px; border-radius: 6px;
  }
  .novi-prof-choice.active .novi-prof-choice-flag { background: rgba(74, 222, 128, 0.22); color: var(--nv-good-text); }

  /* ── Workflow-Kanalliste: vollständig freigegebener Kanal ── */
  .novi-gd-row.is-workflow-done {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.14), var(--nv-lift-1));
    border-color: rgba(74, 222, 128, 0.38);
    box-shadow: inset 3px 0 0 #4ade80;
  }
  .novi-gd-row.is-workflow-done .novi-gd-row-meta { color: var(--nv-good-text2); }
  .novi-cw-done-badge {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 9px; vertical-align: middle;
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(74, 222, 128, 0.2); color: var(--nv-good-text); padding: 2px 8px; border-radius: 999px;
  }
  .novi-cw-done-badge svg {
    width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* ══ Preisübersicht ══
     Jedes Modell hat seinen Metallton (--m). Rahmen, Glow und Preis
     leiten sich daraus ab, sodass ein weiteres Modell nur eine Zeile
     Farbe braucht. */
  .novi-pricing-note {
    display: inline-block; margin-top: 14px; padding: 9px 15px; border-radius: 999px;
    font-size: 12px; line-height: 1.5;
    background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.3); color: #fdba74;
  }
  .novi-pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px; margin-top: 26px; align-items: stretch;
  }
  .novi-plan {
    --m: #a855f7;
    position: relative; overflow: hidden; border-radius: 18px; padding: 22px 20px;
    display: flex; flex-direction: column;
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--m) 14%, transparent), var(--nv-lift-1)),
      rgba(16, 14, 27, 0.92);
    border: 1px solid color-mix(in srgb, var(--m) 32%, transparent);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .novi-plan:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--m) 65%, transparent);
    box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--m) 85%, transparent);
  }
  .novi-plan-glow {
    position: absolute; right: -50px; top: -70px; width: 180px; height: 180px; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--m) 42%, transparent), transparent 70%);
  }
  .novi-plan > *:not(.novi-plan-glow) { position: relative; z-index: 1; }
  .novi-plan.is-featured { border-width: 2px; border-color: color-mix(in srgb, var(--m) 75%, transparent); }
  .novi-plan-flag {
    position: absolute; top: 0; right: 0; z-index: 2;
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: var(--m); color: #1a1205; padding: 4px 12px; border-radius: 0 18px 0 12px;
  }
  .novi-plan-name { font-size: 19px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-plan-tagline { font-size: 11px; color: var(--nv-text-dim); margin-top: 3px; }
  .novi-plan-price { display: flex; flex-direction: column; margin: 16px 0 15px; }
  .novi-plan-amount {
    font-size: 32px; font-weight: 800; color: var(--nv-text-strong); line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    text-shadow: 0 0 26px color-mix(in srgb, var(--m) 55%, transparent);
  }
  .novi-plan-suffix { font-size: 11px; color: var(--nv-text-dim2); margin-top: 5px; }
  .novi-plan-features { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .novi-plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--nv-text-soft); line-height: 1.45; }
  .novi-plan-features svg {
    width: 13px; height: 13px; flex: none; margin-top: 2px;
    fill: none; stroke: var(--m); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Bewusst deaktiviert: es gibt noch nichts zu buchen. */
  .novi-plan-btn {
    width: 100%; padding: 11px; border-radius: 10px; cursor: not-allowed;
    font-family: inherit; font-size: 12px; font-weight: 700;
    background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.22); color: var(--nv-text-dim2);
  }
  .novi-plan.tone-slate    { --m: #94a3b8; }
  .novi-plan.tone-bronze   { --m: #d97706; }
  .novi-plan.tone-silver   { --m: #cbd5e1; }
  .novi-plan.tone-gold     { --m: #facc15; }
  .novi-plan.tone-platinum { --m: #67e8f9; }

  /* ══ Fortschritts-Panel der Projektansicht ══ */
  .novi-pp {
    position: relative; overflow: hidden; border-radius: 20px; padding: 20px 22px; margin-bottom: 18px;
    background:
      linear-gradient(150deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.08) 55%, var(--nv-lift-2)),
      rgba(16, 14, 27, 0.92);
    border: 1px solid rgba(139, 92, 246, 0.3);
  }
  .novi-pp-glow {
    position: absolute; right: -60px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
    pointer-events: none; background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 68%);
  }
  .novi-pp > *:not(.novi-pp-glow) { position: relative; z-index: 1; }
  .novi-pp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .novi-pp-eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-vio-text);
  }
  .novi-pp-phase { font-size: 12.5px; color: var(--nv-text-mut); margin-top: 5px; }
  .novi-pp-phase b { color: var(--nv-text-strong); }
  .novi-pp-value { display: flex; align-items: baseline; gap: 2px; }
  .novi-pp-value #novi-pp-num {
    font-size: 42px; font-weight: 800; color: var(--nv-text-strong); line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.65);
  }
  .novi-pp-pct { font-size: 19px; font-weight: 800; color: var(--nv-vio-text); }
  .novi-pp-track {
    position: relative; height: 12px; border-radius: 999px; margin: 16px 0 11px;
    background: rgba(255, 255, 255, 0.08); overflow: visible;
  }
  .novi-pp-fill {
    position: absolute; inset: 0 auto 0 0; border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #a855f7 55%, #ec4899);
    box-shadow: 0 0 18px -2px rgba(168, 85, 247, 0.85);
  }
  .novi-pp-fill.is-animating { transition: width 1.05s cubic-bezier(.22, .9, .28, 1); }
  /* Wanderndes Glanzlicht auf dem gefüllten Teil. */
  .novi-pp-fill::after {
    content: ""; position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: novi-pp-sheen 2.6s linear infinite;
  }
  @keyframes novi-pp-sheen { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
  /* Meilensteine bei 50 % und 100 % */
  .novi-pp-tick {
    position: absolute; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
  }
  .novi-pp-tick.t50 { left: 50%; }
  .novi-pp-tick.t100 { right: 0; }
  .novi-pp-tick.reached { background: #fff; box-shadow: 0 0 12px 2px rgba(255, 255, 255, .8); }
  .novi-pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .novi-pp-steps { font-size: 12px; color: var(--nv-text-mut); }
  .novi-pp-milestone {
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--nv-vio-text); background: rgba(139, 92, 246, 0.18); padding: 3px 10px; border-radius: 999px;
  }

  /* Zuwachs: kurzer Impuls */
  .novi-pp.is-gain { animation: novi-pp-gain .9s cubic-bezier(.2, .9, .25, 1.15); }
  @keyframes novi-pp-gain {
    0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55); }
    40%  { box-shadow: 0 0 40px -4px rgba(168, 85, 247, .9); }
    100% { box-shadow: none; }
  }
  /* Halbzeit: Lichtwelle quer über das Panel */
  .novi-pp.is-half::after, .novi-pp.is-complete::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
    background-size: 260% 100%;
    animation: novi-pp-wave 1.25s ease-out 1;
  }
  @keyframes novi-pp-wave { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
  .novi-pp.is-half { border-color: rgba(34, 211, 238, .6); }
  /* Ziel: goldener Rahmen, pulsierender Schein und ein Konfetti-Ring */
  .novi-pp.is-complete {
    border-color: #facc15;
    animation: novi-pp-complete 2.2s cubic-bezier(.2, .9, .25, 1.1);
  }
  @keyframes novi-pp-complete {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(250, 204, 21, .7); }
    22%  { transform: scale(1.02); box-shadow: 0 0 60px -6px rgba(250, 204, 21, .95); }
    55%  { transform: scale(1);    box-shadow: 0 0 34px -8px rgba(250, 204, 21, .6); }
    100% { transform: scale(1);    box-shadow: none; }
  }
  .novi-pp.is-complete .novi-pp-fill { background: linear-gradient(90deg, #f59e0b, #facc15 55%, #fde68a); }
  .novi-pp.is-complete #novi-pp-num { text-shadow: 0 0 34px rgba(250, 204, 21, .9); }

  /* ══ Phasenliste ══ */
  .novi-phaselist { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
  .novi-phaselist-row {
    display: flex; align-items: center; gap: 13px; padding: 11px 4px;
    border-top: 1px solid rgba(139, 92, 246, 0.12);
  }
  .novi-phaselist-row:first-child { border-top: none; }
  .novi-phaselist-mark {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: rgba(139, 92, 246, 0.12); color: var(--nv-text-dim2);
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  .novi-phaselist-mark svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-phaselist-row.is-done .novi-phaselist-mark {
    background: rgba(74, 222, 128, 0.18); color: var(--nv-good-text); border-color: rgba(74, 222, 128, 0.5);
  }
  .novi-phaselist-row.is-current .novi-phaselist-mark {
    background: linear-gradient(135deg, #a855f7, #7c3aed); color: var(--nv-text-strong); border-color: transparent;
    box-shadow: 0 0 16px -3px rgba(168, 85, 247, .9);
  }
  .novi-phaselist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .novi-phaselist-label { font-size: 13px; font-weight: 700; color: var(--nv-text); }
  .novi-phaselist-row.is-done .novi-phaselist-label { color: var(--nv-good-text2); }
  .novi-phaselist-row.is-todo .novi-phaselist-label { color: var(--nv-text-dim); }
  .novi-phaselist-meta { font-size: 10.5px; color: var(--nv-text-dim2); margin-top: 2px; }
  .novi-phaselist-now {
    flex: none; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    background: rgba(168, 85, 247, 0.22); color: var(--nv-vio-text); padding: 3px 9px; border-radius: 999px;
  }
  .novi-phaselist-btn { max-width: 130px; margin: 0; flex: none; }
  @media (max-width: 620px) {
    .novi-phaselist-row { flex-wrap: wrap; }
    .novi-phaselist-btn { max-width: none; width: 100%; }
  }

  /* ── Phasenseiten mit Video-Dashboard rechts ── */
  .novi-ph-split { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
  .novi-ph-split-main { min-width: 0; }
  .novi-ph-split-side { position: sticky; top: 8px; }
  .novi-vd {
    position: relative; overflow: hidden; border-radius: 18px; padding: 16px;
    background:
      linear-gradient(160deg, rgba(139, 92, 246, 0.13), var(--nv-lift-1)),
      rgba(18, 16, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.26);
  }
  .novi-vd-head {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--nv-vio-text); margin-bottom: 13px;
  }
  .novi-vd-channel { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
  .novi-vd-avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.2); color: var(--nv-vio-text); font-size: 12px; font-weight: 800;
  }
  .novi-vd-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-vd-channel-text { display: flex; flex-direction: column; min-width: 0; }
  .novi-vd-channel-name {
    font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .novi-vd-channel-link { font-size: 10px; color: #a89ce0; text-decoration: none; }
  .novi-vd-channel-link:hover { text-decoration: underline; }
  .novi-vd-channel-link.is-missing { color: #6f6d88; }
  .novi-vd-block { margin-bottom: 15px; }
  .novi-vd-block:last-child { margin-bottom: 0; }
  .novi-vd-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--nv-text-dim2); margin-bottom: 6px;
  }
  .novi-vd-title { font-size: 14px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.35; }
  .novi-vd-desc {
    font-size: 11.5px; color: var(--nv-text-soft); line-height: 1.5;
    max-height: 120px; overflow-y: auto; white-space: pre-wrap;
  }
  .novi-vd-missing { font-size: 11px; color: #6f6d88; font-style: italic; }

  /* Titel und Beschreibung sind im Dashboard bearbeitbar. Eigene Klassen,
     damit die Formularfelder der Phasenseiten unberührt bleiben. */
  .novi-vd-edit {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    padding: 8px 10px; border-radius: 10px;
    font: inherit; font-size: 12px; line-height: 1.45; color: var(--nv-text-strong);
    background: var(--nv-veil);
    border: 1px solid rgba(139, 92, 246, 0.22);
    min-height: 46px;
  }
  .novi-vd-edit.is-tall { min-height: 96px; max-height: 220px; font-size: 11.5px; }
  .novi-vd-edit::placeholder { color: #6f6d88; font-style: italic; }
  .novi-vd-edit:focus-visible {
    outline: none; border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
  }
  .novi-vd-note { margin-top: 5px; font-size: 10px; color: #6f6d88; font-style: italic; }
  .novi-vd-note[hidden] { display: none; }
  .novi-vd-edit-actions { display: flex; gap: 7px; margin-top: 7px; }
  .novi-vd-btn {
    flex: 1; padding: 6px 8px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--nv-vio-text-soft);
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .novi-vd-btn:hover { background: rgba(139, 92, 246, 0.3); border-color: #a78bfa; }
  .novi-vd-btn.is-danger {
    flex: 0 0 auto; color: #fca5a5;
    background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3);
  }
  .novi-vd-btn.is-danger:hover { background: rgba(248, 113, 113, 0.2); border-color: #f87171; }

  .novi-vd-thumbs { display: flex; flex-direction: column; gap: 11px; }
  .novi-vd-thumb {
    border-radius: 12px; padding: 9px;
    background: rgba(10, 10, 18, 0.5); border: 1px solid rgba(139, 92, 246, 0.16);
  }
  .novi-vd-thumb-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
  .novi-vd-var {
    font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
  }
  .novi-vd-var.v1 { background: rgba(249, 115, 22, 0.18); color: var(--nv-warn-text); }
  .novi-vd-var.v2 { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
  .novi-vd-var.v3 { background: rgba(168, 85, 247, 0.2); color: var(--nv-vio-text); }
  .novi-vd-thumb-ok { font-size: 8.5px; font-weight: 700; color: var(--nv-good-text); }
  /* 16:9 wie auf YouTube, contain damit nichts angeschnitten wird. */
  .novi-vd-thumb-frame {
    aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden;
    background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(139, 92, 246, 0.14);
    display: flex; align-items: center; justify-content: center;
  }
  .novi-vd-thumb-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .novi-vd-thumb-empty { font-size: 9px; color: #58547a; text-align: center; padding: 4px; }
  .novi-vd-prompt {
    font-size: 9.5px; color: var(--nv-text-dim); line-height: 1.45; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .novi-vd-prompt.is-empty { color: #58547a; font-style: italic; }

  /* ── Auth-Leiste der Startseite (oben rechts) ── */
  .novi-entry-auth {
    position: absolute; top: 20px; right: 22px; z-index: 2;
    display: flex; align-items: center; gap: 10px;
  }
  .novi-entry-auth-out, .novi-entry-auth-in { display: flex; align-items: center; gap: 10px; }
  .novi-entry-auth-out[hidden], .novi-entry-auth-in[hidden] { display: none; }
  .novi-entry-auth-user {
    font-size: 12px; color: var(--nv-text-mut); max-width: 210px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .novi-entry-auth-btn {
    cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
    padding: 9px 16px; border-radius: 10px;
    background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.32); color: var(--nv-vio-text);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .novi-entry-auth-btn:hover { background: rgba(139, 92, 246, 0.22); border-color: rgba(168, 85, 247, 0.6); transform: translateY(-1px); }
  .novi-entry-auth-btn.primary {
    background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: transparent; color: var(--nv-text-strong);
    box-shadow: 0 8px 22px -10px rgba(168, 85, 247, 0.9);
  }
  .novi-entry-auth-btn.primary:hover { filter: brightness(1.08); }
  @media (max-width: 620px) {
    .novi-entry-auth { top: 12px; right: 12px; left: 12px; justify-content: flex-end; }
    .novi-entry-auth-user { max-width: 120px; }
    .novi-entry-auth-btn { padding: 8px 12px; font-size: 11.5px; }
  }

  /* Zurück-Button in der Studio-Topbar. Hatte bisher gar kein CSS —
     das SVG erbte keine Strichfarbe und war als dünner Strich kaum als
     Schaltfläche erkennbar. */
  .novi-back-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: none; align-self: flex-start;
    margin-top: 2px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 700; color: var(--nv-vio-text);
    background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px; padding: 8px 13px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .novi-back-btn:hover {
    background: rgba(139, 92, 246, 0.22); border-color: rgba(168, 85, 247, 0.55);
    transform: translateX(-2px);
  }
  .novi-back-btn svg {
    width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Gesperrter Navigationseintrag — bleibt klickbar, damit die
     Erklärung erscheint, statt stumm nichts zu tun. */
  .novi-nav-item.is-locked { opacity: 0.5; }
  .novi-nav-item.is-locked::after {
    content: "";
    width: 12px; height: 12px; margin-left: auto; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/></svg>") center/contain no-repeat;
  }

  /* ── Kalender-Auswertungsboxen im Studio ──
     .kpi-card stammt von der hellen Creator-Hub-Startseite (weiße
     Fläche, schwarze Schrift) und stach im dunklen Studio als weißer
     Block heraus. Hier auf dunkle Karten mit heller Schrift umgestellt. */
  .novi-studio-view .kpi-card {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.1), var(--nv-lift-1)), rgba(18, 16, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.24);
    box-shadow: none;
  }
  .novi-studio-view .kpi-card .kpi-label { color: #a9a5c4; }
  .novi-studio-view .kpi-card .kpi-value { color: var(--nv-text-strong); }
  .novi-studio-view .kpi-card .kpi-goal-caption { color: var(--nv-text-dim2); }
  .novi-studio-view .kpi-card .kpi-icon { background: rgba(139, 92, 246, 0.2); color: var(--nv-vio-text); }
  .novi-studio-view .kpi-card .kpi-icon svg { stroke: currentColor; }
  .novi-studio-view .kpi-card .kpi-progress-track { background: rgba(255, 255, 255, 0.1); }

  /* ── Kopier-Bestätigung: kurzes grünes Aufleuchten ── */
  .novi-copied {
    animation: novi-copied-flash .95s ease;
    border-color: #4ade80 !important;
  }
  @keyframes novi-copied-flash {
    0%   { background: rgba(74, 222, 128, 0.55); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); color: #062; }
    35%  { background: rgba(74, 222, 128, 0.4);  box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { background: inherit; box-shadow: none; }
  }

  /* ── Hintergrundbild der Gesamtansicht ──
     Nur bei "Alle Kanäle". Das Bild liegt fixiert hinter dem Inhalt; ein
     kräftiger dunkler Verlauf darüber hält Texte und Zahlen lesbar —
     ohne den wäre der helle Neon-Bereich des Motivs blendend. */
  /* Bewusst als gestapelte background-image-Ebenen direkt auf dem
     Container statt über ::before/::after mit z-index: Kind-Elemente
     zeichnen automatisch über dem Hintergrund ihres Elternelements, und
     es braucht keine "> *"-Regel, die sonst per Spezifität das
     position: fixed der mobilen Navigationsleiste überschreiben würde.
     Erste Ebene = oberste, also liegt der Verlauf über dem Bild. */
  /* Das Motiv steht ausschliesslich im Kanalbanner ganz oben. Als
     ganzseitiger Hintergrund lag es vorher hinter Karten und Panels und
     machte sie unruhig; der Inhalt steht jetzt auf ruhigem Schwarz. */
  .novi-studio-view.has-all-channels-bg {
    background-image:
      radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.12), transparent 62%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }


  /* ── Kalender: nächster fälliger Upload ──
     Die Zelle bekommt einen leuchtenden Rahmen samt Beschriftung, damit
     sofort erkennbar ist, wann der nächste Upload ansteht. */
  .cal-table td.is-next-upload {
    position: relative;
    background: rgba(168, 85, 247, 0.14);
    box-shadow: inset 0 0 0 2px #a855f7;
    border-radius: 8px;
  }
  .cal-table td.is-next-upload .cal-select {
    border-color: rgba(168, 85, 247, 0.7) !important;
    font-weight: 700;
  }
  .cal-next-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
    font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap; pointer-events: none;
    box-shadow: 0 3px 10px -3px rgba(168, 85, 247, 0.9);
  }
  .cal-table tr.has-next-upload .cal-day-cell {
    color: #c4b5fd; font-weight: 800;
    box-shadow: inset 3px 0 0 #a855f7;
  }

  /* Empfohlene Upload-Zeit (nur Einzelkanal) */
  .novi-cal-besttime {
    display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
    padding: 11px 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), var(--nv-lift-1));
    border: 1px solid rgba(34, 211, 238, 0.3);
  }
  .novi-cal-besttime.is-missing {
    background: rgba(139, 92, 246, 0.06); border-color: rgba(139, 92, 246, 0.18);
  }
  .novi-cal-besttime-icon {
    flex: none; width: 30px; height: 30px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(34, 211, 238, 0.2); color: #22d3ee;
  }
  .novi-cal-besttime-icon svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-cal-besttime-text { display: flex; flex-direction: column; }
  .novi-cal-besttime-text b { font-size: 13px; color: var(--nv-text-strong); }
  .novi-cal-besttime-text span { font-size: 10.5px; color: var(--nv-text-dim); margin-top: 1px; }

  /* ── Einzelkanal: zweispaltig mit Asset-Dashboard rechts ── */
  .novi-ch-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .novi-ch-split-main { min-width: 0; }
  /* Klebt beim Scrollen mit, damit die Assets sichtbar bleiben, während
     man links durch Kennzahlen und Pipeline scrollt. */
  .novi-ch-split-side { position: sticky; top: 8px; }
  .novi-ch-assets {
    position: relative; overflow: hidden; border-radius: 18px; padding: 16px;
    background:
      linear-gradient(160deg, rgba(139, 92, 246, 0.13), var(--nv-lift-1)),
      rgba(18, 16, 30, 0.86);
    border: 1px solid rgba(139, 92, 246, 0.26);
  }
  .novi-ch-assets-head {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--nv-vio-text); margin-bottom: 12px;
  }
  .novi-ch-yt {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 10px 12px; border-radius: 12px; margin-bottom: 14px;
    background: rgba(255, 0, 0, 0.08); border: 1px solid rgba(255, 0, 0, 0.22);
    transition: background .15s ease, border-color .15s ease;
  }
  .novi-ch-yt:hover { background: rgba(255, 0, 0, 0.15); border-color: rgba(255, 0, 0, 0.4); }
  .novi-ch-yt.is-missing { background: rgba(139, 92, 246, 0.07); border-color: rgba(139, 92, 246, 0.18); }
  .novi-ch-yt-icon { flex: none; width: 26px; height: 26px; color: #ff3d3d; }
  .novi-ch-yt-icon svg { width: 100%; height: 100%; }
  .novi-ch-yt-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .novi-ch-yt-name {
    font-size: 12.5px; font-weight: 700; color: var(--nv-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .novi-ch-yt-sub { font-size: 10px; color: var(--nv-text-dim); margin-top: 1px; }
  .novi-ch-yt-arrow {
    width: 14px; height: 14px; flex: none; fill: none; stroke: #9c98b8;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-ch-assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Der Banner ist 16:9 und bekommt darum die volle Breite. */
  .novi-ch-asset[style*="16 / 9"] { grid-column: 1 / -1; }
  .novi-ch-asset-frame {
    aspect-ratio: var(--ratio, 1 / 1); border-radius: 11px; overflow: hidden;
    background: rgba(10, 10, 18, 0.55); border: 1px solid rgba(139, 92, 246, 0.18);
    display: flex; align-items: center; justify-content: center;
  }
  .novi-ch-asset.is-empty .novi-ch-asset-frame { border-style: dashed; }
  /* contain, nicht cover — Figuren und Banner dürfen nicht angeschnitten
     werden, sie dienen hier als verbindliche Referenz. */
  .novi-ch-asset-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .novi-ch-asset-empty { font-size: 9.5px; color: #58547a; text-align: center; padding: 4px; }
  .novi-ch-asset-label {
    font-size: 10px; color: var(--nv-text-dim); text-align: center; margin-top: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ══ Epische Live-KPI-Karten ══
     Jede Kennzahl hat ihren eigenen Farbton (--k). Der Verlauf, der
     Glow-Kreis und der Rahmen leiten sich alle daraus ab, sodass ein
     neuer Ton nur eine Zeile braucht. */
  .novi-ekpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 4px;
  }
  .novi-ekpi {
    --k: #a855f7;
    position: relative; overflow: hidden; border-radius: 18px; padding: 16px 18px 18px;
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--k) 16%, transparent), var(--nv-lift-2)),
      rgba(18, 16, 30, 0.86);
    border: 1px solid color-mix(in srgb, var(--k) 32%, transparent);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
  }
  .novi-ekpi:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--k) 62%, transparent);
    box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--k) 75%, transparent);
  }
  /* Leuchtkreis oben rechts — rein dekorativ, liegt unter dem Inhalt. */
  .novi-ekpi-glow {
    position: absolute; right: -46px; top: -58px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--k) 46%, transparent), transparent 70%);
    pointer-events: none;
  }
  .novi-ekpi > *:not(.novi-ekpi-glow) { position: relative; z-index: 1; }
  .novi-ekpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
  .novi-ekpi-icon {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--k) 22%, transparent);
    color: var(--k);
  }
  .novi-ekpi-icon svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-ekpi-label {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--nv-ekpi-label); line-height: 1.25;
  }
  .novi-ekpi-value {
    font-size: 30px; font-weight: 800; color: var(--nv-text-strong); line-height: 1.05;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    text-shadow: 0 0 26px color-mix(in srgb, var(--k) 45%, transparent);
  }
  .novi-ekpi.is-empty .novi-ekpi-value {
    font-size: 14px; font-weight: 600; color: #6f6d88; text-shadow: none;
  }
  .novi-ekpi-delta { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
  .novi-ekpi-delta:empty { display: none; }
  .novi-ekpi-delta .novi-kpi-delta { margin-left: 0; font-size: 12.5px; }
  .novi-ekpi-delta-note { font-size: 9.5px; color: #6f6d88; text-transform: uppercase; letter-spacing: .05em; }

  /* ── Inszenierung: Einblenden, Scan, Burst, aufsteigende Differenz ── */
  /* Bewusst NICHT über einen Attribut-Selektor ausgeblendet: würde das
     JS ausfallen, blieben die Karten unsichtbar. Das Verstecken setzt
     darum das JS selbst (.is-entering) und nimmt es sofort wieder weg —
     ohne JS sind die Karten schlicht direkt sichtbar. */
  .novi-ekpi.is-entering { opacity: 0; transform: translateY(14px) scale(.97); }
  .novi-ekpi.is-live { animation: novi-ekpi-in .62s cubic-bezier(.2, .9, .25, 1.1) forwards; }
  @keyframes novi-ekpi-in {
    0%   { opacity: 0; transform: translateY(14px) scale(.97); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Ohne JS (oder wenn die Animation nicht startet) darf die Karte nicht
     unsichtbar bleiben — nach kurzer Zeit auf jeden Fall zeigen. */
  @media (prefers-reduced-motion: reduce) {
    .novi-ekpi.is-entering { opacity: 1; transform: none; }
    .novi-ekpi.is-live, .novi-ekpi.is-changed { animation: none; }
    .novi-ekpi-float, .novi-ekpi-burst { display: none; }
  }

  /* Scan-Licht während des Abrufs */
  .novi-ekpi-scan {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; border-radius: inherit;
  }
  .novi-ekpi-scan::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--k) 55%, transparent), transparent);
    filter: blur(2px);
  }
  .novi-ekpi.is-loading { border-color: color-mix(in srgb, var(--k) 60%, transparent); }
  .novi-ekpi.is-loading .novi-ekpi-scan { opacity: 1; }
  .novi-ekpi.is-loading .novi-ekpi-scan::before { animation: novi-scan 1.15s linear infinite; }
  @keyframes novi-scan {
    0%   { transform: translateX(-120%) skewX(-12deg); }
    100% { transform: translateX(320%) skewX(-12deg); }
  }
  .novi-ekpi.is-loading .novi-ekpi-value { opacity: .55; }

  /* Ring-Burst bei echter Veränderung */
  .novi-ekpi-burst {
    position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%; pointer-events: none; opacity: 0;
    border: 2px solid color-mix(in srgb, var(--k) 85%, transparent);
  }
  .novi-ekpi.is-changed .novi-ekpi-burst { animation: novi-burst .95s ease-out; }
  @keyframes novi-burst {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(26); }
  }
  .novi-ekpi.is-changed {
    animation: novi-ekpi-pop .8s cubic-bezier(.2, .9, .25, 1.15);
    border-color: color-mix(in srgb, var(--k) 85%, transparent);
  }
  @keyframes novi-ekpi-pop {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--k) 55%, transparent); }
    35%  { transform: scale(1.045); box-shadow: 0 0 34px -4px color-mix(in srgb, var(--k) 80%, transparent); }
    100% { transform: scale(1); box-shadow: none; }
  }
  /* Grün, wenn gewachsen — rot, wenn gefallen. Überschreibt den Tonwert
     bewusst, damit die Richtung sofort ablesbar ist. */
  .novi-ekpi.is-changed.is-up { --k: #4ade80; }
  .novi-ekpi.is-changed.is-down { --k: #f87171; }

  /* Aufsteigende Differenz */
  .novi-ekpi-float {
    position: absolute; right: 16px; top: 46%;
    font-size: 21px; font-weight: 800; pointer-events: none;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    animation: novi-float-up 2.1s cubic-bezier(.15, .7, .3, 1) forwards;
  }
  .novi-ekpi-float.up { color: var(--nv-good-text); text-shadow: 0 0 20px rgba(74, 222, 128, .95); }
  .novi-ekpi-float.down { color: var(--nv-bad-text); text-shadow: 0 0 20px rgba(248, 113, 113, .95); }
  @keyframes novi-float-up {
    0%   { opacity: 0; transform: translateY(14px) scale(.7); }
    18%  { opacity: 1; transform: translateY(0) scale(1.18); }
    32%  { transform: translateY(-4px) scale(1); }
    100% { opacity: 0; transform: translateY(-52px) scale(.94); }
  }

  /* Delta-Badge einfliegen lassen statt einfach dastehen */
  .novi-ekpi-delta .novi-kpi-delta { animation: novi-delta-in .55s .25s cubic-bezier(.2, .9, .25, 1.2) backwards; }
  @keyframes novi-delta-in {
    0%   { opacity: 0; transform: translateX(-8px) scale(.8); }
    70%  { opacity: 1; transform: translateX(2px) scale(1.12); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  .novi-ekpi.tone-violet { --k: #a855f7; }
  .novi-ekpi.tone-indigo { --k: #6366f1; }
  .novi-ekpi.tone-pink   { --k: #ec4899; }
  .novi-ekpi.tone-cyan   { --k: #22d3ee; }
  .novi-ekpi.tone-amber  { --k: #f59e0b; }
  .novi-ekpi.tone-green  { --k: #4ade80; }

  /* ── Workflow-Start: Checkliste + Schrittfolge ── */
  .novi-ws-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  .novi-ws-check { display: flex; gap: 11px; align-items: flex-start; }
  .novi-ws-check-icon {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
  }
  .novi-ws-check-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-ws-check.ok .novi-ws-check-icon { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-ws-check.missing .novi-ws-check-icon { background: rgba(251, 146, 60, 0.16); color: var(--nv-warn-text); }
  .novi-ws-check-label { font-size: 12.5px; font-weight: 700; color: var(--nv-text); }
  .novi-ws-check-hint { font-size: 11px; color: var(--nv-text-dim2); line-height: 1.45; margin-top: 2px; }

  .novi-ws-steps { display: flex; flex-direction: column; gap: 2px; }
  .novi-ws-step { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; position: relative; }
  .novi-ws-step + .novi-ws-step { border-top: 1px solid rgba(139, 92, 246, 0.12); }
  .novi-ws-step-num {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text); font-size: 12.5px; font-weight: 800;
  }
  .novi-ws-step.first .novi-ws-step-num { background: linear-gradient(135deg, #a855f7, #7c3aed); color: var(--nv-text-strong); }
  .novi-ws-step-title { font-size: 13.5px; font-weight: 700; color: var(--nv-text-strong); }
  .novi-ws-step-desc { font-size: 11.5px; color: var(--nv-text-dim); line-height: 1.5; margin-top: 2px; }

  /* ── Sync Status: Vergleichstabelle ── */
  .novi-sync-rows { display: flex; flex-direction: column; }
  .novi-sync-row {
    display: grid; grid-template-columns: 1fr 90px 90px; gap: 10px; align-items: center;
    padding: 9px 0; border-top: 1px solid rgba(139, 92, 246, 0.12); font-size: 12.5px; color: var(--nv-text-soft);
  }
  .novi-sync-row:first-child { border-top: none; }
  .novi-sync-row-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--nv-text); }
  .novi-sync-row.diff .novi-sync-row-val { font-weight: 800; color: var(--nv-warn-text); }
  .novi-sync-legend {
    display: grid; grid-template-columns: 1fr 90px 90px; gap: 10px; margin-top: 8px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--nv-text-faint);
  }
  .novi-sync-legend span + span { text-align: right; }
  .novi-sync-ok {
    margin-top: 12px; padding: 11px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
    background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.28); color: var(--nv-good-text);
  }

  /* ── Einstellungen: quadratische 1:1-Kacheln ──
     aspect-ratio hält sie exakt quadratisch; auto-fill sorgt dafür, dass
     bei genug Breite vier nebeneinander stehen und sonst umgebrochen
     wird, ohne dass die Kacheln ihre Form verlieren. ── */
  .novi-settings-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
  }
  .novi-settings-tile {
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), var(--nv-lift-2));
    border: 1px solid rgba(139, 92, 246, 0.18); border-radius: 16px; padding: 20px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; cursor: pointer; font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .novi-settings-tile:hover {
    border-color: rgba(168, 85, 247, 0.55);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.15), var(--nv-lift-3));
    transform: translateY(-2px);
  }
  .novi-settings-tile-icon {
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(139, 92, 246, 0.16); color: var(--nv-vio-text);
  }
  .novi-settings-tile-icon svg {
    width: 26px; height: 26px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-settings-tile-title { font-size: 14px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.3; }
  .novi-settings-tile-sub { font-size: 11px; color: var(--nv-text-dim); line-height: 1.45; }

  /* ── Phase 02: 3 Thumbnail Prompt variants ── */
  .novi-thumb-variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
  .novi-thumb-variant-block {
    display: flex; flex-direction: column; gap: 8px; border-radius: 14px; padding: 14px;
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18); border-left-width: 3px;
  }
  .novi-thumb-variant-block label { font-size: 11px; font-weight: 700; color: var(--nv-text-mut); }
  .novi-thumb-prompt-textarea {
    width: 100%; min-height: 150px; font-family: monospace; font-size: 11.5px; color: var(--nv-text); line-height: 1.5;
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 8px; padding: 9px; outline: none; resize: vertical;
  }
  .novi-thumb-prompt-textarea:focus { border-color: rgba(168, 85, 247, 0.6); }
  .novi-thumb-variant-label {
    align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
  }
  .novi-thumb-variant-1 { border-left-color: #f97316; }
  .novi-thumb-variant-1 .novi-thumb-variant-label { background: rgba(249, 115, 22, 0.16); color: var(--nv-warn-text); }
  .novi-thumb-variant-2 { border-left-color: #6366f1; }
  .novi-thumb-variant-2 .novi-thumb-variant-label { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
  .novi-thumb-variant-3 { border-left-color: #a855f7; }
  .novi-thumb-variant-3 .novi-thumb-variant-label { background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); }

  /* ── Phase 02: 3 Thumbnail upload slots ── */
  .novi-thumb-upload-badge {
    float: right; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: none;
    background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text); padding: 3px 10px; border-radius: 999px;
  }
  .novi-thumb-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .novi-thumb-upload-card {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  }
  .novi-thumb-preview-16x9 {
    width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
    background: rgba(10, 10, 18, 0.5); border: 1px dashed rgba(139, 92, 246, 0.25);
    display: flex; align-items: center; justify-content: center;
    color: #58547a; font-size: 10.5px; text-align: center; padding: 6px;
  }
  /* object-fit: contain (not cover) — the full generated thumbnail must
     stay visible for review, never cropped. */
  .novi-thumb-preview-16x9 img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .novi-thumb-dims { font-size: 10px; color: var(--nv-text-faint); margin-left: 6px; }
  .novi-thumb-upload-notes {
    width: 100%; min-height: 50px; font-family: inherit; font-size: 11.5px; color: var(--nv-text);
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 8px; padding: 7px 9px; outline: none; resize: vertical;
  }
  .novi-thumb-upload-notes:focus { border-color: rgba(168, 85, 247, 0.6); }

  /* ── Phase 03: Research & Quellenarbeit ── */
  .novi-cw-status-badge.st-quelleneingefuegt { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
  .novi-cw-status-badge.st-claimledgererstellt { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
  .novi-p03-count-badge {
    float: right; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: none;
    background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text); padding: 3px 10px; border-radius: 999px;
  }
  .novi-p03-item {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .novi-p03-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .novi-p03-item-num {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); padding: 3px 10px; border-radius: 999px;
  }
  .novi-p03-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
  .novi-p03-item-grid .novi-field input,
  .novi-p03-item-grid .novi-field textarea,
  .novi-p03-item-grid .novi-field select { font-size: 12px; padding: 7px 9px; }
  .novi-p03-item-grid .novi-field textarea { min-height: 52px; }
  .novi-p03-empty { font-size: 12.5px; color: #82809c; margin: 0 0 12px; }
  /* Status/level pills reuse the same muted-dark palette as the rest of
     J.A.R.V.I.S.; colours map to meaning (green = solid, red = problem). */
  .novi-p03-pill {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px;
    border-radius: 999px; flex: none; white-space: nowrap;
  }
  .novi-p03-pill.neutral { background: rgba(139, 92, 246, 0.1); color: var(--nv-text-dim2); }
  .novi-p03-pill.good { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-p03-pill.warn { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-p03-pill.bad { background: rgba(248, 113, 113, 0.16); color: var(--nv-bad-text); }
  .novi-p03-pill.info { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
  .novi-p03-gate-list { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--nv-text-mut); line-height: 1.7; }
  .novi-p03-gate-list li.ok { color: var(--nv-good-text); }
  .novi-p03-gate-list li.missing { color: var(--nv-warn-text); }

  /* ── Phase 04: Skript erstellen ── */
  .novi-cw-status-badge.st-entwurfgespeichert { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
  .novi-p04-qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
  .novi-p04-qc-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.16);
    font-size: 12px; color: var(--nv-text-soft); line-height: 1.45; cursor: pointer;
  }
  .novi-p04-qc-item:hover { border-color: rgba(168, 85, 247, 0.38); }
  .novi-p04-qc-item.checked { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.3); color: #d4f5df; }
  .novi-p04-qc-item input { flex: none; margin-top: 2px; width: 15px; height: 15px; accent-color: #a855f7; cursor: pointer; }
  .novi-p04-qc-summary {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
    font-size: 12px; color: var(--nv-text-mut);
  }
  .novi-p04-qc-track { flex: 1; min-width: 140px; height: 6px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-p04-qc-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #4ade80); }
  /* The long-form script fields need much more room than the standard
     Novi textarea — this is a writer-room view, not a form. */
  .novi-p04-script-textarea {
    width: 100%; min-height: 300px; font-family: inherit; font-size: 13px; color: var(--nv-text); line-height: 1.65;
    background: var(--nv-veil); border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 9px; padding: 14px 16px; outline: none; resize: vertical;
  }
  .novi-p04-script-textarea:focus { border-color: rgba(168, 85, 247, 0.6); }
  /* ══ Vor und zurück zwischen den Phasen ══════════════════════════════
     Steht über und unter dem Inhalt jeder Phasenseite. In der Mitte, wo
     man gerade ist — damit die beiden Knöpfe eine Richtung bekommen. ══ */
  .novi-phase-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; margin: 0 0 16px; border-radius: 12px;
    background: rgba(24, 16, 44, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.18);
  }
  /* Die untere Leiste bekommt ihren Abstand oben statt unten. */
  .novi-ph-split-main > div:last-child > .novi-phase-nav { margin: 18px 0 0; }
  .novi-phase-nav-here {
    flex: 1; text-align: center; min-width: 120px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: #8a87a6;
  }
  .novi-phase-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 700; color: #ede9fe;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.32);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .novi-phase-nav-btn:hover { background: rgba(139, 92, 246, 0.3); border-color: #a78bfa; }
  .novi-phase-nav-btn.is-next {
    color: #0b0718;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    border-color: transparent;
  }
  .novi-phase-nav-btn.is-next:hover { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); }
  .novi-phase-nav-btn svg {
    width: 13px; height: 13px; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-phase-nav-end { font-size: 11px; color: #6f6d88; font-style: italic; }
  @media (max-width: 640px) {
    .novi-phase-nav { gap: 8px; }
    .novi-phase-nav-here { order: -1; flex-basis: 100%; }
    .novi-phase-nav-btn { flex: 1; justify-content: center; }
  }

  /* ══ Phase 05 als Abfolge von Schritten ══════════════════════════════
     Die Boxen darin sind unverändert — sie stehen nur in einer Karte mit
     Nummer und einem Satz, der sagt, was dort zu tun ist. ══ */
  .novi-step-overview {
    padding: 16px 18px; margin-bottom: 18px; border-radius: 16px;
    background: linear-gradient(150deg, rgba(38, 26, 62, 0.9), rgba(18, 12, 34, 0.92));
    border: 1px solid rgba(139, 92, 246, 0.28);
  }
  .novi-step-overview-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  }
  .novi-step-overview-title { font-size: 13px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-step-overview-count { font-size: 11px; color: var(--nv-text-mut2); }
  .novi-step-overview-list { display: flex; gap: 6px; flex-wrap: wrap; }
  .novi-step-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--nv-text-mut2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  .novi-step-chip b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    font-size: 9.5px; font-weight: 800; color: #0b0718;
    background: rgba(196, 181, 253, 0.85);
  }
  .novi-step-chip.is-done { color: var(--nv-good-text2); border-color: rgba(74, 222, 128, 0.32); }
  .novi-step-chip.is-done b { background: #4ade80; }
  .novi-step-vo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    font-size: 11.5px; color: var(--nv-text-mut2);
  }
  .novi-step-vo-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--nv-text-dim2);
  }
  .novi-step-vo.is-ok .novi-step-vo-value { color: var(--nv-good-text2); font-weight: 700; }
  .novi-step-vo b { color: var(--nv-vio-text-soft); }

  .novi-step { margin-bottom: 20px; }
  .novi-step-head {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
  }
  .novi-step-nr {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #0b0718;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
  }
  .novi-step.is-done .novi-step-nr { background: linear-gradient(135deg, #86efac, #22c55e); }
  .novi-step-head-text { flex: 1; min-width: 0; }
  .novi-step-title { font-size: 15px; font-weight: 800; color: var(--nv-text-strong); line-height: 1.25; }
  .novi-step-sub { margin-top: 2px; font-size: 11.5px; color: var(--nv-text-dim2); line-height: 1.45; }
  /* Die Linie links bündelt optisch, was zu einem Schritt gehört. */
  .novi-step-body {
    padding-left: 14px; margin-left: 13px;
    border-left: 2px solid rgba(139, 92, 246, 0.22);
  }
  .novi-step.is-done .novi-step-body { border-left-color: rgba(74, 222, 128, 0.28); }
  @media (max-width: 760px) {
    .novi-step-body { padding-left: 10px; margin-left: 6px; }
  }

  .novi-p04-metrics { display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 11.5px; color: var(--nv-text-dim2); margin-top: 8px; }
  .novi-p04-metrics b { color: var(--nv-vio-text); font-weight: 700; }

  /* Das finale Skript in zwei kopierbaren Hälften. */
  .novi-p04-halves { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(139, 92, 246, 0.18); }
  .novi-p04-halves-head {
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--nv-text-dim2); margin-bottom: 10px;
  }
  .novi-p04-halves-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .novi-p04-half {
    border-radius: 14px; padding: 12px;
    background: rgba(10, 10, 18, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  .novi-p04-half-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
  }
  .novi-p04-half-title { font-size: 11.5px; font-weight: 800; color: var(--nv-vio-text-soft); }
  .novi-p04-half-copy {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--nv-vio-text-soft);
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.38);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .novi-p04-half-copy:hover { background: rgba(139, 92, 246, 0.34); border-color: #a78bfa; }
  .novi-p04-half-copy svg {
    width: 12px; height: 12px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-p04-half-text {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 200px; padding: 10px; border-radius: 10px;
    font: inherit; font-size: 12px; line-height: 1.5; color: var(--nv-text-soft);
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(139, 92, 246, 0.16);
  }
  .novi-p04-half-text:focus-visible {
    outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  }
  .novi-p04-half-meta { margin-top: 6px; font-size: 10.5px; color: var(--nv-text-dim2); font-variant-numeric: tabular-nums; }
  /* Vertonung je Skript-Hälfte (11.08.): hochladen, anhören, ersetzen —
     direkt unter dem Textblock, den sie vertont. */
  .novi-p04-half-audio { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(139, 92, 246, 0.16); }
  .novi-p04-half-audio .novi-vo-block { margin: 0; }
  .novi-p04-vo-stand {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    margin-top: 12px; padding: 10px 12px; border-radius: 12px;
    background: rgba(10, 8, 24, 0.5); border: 1px solid rgba(139, 92, 246, 0.22);
    font-size: 11.5px; color: var(--nv-text-mut);
  }
  .novi-p04-vo-stand b { font-size: 12.5px; color: #fff; }
  .novi-p04-vo-stand.ist-fertig { border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.07); }
  .novi-p04-vo-stand.ist-fertig b { color: #45d483; }

  /* Vertonung: Knopf zum Werkzeug, darunter die Stimme des Kanals. */
  .novi-p04-voice {
    margin-top: 14px; padding: 14px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: rgba(24, 16, 44, 0.55);
    border: 1px solid rgba(45, 212, 191, 0.24);
  }
  .novi-p04-voice-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 11px; text-decoration: none;
    font-size: 13px; font-weight: 800; color: #041b19;
    background: linear-gradient(135deg, #5eead4, #2dd4bf);
    box-shadow: 0 10px 26px -14px rgba(45, 212, 191, 0.9);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .novi-p04-voice-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px rgba(45, 212, 191, 0.95);
  }
  .novi-p04-voice-btn svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-p04-voice-name { text-align: center; }
  .novi-p04-voice-label {
    display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--nv-text-dim2);
  }
  .novi-p04-voice-name b { display: block; margin-top: 2px; font-size: 14px; color: #5eead4; }
  .novi-p04-voice-name.is-missing b { color: #7c6ba8; font-style: italic; }
  .novi-p04-voice-hint { display: block; margin-top: 3px; font-size: 10.5px; color: var(--nv-text-dim2); }

  /* Die hochgeladene Vertonung — dieselben Klassen in Phase 04 und im
     Video-Dashboard, dort nur schmaler. */
  .novi-vo-block {
    width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(10, 10, 18, 0.45);
    border: 1px solid rgba(45, 212, 191, 0.2);
  }
  .novi-vo-block.is-empty { border-style: dashed; border-color: rgba(139, 92, 246, 0.24); }
  .novi-vo-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--nv-text-dim2);
  }
  .novi-vo-file { text-align: center; }
  .novi-vo-file b { display: block; font-size: 12.5px; color: var(--nv-vio-text-soft); word-break: break-word; }
  .novi-vo-file span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--nv-text-dim2); }
  .novi-vo-player { width: 100%; max-width: 420px; height: 34px; }
  .novi-vo-hint { font-size: 10px; color: #7c6ba8; text-align: center; }
  .novi-vo-missing { font-size: 11.5px; color: #7c6ba8; font-style: italic; margin: 0; }
  .novi-vo-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  /* Im Dashboard ist die Spalte schmal: der Player nutzt die volle
     Breite, Dateiname und Hinweis rücken enger zusammen. */
  .novi-vd .novi-vo-block { margin-top: 0; padding: 10px; gap: 6px; }
  .novi-vd .novi-vo-player { max-width: none; height: 30px; }
  .novi-vd .novi-vo-file b { font-size: 11.5px; }

  /* Kompakte Scene Table: eine Zeile je Szene, Details auf Wunsch. */
  .novi-p05-scene-rows { display: flex; flex-direction: column; gap: 6px; }
  .novi-p05-scene-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(10, 10, 18, 0.45);
    border: 1px solid rgba(139, 92, 246, 0.16);
  }
  .novi-p05-scene-row-num {
    flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 11px; font-weight: 800; color: #0b0718;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
  }
  .novi-p05-scene-row-main { flex: 1; min-width: 0; }
  .novi-p05-scene-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .novi-p05-scene-row-time { font-size: 10.5px; color: #a9a2cc; font-variant-numeric: tabular-nums; }
  .novi-p05-scene-row-text {
    margin-top: 3px; font-size: 11.5px; color: #cfccdf; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* Character JSON unter den Referenzbildern im Video-Dashboard. */
  .novi-vd-char-json {
    margin-top: 6px; border-radius: 8px; overflow: hidden;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(139, 92, 246, 0.18);
  }
  .novi-vd-char-json pre {
    margin: 0; padding: 6px 8px; max-height: 88px; overflow: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 9px; line-height: 1.45; color: #b9b3d6;
    white-space: pre-wrap; word-break: break-word;
  }
  .novi-vd-char-jsonsrc { display: block; margin-top: 3px; font-size: 9px; color: #6f6d88; }

  /* Bilder-Ordner (Codex): Kopfzeile mit Name und Zählerstand — groß in
     Phase 05, Schritt 3, kompakt im Video-Dashboard. */
  .novi-p05-folder-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
    font-size: 12px; color: #a9a2cc;
  }
  .novi-p05-folder-head b { color: #ede9fe; word-break: break-word; }
  .novi-vd-folder { font-size: 11px; }
  .novi-vd-folder .novi-p05-folder-head { font-size: 11px; margin-bottom: 6px; }
  .novi-vd-folder .novi-p03-empty { font-size: 11px; margin: 0 0 6px; }
  .novi-vd-folder .novi-asset-btn { font-size: 10.5px; padding: 5px 9px; }

  @media (max-width: 900px) {
    .novi-p04-halves-grid { grid-template-columns: 1fr; }
  }

  /* ── Phase 05: Produktion ── */
  .novi-cw-status-badge.st-voiceoverhochgeladen { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
  .novi-cw-status-badge.st-szenenplanerstellt { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
  .novi-cw-status-badge.st-bildpromptserstellt { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
  .novi-cw-status-badge.st-bilderhochgeladen { background: rgba(217, 70, 239, 0.16); color: #e879f9; }
  .novi-p05-scene { border-left-width: 3px; border-left-color: rgba(168, 85, 247, 0.55); }
  .novi-p05-scene-thumb {
    width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-top: 4px;
    background: rgba(10, 10, 18, 0.5); border: 1px dashed rgba(139, 92, 246, 0.25);
    display: flex; align-items: center; justify-content: center; color: #58547a; font-size: 10px; text-align: center; padding: 4px;
  }
  .novi-p05-scene-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .novi-p05-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .novi-p05-gallery-item {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px;
  }
  .novi-p05-gallery-frame {
    width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    background: rgba(10, 10, 18, 0.5); border: 1px solid rgba(139, 92, 246, 0.18);
    display: flex; align-items: center; justify-content: center; color: #58547a; font-size: 10px; text-align: center; padding: 4px;
  }
  /* contain, never cover — a production still must stay fully visible for review. */
  .novi-p05-gallery-frame img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
  /* Vollbild-Ansicht der Datenbank-Galerie: Klick auf ein Bild oeffnet
     es bildschirmfuellend; Schliessen per X, Escape oder Klick auf den
     dunklen Hintergrund. */
  .novi-p05-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(4, 6, 12, 0.93); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
  .novi-p05-lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6); cursor: default; }
  .novi-p05-lightbox-name { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; color: #cbd5e1; font-size: 12px; background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 999px; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .novi-p05-lightbox-close { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
  .novi-p05-lightbox-close:hover { background: rgba(255, 255, 255, 0.15); }
  .novi-p05-gallery-name { font-size: 10.5px; color: var(--nv-text-mut); word-break: break-all; line-height: 1.35; }
  .novi-p05-upload-zone {
    border: 1px dashed rgba(139, 92, 246, 0.35); border-radius: 12px; padding: 18px;
    text-align: center; background: rgba(139, 92, 246, 0.04); margin-bottom: 14px;
  }
  .novi-p05-upload-zone .novi-asset-btn { display: inline-flex; }
  .novi-p05-progress-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--nv-text-mut); margin-bottom: 12px; }
  .novi-p05-progress-track { flex: 1; min-width: 140px; height: 6px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); overflow: hidden; }
  .novi-p05-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #38bdf8); }

  /* OneDrive-Block im Bilder-Ordner: eigene Spur unter dem lokalen
     Ordner, damit sofort klar ist, woher die Bilder kommen. */
  /* Leerer Vitals-Kasten faellt ganz weg — sonst bliebe ein Rahmen ohne
     Inhalt stehen. Abgemeldet ist er gefuellt und damit sichtbar. */
  /* Leere Streifen ganz aus dem Layout nehmen — sonst bleibt eine
     duenne Linie stehen, wo vorher der Inhalt war. */
  #jvs-vitals:empty, #novi-puls:empty, #jvs-missionen:empty { display: none; }
  /* Auf Wunsch nacheinander abgeraeumt (16.08.): Heute, Konsole,
     Command Deck und Gedaechtnis. Damit bleibt auf der Startseite die
     Orb-Buehne allein stehen. Die Kaesten bleiben im Dokument, damit
     kein Code ins Leere greift, der sie fuellt — sie werden nur nicht
     mehr angezeigt. Zurueckholen heisst: diese eine Regel loeschen. */
  #jvs-heute, #jvs-konsole, #jvs-deck, #jvs-vault { display: none; }
  .novi-p05-pruefstand { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid rgba(159, 214, 255, .18); background: rgba(159, 214, 255, .05); margin-bottom: 10px; }
  .novi-p05-pruefstand b { font-size: 1.05rem; }
  .novi-p05-pruefstand span { font-size: .85rem; color: #a9c2d1; }
  .novi-p05-pruefstand.ist-gut { border-color: rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .08); }
  .novi-p05-pruefstand.ist-schlecht { border-color: rgba(255, 123, 123, .45); background: rgba(255, 123, 123, .08); }
  .novi-p05-fehlstellen { margin: 8px 0 0; font-size: .85rem; color: #ffb054; }
  .novi-p05-fehlstellen.ist-voll { color: #54d98c; }
  /* Bilder-Band: steht oben in Phase 05 und beantwortet die Frage
     „wo sind meine Bilder" ohne einen einzigen Klapp-Schritt. */
  .novi-p05-bilderband {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    justify-content: space-between;
    margin: 0 0 14px; padding: 11px 13px; border-radius: 12px;
    border: 1px solid rgba(255, 176, 84, .38); background: rgba(255, 176, 84, .09);
  }
  .novi-p05-bilderband.ist-da {
    border-color: rgba(53, 208, 127, .42); background: rgba(53, 208, 127, .09);
  }
  .novi-p05-bilderband-text { font-size: .88rem; color: #d7e6f0; flex: 1 1 220px; }
  .novi-p05-bilderband-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
  /* Galerie im Vollbild: alle Bilder auf einmal, Tipp öffnet gross. */
  .novi-p05-galerie {
    position: fixed; inset: 0; z-index: 9998; overflow-y: auto;
    background: rgba(4, 7, 13, .97); padding: 0 0 40px;
  }
  .novi-p05-galerie-kopf {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; background: rgba(4, 7, 13, .96);
    border-bottom: 1px solid #1c3a52;
  }
  .novi-p05-galerie-kopf b { color: #e6faff; font-size: 1rem; }
  .novi-p05-galerie-kopf span { color: #8ba3b5; font-size: .82rem; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .novi-p05-galerie-zu {
    flex: none; border: 1px solid #1c3a52; border-radius: 9px;
    background: rgba(11, 20, 33, .6); color: #c9dbe8;
    font-size: 20px; line-height: 1; cursor: pointer;
    min-width: 40px; min-height: 40px;
  }
  .novi-p05-galerie-raster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; padding: 14px 16px;
  }
  .novi-p05-galerie-raster figure { margin: 0; }
  .novi-p05-galerie-raster img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in;
    border-radius: 10px; border: 1px solid #1c3a52; display: block; background: #0b1421;
  }
  .novi-p05-galerie-raster figcaption {
    font-size: 11px; color: #8ba3b5; margin-top: 4px; word-break: break-all;
  }
  .novi-od-block {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed rgba(139, 92, 246, 0.28);
  }
  .novi-od-block:empty { display: none; }
  .novi-od-pfad { font-size: 11px; color: #a9a2cc; margin-bottom: 6px; word-break: break-word; }
  .novi-od-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-height: 260px; overflow-y: auto; }
  .novi-od-zeile {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 9px;
    background: rgba(139, 92, 246, 0.06); color: #ede9fe;
    font-family: inherit; font-size: 12px; padding: 9px 11px;
    /* Tippziel-Mindesthoehe: der Ordnerwechsel passiert am Handy. */
    min-height: 40px;
  }
  .novi-od-zeile:hover { border-color: rgba(139, 92, 246, 0.5); }
  .novi-od-zeile em { font-style: normal; color: #a9a2cc; font-size: 11px; }
  .novi-od-zahl { font-size: 11px; color: #a9a2cc; margin: 0 0 8px; }
  /* Freigabelink-Zeile: am Handy untereinander, damit das Feld breit
     genug für eine lange Adresse bleibt. */
  .novi-od-linkzeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .novi-od-linkzeile input {
    flex: 1 1 200px; min-width: 0; min-height: 40px;
    border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 9px;
    background: rgba(15, 12, 30, 0.6); color: #ede9fe;
    font-family: inherit; font-size: 12px; padding: 8px 11px;
  }
  .novi-od-linkzeile input:focus { outline: none; border-color: rgba(139, 92, 246, 0.65); }
  .novi-od-linkzeile .novi-asset-btn { flex: none; }
  /* Diagnose-Ausgabe: bewusst nüchtern und vollständig lesbar. */
  .novi-od-diag { margin-top: 10px; font-size: 11px; color: #c9c3e4; }
  .novi-od-diag p { margin: 0 0 6px; }
  .novi-od-diagzeile {
    border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 8px;
    padding: 6px 9px; margin-bottom: 5px; word-break: break-word;
  }
  .novi-od-diagzeile.ist-gut { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.07); }
  .novi-od-diagzeile span { color: #9c94bd; }
  /* Geholte Bilder als kleines Raster — am Handy zwei Spalten. */
  .novi-up-raster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px; margin-top: 10px;
  }
  .novi-up-kachel { margin: 0; }
  .novi-up-kachel img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 8px; border: 1px solid rgba(139, 92, 246, 0.25); display: block;
  }
  .novi-up-kachel figcaption {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    font-size: 10px; color: #a9a2cc; margin-top: 3px; word-break: break-all;
  }
  .novi-up-kachel figcaption button {
    flex: none; border: none; background: none; color: #e26a6a;
    font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
    /* Tippziel gross genug fuers Handy */ min-width: 26px; min-height: 26px;
  }
  .novi-p05-vo-card {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    background: rgba(45, 212, 191, 0.05); border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 12px; padding: 14px 16px;
  }
  .novi-p05-vo-icon {
    flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(45, 212, 191, 0.14); color: #2dd4bf;
  }
  .novi-p05-vo-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-p05-vo-meta { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--nv-text-dim2); line-height: 1.6; }
  .novi-p05-vo-meta b { display: block; font-size: 13px; color: var(--nv-text); font-weight: 650; word-break: break-all; }
  .novi-p05-rules-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--nv-text-mut); line-height: 1.75; columns: 2; column-gap: 26px; }
  @media (max-width: 700px) { .novi-p05-rules-list { columns: 1; } }

  /* ── Phase 07: Qualitätsprüfung & Master Approval ── */
  .novi-cw-status-badge.st-videohochgeladen { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
  .novi-cw-status-badge.st-fehlergefunden { background: rgba(248, 113, 113, 0.16); color: var(--nv-bad-text); }
  .novi-cw-status-badge.st-masterapproved { background: rgba(74, 222, 128, 0.2); color: var(--nv-good-text); }
  .novi-p07-group {
    background: rgba(139, 92, 246, 0.04); border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
  }
  .novi-p07-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .novi-p07-group-title { font-size: 12px; font-weight: 700; color: var(--nv-vio-text); letter-spacing: 0.02em; }
  .novi-p07-group-count { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(139, 92, 246, 0.14); color: var(--nv-vio-text); }
  .novi-p07-group-count.done { background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); }
  .novi-p07-err-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .novi-p07-err-chip {
    display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 92px;
    padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.18);
    background: rgba(139, 92, 246, 0.05);
  }
  .novi-p07-err-chip b { font-size: 20px; font-weight: 800; line-height: 1; color: var(--nv-text); }
  .novi-p07-err-chip span { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nv-text-dim2); }
  .novi-p07-err-chip.critical.has { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.1); }
  .novi-p07-err-chip.critical.has b { color: var(--nv-bad-text); }
  .novi-p07-err-chip.major.has { border-color: rgba(251, 146, 60, 0.5); background: rgba(251, 146, 60, 0.1); }
  .novi-p07-err-chip.major.has b { color: var(--nv-warn-text); }
  .novi-p07-err-chip.minor.has b { color: var(--nv-yellow-text); }
  .novi-p07-err-chip.cosmetic.has b { color: #a5b4fc; }
  .novi-p07-error { border-left-width: 3px; }
  .novi-p07-error.sev-critical { border-left-color: #f87171; }
  .novi-p07-error.sev-major { border-left-color: #fb923c; }
  .novi-p07-error.sev-minor { border-left-color: #facc15; }
  .novi-p07-error.sev-cosmetic { border-left-color: #a5b4fc; }
  .novi-p07-error.is-resolved { opacity: 0.62; }
  .novi-p07-master-banner {
    border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
    font-size: 12.5px; line-height: 1.55; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .novi-p07-master-banner.blocked { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.32); color: #fca5a5; }
  .novi-p07-master-banner.ready { background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.32); color: var(--nv-good-text2); }
  .novi-p07-master-banner.approved { background: linear-gradient(135deg, rgba(74, 222, 128, 0.14), rgba(168, 85, 247, 0.12)); border: 1px solid rgba(74, 222, 128, 0.4); color: #d4f5df; }
  .novi-p07-master-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); }
  .novi-p07-master-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-p07-approve-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .novi-p07-video-meta { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 11px; color: var(--nv-text-dim2); margin-top: 4px; }

  /* ── Phase 08: Upload & Analytics ── */
  .novi-cw-status-badge.st-uploadpaketerstellt { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
  .novi-cw-status-badge.st-uploadvorbereitet { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
  .novi-cw-status-badge.st-geplant { background: rgba(250, 204, 21, 0.16); color: var(--nv-yellow-text); }
  .novi-cw-status-badge.st-veroeffentlicht { background: rgba(74, 222, 128, 0.18); color: var(--nv-good-text); }
  .novi-cw-status-badge.st-analyticseingetragen { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
  .novi-cw-status-badge.st-abgeschlossen { background: linear-gradient(135deg, rgba(74,222,128,0.22), rgba(168,85,247,0.22)); color: #d4f5df; }
  .novi-p08-copy-field { position: relative; }
  .novi-p08-copy-field .novi-p08-copy-btn {
    position: absolute; top: 0; right: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    padding: 3px 10px; border-radius: 999px; cursor: pointer;
    background: rgba(139, 92, 246, 0.16); color: var(--nv-vio-text); border: 1px solid rgba(139, 92, 246, 0.3);
    font-family: inherit;
  }
  .novi-p08-copy-field .novi-p08-copy-btn:hover { background: rgba(168, 85, 247, 0.28); color: var(--nv-text-strong); }
  .novi-p08-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .novi-p08-analytics-card {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  }
  .novi-p08-analytics-card.filled { border-color: rgba(45, 212, 191, 0.32); background: rgba(45, 212, 191, 0.05); }
  .novi-p08-analytics-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .novi-p08-analytics-title { font-size: 13px; font-weight: 700; color: var(--nv-text); }
  .novi-p08-analytics-grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 10px; }
  .novi-p08-analytics-grid-fields .novi-field input,
  .novi-p08-analytics-grid-fields .novi-field textarea,
  .novi-p08-analytics-grid-fields .novi-field select { font-size: 12px; padding: 7px 9px; }
  .novi-p08-analytics-grid-fields .novi-field textarea { min-height: 52px; }
  .novi-p08-readout { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(139, 92, 246, 0.16); }
  .novi-p08-readout-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--nv-text-mut); }
  .novi-p08-readout-row .novi-p03-pill { flex: none; }
  .novi-p08-milestone {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px;
    background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.2);
    font-size: 12.5px; color: var(--nv-text-soft); margin-bottom: 14px;
  }
  .novi-p08-milestone.published { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.3); color: #b7f0c9; }
  .novi-p08-milestone.done { background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(168,85,247,0.12)); border-color: rgba(74,222,128,0.36); color: #d4f5df; }
  .novi-p08-milestone-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); }
  .novi-p08-milestone-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-p08-link { color: var(--nv-vio-text); text-decoration: none; word-break: break-all; }
  .novi-p08-link:hover { text-decoration: underline; }
  .novi-hero-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ── Workflow-Orchestrator & Gates ── */
  .novi-orc-panel {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, rgba(139, 92, 246, 0.12), rgba(56, 189, 248, 0.05) 55%, rgba(255,255,255,0.015));
    border: 1px solid rgba(139, 92, 246, 0.28); border-radius: 18px; padding: 20px 22px; margin-bottom: 18px;
  }
  .novi-orc-panel::after {
    content: ""; position: absolute; top: -60px; right: -50px; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16), transparent 70%); pointer-events: none;
  }
  .novi-orc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .novi-orc-title { font-size: 14px; font-weight: 800; color: var(--nv-text-strong); letter-spacing: 0.01em; }
  .novi-orc-sub { font-size: 11px; color: var(--nv-text-dim2); }
  .novi-orc-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
  .novi-orc-progress-track { flex: 1; min-width: 160px; height: 9px; border-radius: 999px; background: rgba(10, 10, 18, 0.55); overflow: hidden; border: 1px solid rgba(139,92,246,0.18); }
  .novi-orc-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #38bdf8, #4ade80); transition: width .35s ease; }
  .novi-orc-progress-pct { font-size: 22px; font-weight: 800; color: var(--nv-text-strong); flex: none; }
  .novi-orc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; margin-bottom: 16px; }
  .novi-orc-grid > div { font-size: 12.5px; color: #e0ddf0; }
  .novi-orc-grid b { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nv-text-faint); margin-bottom: 3px; }
  .novi-orc-next {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(10, 10, 18, 0.45); border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 12px; padding: 13px 16px; margin-bottom: 14px;
  }
  .novi-orc-next-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(168, 85, 247, 0.18); color: var(--nv-vio-text); }
  .novi-orc-next-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .novi-orc-next-text { flex: 1; min-width: 180px; font-size: 13px; color: var(--nv-text-strong); font-weight: 600; line-height: 1.45; }
  .novi-orc-next-text span { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nv-text-dim2); margin-bottom: 3px; }
  .novi-orc-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
  .novi-orc-issue-box { border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.55; }
  .novi-orc-issue-box.blockers { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.28); color: #fca5a5; }
  .novi-orc-issue-box.warnings { background: rgba(251, 146, 60, 0.07); border: 1px solid rgba(251, 146, 60, 0.26); color: #fdba74; }
  .novi-orc-issue-box.missing { background: rgba(139, 92, 246, 0.07); border: 1px solid rgba(139, 92, 246, 0.24); color: var(--nv-vio-text); }
  .novi-orc-issue-box.clean { background: rgba(74, 222, 128, 0.07); border: 1px solid rgba(74, 222, 128, 0.26); color: var(--nv-good-text2); }
  .novi-orc-issue-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
  .novi-orc-issue-count { background: rgba(0,0,0,0.28); border-radius: 999px; padding: 1px 8px; font-size: 10px; }
  .novi-orc-issue-box ul { margin: 0; padding-left: 16px; }
  .novi-orc-issue-box li { margin-bottom: 3px; }
  .novi-orc-checked { font-size: 10.5px; color: #6f6c8a; }

  .novi-gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
  .novi-gate-card {
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.18); border-left-width: 3px;
    border-radius: 14px; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px;
  }
  .novi-gate-card.g-bestanden { border-left-color: #4ade80; background: rgba(74, 222, 128, 0.06); }
  .novi-gate-card.g-abgeschlossen { border-left-color: #4ade80; background: rgba(74, 222, 128, 0.08); }
  .novi-gate-card.g-inbearbeitung { border-left-color: #a855f7; }
  .novi-gate-card.g-bereitzurpruefung { border-left-color: #38bdf8; background: rgba(56, 189, 248, 0.06); }
  .novi-gate-card.g-warnung { border-left-color: #fb923c; background: rgba(251, 146, 60, 0.06); }
  .novi-gate-card.g-blockiert { border-left-color: #f87171; background: rgba(248, 113, 113, 0.06); }
  .novi-gate-card.g-nichtgestartet { border-left-color: rgba(139, 92, 246, 0.3); }
  .novi-gate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .novi-gate-name { font-size: 13px; font-weight: 700; color: var(--nv-text-strong); line-height: 1.3; }
  .novi-gate-num { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-text-faint); margin-bottom: 3px; }
  .novi-gate-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; flex: none; white-space: nowrap; }
  .novi-gate-badge.g-bestanden, .novi-gate-badge.g-abgeschlossen { background: rgba(74, 222, 128, 0.18); color: var(--nv-good-text); }
  .novi-gate-badge.g-inbearbeitung { background: rgba(168, 85, 247, 0.2); color: var(--nv-vio-text); }
  .novi-gate-badge.g-bereitzurpruefung { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
  .novi-gate-badge.g-warnung { background: rgba(251, 146, 60, 0.2); color: var(--nv-warn-text); }
  .novi-gate-badge.g-blockiert { background: rgba(248, 113, 113, 0.2); color: var(--nv-bad-text); }
  .novi-gate-badge.g-nichtgestartet { background: rgba(139, 92, 246, 0.1); color: var(--nv-text-dim2); }
  .novi-gate-phases { font-size: 10.5px; color: var(--nv-text-dim2); }
  .novi-gate-list { margin: 0; padding-left: 15px; font-size: 11px; line-height: 1.55; }
  .novi-gate-list.blockers { color: #fca5a5; }
  .novi-gate-list.warnings { color: #fdba74; }
  .novi-gate-detail { font-size: 11.5px; color: var(--nv-text-mut); line-height: 1.6; border-top: 1px solid rgba(139,92,246,0.16); padding-top: 9px; }
  .novi-gate-detail b { color: var(--nv-text); }
  .novi-gate-card .novi-card-cta { margin-top: auto; padding: 7px; font-size: 11px; }

  /* ── Gate-Overlay ────────────────────────────────────────────────────
     Die Gate-Übersicht steht nicht mehr dauerhaft auf der Projektseite,
     sondern wird über "Warum blockiert?" im Fortschrittspanel geöffnet.
     Dadurch bleibt die Seite aufgeräumt und die volle Begründung ist
     trotzdem einen Klick entfernt.

     :not([hidden]) ist Pflicht — ein unbedingtes display:flex würde die
     UA-Regel [hidden]{display:none} überstimmen und das Overlay läge
     permanent über der Seite. ── */
  .novi-gatemodal-ov { display: none; }
  .novi-gatemodal-ov:not([hidden]) {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px 24px;
    background: radial-gradient(1200px 600px at 50% 0%, rgba(76, 29, 149, 0.42), rgba(6, 4, 15, 0.86) 62%);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    animation: novi-gatemodal-in 0.22s ease-out;
  }
  @keyframes novi-gatemodal-in { from { opacity: 0; } to { opacity: 1; } }
  .novi-gatemodal {
    width: 100%; max-width: 1080px; max-height: 88vh; overflow-y: auto;
    background: linear-gradient(160deg, rgba(24, 16, 46, 0.97), rgba(10, 7, 22, 0.98));
    border: 1px solid rgba(139, 92, 246, 0.34); border-radius: 20px;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    padding: 22px 22px 26px; color: var(--nv-text);
    animation: novi-gatemodal-pop 0.26s cubic-bezier(.2, .9, .25, 1.08);
  }
  @keyframes novi-gatemodal-pop {
    from { transform: translateY(14px) scale(.985); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .novi-gatemodal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
  }
  .novi-gatemodal-eyebrow {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8b7fd4;
  }
  .novi-gatemodal-title { font-size: 19px; font-weight: 800; color: var(--nv-text-strong); margin-top: 4px; line-height: 1.25; }
  .novi-gatemodal-sub { font-size: 12px; color: var(--nv-text-mut); margin-top: 4px; }
  .novi-gatemodal-x {
    flex: none; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--nv-vio-text); display: flex; align-items: center; justify-content: center;
  }
  .novi-gatemodal-x:hover { background: rgba(139, 92, 246, 0.24); color: var(--nv-text-strong); }
  .novi-gatemodal-x svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; fill: none; }
  .novi-gatemodal .novi-orc-panel { margin: 0 0 16px; }
  .novi-gatemodal .novi-cwm-section { margin-bottom: 0; }

  /* Einstieg im Fortschrittspanel. */
  .novi-pp-why {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 750;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.34); color: var(--nv-vio-text);
  }
  .novi-pp-why:hover { background: rgba(139, 92, 246, 0.26); color: var(--nv-text-strong); }
  .novi-pp-why.has-blockers {
    background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.38); color: #fca5a5;
  }
  .novi-pp-why.has-blockers:hover { background: rgba(248, 113, 113, 0.26); color: var(--nv-text-strong); }
  .novi-pp-why svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; fill: none; }
  .novi-pp-why-count {
    font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 640px) {
    .novi-gatemodal-ov:not([hidden]) { padding: 3vh 10px 16px; }
    .novi-gatemodal { padding: 18px 14px 20px; max-height: 92vh; }
    .novi-gatemodal-title { font-size: 17px; }
  }

  .novi-orc-mini { display: flex; flex-direction: column; gap: 8px; }
  .novi-orc-mini-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 12px; padding: 12px 14px;
  }
  .novi-orc-mini-name { font-size: 13px; font-weight: 650; color: var(--nv-text-strong); flex: 1; min-width: 150px; }
  .novi-orc-mini-meta { font-size: 11px; color: var(--nv-text-dim2); display: flex; gap: 6px 14px; flex-wrap: wrap; }
  .novi-orc-mini-track { width: 90px; height: 6px; border-radius: 999px; background: rgba(10,10,18,0.5); overflow: hidden; flex: none; }
  .novi-orc-mini-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #4ade80); }

  /* ── Multi-Channel Content Operating System ──────────────────────── */
  /* These blocks set an explicit display, which beats the UA's
     [hidden] rule — so hiding them in single-channel mode needs this. */
  .novi-hero[hidden], .novi-dash-row[hidden], .novi-card[hidden],
  .novi-panel[hidden], .novi-context-card[hidden] { display: none; }

  .novi-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 11.5px; color: #7c7996; margin: 0 0 16px; min-height: 16px;
  }
  .novi-breadcrumb:empty { display: none; }
  .novi-breadcrumb-sep { color: #4a4860; }
  .novi-breadcrumb-item {
    background: none; border: 0; padding: 0; font: inherit; color: #a89ce0;
    cursor: pointer; border-radius: 4px;
  }
  .novi-breadcrumb-item:hover { color: var(--nv-vio-text); text-decoration: underline; }
  .novi-breadcrumb-current { color: var(--nv-text); font-weight: 650; }

  /* Hero card — one calm, dominant surface, max two main actions. */
  .novi-gd-hero {
    position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(20, 18, 34, 0.86) 55%);
    border: 1px solid rgba(139, 92, 246, 0.24);
    box-shadow: 0 18px 46px -30px rgba(139, 92, 246, 0.7);
    backdrop-filter: blur(8px);
  }
  .novi-gd-hero-eyebrow {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #b9a9f0; font-weight: 700; margin-bottom: 8px;
  }
  .novi-gd-hero-title { font-size: 26px; font-weight: 800; color: var(--nv-text-strong); margin: 0 0 8px; letter-spacing: -0.01em; }
  .novi-gd-hero-status { font-size: 13.5px; color: var(--nv-text-mut); margin: 0 0 6px; line-height: 1.6; }
  .novi-gd-hero-next { font-size: 13px; color: var(--nv-text-dim); margin: 0 0 18px; line-height: 1.6; }
  .novi-gd-hero-next b { color: #d7cdfb; font-weight: 650; }
  .novi-gd-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* KPI strip — 4–6 compact cards, never more. */
  .novi-gd-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
  }
  .novi-gd-kpi {
    background: var(--nv-card); border: 1px solid rgba(139, 92, 246, 0.14);
    border-radius: 14px; padding: 14px 16px;
  }
  .novi-gd-kpi-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #82809c; margin-bottom: 6px; }
  .novi-gd-kpi-value { font-size: 22px; font-weight: 800; color: var(--nv-text-strong); line-height: 1.1; }
  .novi-gd-kpi-value.empty { font-size: 13px; font-weight: 600; color: #6f6d88; }
  .novi-gd-kpi.alert .novi-gd-kpi-value { color: var(--nv-bad-text); }
  .novi-gd-kpi.good .novi-gd-kpi-value { color: var(--nv-good-text); }

  /* Performance panels reuse the Home page's .perf-panel markup, so only
     the two-column wrapper is new here. */
  /* Delta-Badges: grün hoch, rot runter, nichts bei 0. */
  .novi-kpi-delta {
    display: inline-flex; align-items: center; gap: 2px; margin-left: 8px;
    font-size: 12px; font-weight: 700; vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  .novi-kpi-delta svg {
    width: 11px; height: 11px; stroke: currentColor; fill: none;
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  }
  .novi-kpi-delta.up { color: var(--nv-good-text); }
  .novi-kpi-delta.down { color: var(--nv-bad-text); }

  /* Gefahren-Aktionen (Kanal entfernen) */
  .novi-card-cta.danger {
    background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: #fca5a5;
  }
  .novi-card-cta.danger:hover { background: rgba(248, 113, 113, 0.18); }
  .novi-hero-btn-danger {
    background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5;
  }
  .novi-hero-btn-danger:hover { background: rgba(248, 113, 113, 0.18); }

  /* Upload-Kalender im Studio */
  .novi-cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .novi-cal-month { font-size: 13px; font-weight: 700; color: var(--nv-text); min-width: 130px; }
  .novi-cal-dashboard { margin-bottom: 12px; }
  .novi-cal-dashboard:empty { display: none; }
  /* Die Kalendertabelle ist bewusst breit — sie scrollt in ihrem eigenen
     Container, damit die Seite selbst nie horizontal scrollt. */
  .novi-studio-view .cal-table-wrap {
    overflow: auto; max-height: 62vh; border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.16); background: rgba(22, 20, 36, 0.74);
  }
  .novi-studio-view .cal-table { color: #c9c6de; }
  /* Bei 31 Zeilen und einer Spalte je Kanal müssen Kopfzeile und
     Tag-Spalte sichtbar bleiben, sonst weiß man beim Scrollen nicht
     mehr, welche Zelle zu welchem Kanal und Tag gehört. */
  .novi-studio-view .cal-table th {
    position: sticky; top: 0; z-index: 2;
    background: #1b1930; color: var(--nv-text);
    border-color: rgba(139, 92, 246, 0.14); white-space: nowrap;
  }
  .novi-studio-view .cal-table th:first-child { left: 0; z-index: 3; }
  .novi-studio-view .cal-table td { border-color: rgba(139, 92, 246, 0.1); }
  .novi-studio-view .cal-day-cell {
    position: sticky; left: 0; z-index: 1;
    background: #16142a; color: var(--nv-text-dim2);
  }
  .novi-studio-view .cal-select {
    background: rgba(10, 10, 18, 0.5); color: #c9c6de;
    border: 1px solid rgba(139, 92, 246, 0.18);
  }
  .novi-studio-view .cal-select.state-uploaded {
    background: rgba(251, 191, 36, 0.16); color: #fcd34d; border-color: rgba(251, 191, 36, 0.3);
  }
  .novi-studio-view .cal-select.state-published {
    background: rgba(74, 222, 128, 0.16); color: var(--nv-good-text); border-color: rgba(74, 222, 128, 0.3);
  }

  /* Epischer Ladebildschirm */
  /* ══ Ladebildschirm "Live-KPIs abrufen" ═══════════════════════════════
     Vollflächige Inszenierung statt eines Spinners: Nebel, Sternfeld,
     ein fluchtender Raster-Boden, Lichtschächte, das Novi-Zeichen mit
     Orbitringen und aufsteigende Datenpartikel. Animiert werden nur
     transform, opacity und background-position — alles GPU-nah, damit
     die Anzeige den laufenden Abruf nicht ausbremst. ══ */
  .novi-epic-loader {
    position: fixed; inset: 0; z-index: 60; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #05040c;
    animation: noviLoaderFade .3s ease;
  }
  .novi-epic-loader[hidden] { display: none; }
  @keyframes noviLoaderFade { from { opacity: 0; } to { opacity: 1; } }

  /* Nebel: drei driftende Farbwolken. */
  .novi-loader-sky {
    position: absolute; inset: -20%;
    background:
      radial-gradient(circle at 50% 42%, rgba(124, 58, 237, 0.42), transparent 38%),
      radial-gradient(circle at 74% 66%, rgba(56, 189, 248, 0.14), transparent 32%),
      radial-gradient(circle at 26% 70%, rgba(168, 85, 247, 0.18), transparent 34%);
    filter: blur(34px);
    animation: noviSkyDrift 16s ease-in-out infinite alternate;
  }
  @keyframes noviSkyDrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
  }

  /* Sternfeld aus zwei versetzten Punktrastern, unterschiedlich schnell. */
  .novi-loader-stars, .novi-loader-stars::after {
    position: absolute; inset: 0; content: "";
    background-image:
      radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.2px 1.2px at 62% 14%, rgba(214,196,255,0.8), transparent),
      radial-gradient(1.6px 1.6px at 84% 46%, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.2px 1.2px at 33% 68%, rgba(186,230,253,0.75), transparent),
      radial-gradient(1.4px 1.4px at 72% 82%, rgba(255,255,255,0.6), transparent),
      radial-gradient(1.1px 1.1px at 8% 84%, rgba(216,180,254,0.7), transparent);
    background-size: 340px 340px;
    animation: noviStarTwinkle 4.5s ease-in-out infinite alternate;
  }
  .novi-loader-stars::after { background-size: 210px 210px; opacity: 0.55; animation-duration: 6.5s; animation-direction: alternate-reverse; }
  @keyframes noviStarTwinkle { from { opacity: 0.35; } to { opacity: 0.9; } }

  /* Fluchtender Raster-Boden. Die perspektivische Neigung entsteht aus
     rotateX, das Scrollen aus einer wandernden background-position. */
  .novi-loader-grid {
    position: absolute; left: -25%; right: -25%; bottom: -8%; height: 62%;
    background-image:
      linear-gradient(rgba(167, 139, 250, 0.55) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.42) 1px, transparent 1px);
    background-size: 62px 62px;
    transform: perspective(420px) rotateX(66deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 4%, transparent 62%);
    -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 62%);
    animation: noviGridRun 2.6s linear infinite;
  }
  @keyframes noviGridRun { to { background-position: 0 62px, 0 0; } }

  /* Lichtschächte, die langsam durch das Bild streichen. */
  .novi-loader-beams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .novi-loader-beams i {
    position: absolute; top: -30%; width: 130px; height: 160%;
    background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.10), transparent);
    filter: blur(14px);
    transform: rotate(14deg);
    animation: noviBeamSweep 7s ease-in-out infinite;
  }
  .novi-loader-beams i:nth-child(1) { left: 12%; animation-delay: 0s; }
  .novi-loader-beams i:nth-child(2) { left: 46%; animation-delay: 2.2s; background-image: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.09), transparent); }
  .novi-loader-beams i:nth-child(3) { left: 78%; animation-delay: 4.1s; }
  @keyframes noviBeamSweep {
    0%, 100% { opacity: 0; transform: rotate(14deg) translateX(-60px); }
    50%      { opacity: 1; transform: rotate(14deg) translateX(60px); }
  }

  .novi-loader-stage { position: relative; text-align: center; padding: 24px; max-width: 460px; }

  .novi-loader-emblem {
    position: relative; width: 190px; height: 190px; margin: 0 auto 30px;
    display: flex; align-items: center; justify-content: center;
  }
  .novi-loader-halo {
    position: absolute; inset: -14%; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.42), transparent 66%);
    filter: blur(16px);
    animation: noviHaloPulse 2.8s ease-in-out infinite;
  }
  @keyframes noviHaloPulse {
    0%, 100% { opacity: .55; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1.08); }
  }
  /* Drei Ringe: einer als durchlaufender Farbbogen, zwei gestrichelt
     gegenläufig — das liest sich als arbeitendes System. */
  .novi-loader-ring { position: absolute; border-radius: 50%; }
  .novi-loader-ring.r1 {
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(168,85,247,0) 150deg, #a855f7 265deg, #e9d5ff 330deg, #67e8f9 352deg, transparent 360deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: noviRingSpin 2.4s linear infinite;
  }
  .novi-loader-ring.r2 {
    inset: 13%; border: 1.5px dashed rgba(196, 181, 253, 0.55);
    animation: noviRingSpin 9s linear infinite reverse;
  }
  .novi-loader-ring.r3 {
    inset: 26%; border: 1px solid rgba(103, 232, 249, 0.35);
    animation: noviRingSpin 5.5s linear infinite;
  }
  @keyframes noviRingSpin { to { transform: rotate(360deg); } }
  /* Abtaststreifen, der über das Zeichen läuft. */
  .novi-loader-scan {
    position: absolute; inset: 26%; border-radius: 50%; overflow: hidden;
  }
  .novi-loader-scan::before {
    content: ""; position: absolute; left: 0; right: 0; height: 26%;
    background: linear-gradient(to bottom, transparent, rgba(196, 181, 253, 0.5), transparent);
    animation: noviScanRun 2.2s ease-in-out infinite;
  }
  @keyframes noviScanRun { 0% { top: -26%; } 100% { top: 100%; } }
  /* Drei umlaufende Lichtpunkte auf eigenen Bahnen. */
  .novi-loader-orbit { position: absolute; inset: 0; }
  .novi-loader-orbit i {
    position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.9), 0 0 22px 6px rgba(168, 85, 247, 0.85);
    animation: noviOrbitRun 3.4s linear infinite;
  }
  .novi-loader-orbit i:nth-child(2) { animation-duration: 4.6s; animation-delay: -1.5s; box-shadow: 0 0 10px 2px rgba(255,255,255,0.9), 0 0 22px 6px rgba(56, 189, 248, 0.85); }
  .novi-loader-orbit i:nth-child(3) { animation-duration: 6.1s; animation-delay: -3.1s; box-shadow: 0 0 10px 2px rgba(255,255,255,0.9), 0 0 22px 6px rgba(236, 72, 153, 0.75); }
  @keyframes noviOrbitRun {
    from { transform: rotate(0deg) translateX(92px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(92px) rotate(-360deg); }
  }

  .novi-epic-loader-title {
    font-size: 21px; font-weight: 800; color: var(--nv-text-strong); margin-bottom: 10px;
    letter-spacing: -0.01em; text-shadow: 0 0 26px rgba(168, 85, 247, 0.65);
  }
  .novi-epic-loader-sub {
    font-size: 13px; color: var(--nv-vio-text); min-height: 20px; line-height: 1.5;
    animation: noviSubFade .5s ease;
  }
  @keyframes noviSubFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* Telemetrie-Balken: reine Anzeige, sie behaupten keinen Fortschritt. */
  .novi-loader-bars { display: flex; justify-content: center; gap: 5px; margin: 20px 0 0; height: 26px; align-items: flex-end; }
  .novi-loader-bars i {
    display: block; width: 4px; border-radius: 2px;
    background: linear-gradient(to top, #7c3aed, #a78bfa 60%, #67e8f9);
    animation: noviBarBounce 1.1s ease-in-out infinite;
  }
  .novi-loader-bars i:nth-child(1) { animation-delay: 0s; }
  .novi-loader-bars i:nth-child(2) { animation-delay: .12s; }
  .novi-loader-bars i:nth-child(3) { animation-delay: .24s; }
  .novi-loader-bars i:nth-child(4) { animation-delay: .36s; }
  .novi-loader-bars i:nth-child(5) { animation-delay: .48s; }
  .novi-loader-bars i:nth-child(6) { animation-delay: .60s; }
  .novi-loader-bars i:nth-child(7) { animation-delay: .72s; }
  @keyframes noviBarBounce { 0%, 100% { height: 7px; opacity: .55; } 50% { height: 26px; opacity: 1; } }

  .novi-epic-loader-bar {
    width: 240px; height: 3px; border-radius: 999px; margin: 20px auto 0;
    background: rgba(139, 92, 246, 0.16); overflow: hidden;
  }
  .novi-epic-loader-bar span {
    display: block; width: 40%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, transparent, #a855f7 40%, #67e8f9 60%, transparent);
    animation: noviLoaderSweep 1.3s ease-in-out infinite;
  }
  @keyframes noviLoaderSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

  /* Aufsteigende Datenpartikel. */
  .novi-loader-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .novi-loader-motes i {
    position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(196, 181, 253, 0.95);
    box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.8);
    animation: noviMoteRise 6.5s linear infinite;
  }
  .novi-loader-motes i:nth-child(1) { left: 14%; animation-delay: 0s; }
  .novi-loader-motes i:nth-child(2) { left: 27%; animation-delay: 1.1s; animation-duration: 7.8s; }
  .novi-loader-motes i:nth-child(3) { left: 41%; animation-delay: 2.3s; }
  .novi-loader-motes i:nth-child(4) { left: 58%; animation-delay: .6s; animation-duration: 8.4s; }
  .novi-loader-motes i:nth-child(5) { left: 71%; animation-delay: 3.2s; }
  .novi-loader-motes i:nth-child(6) { left: 86%; animation-delay: 1.8s; animation-duration: 7.2s; }
  @keyframes noviMoteRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: .7; }
    100% { transform: translateY(-104vh) scale(.4); opacity: 0; }
  }

  @media (max-width: 700px) {
    .novi-loader-emblem { width: 150px; height: 150px; }
    @keyframes noviOrbitRun {
      from { transform: rotate(0deg) translateX(72px) rotate(0deg); }
      to   { transform: rotate(360deg) translateX(72px) rotate(-360deg); }
    }
    .novi-epic-loader-title { font-size: 18px; }
  }

  /* Bei reduzierter Bewegung bleibt eine ruhige, lesbare Anzeige übrig. */
  @media (prefers-reduced-motion: reduce) {
    .novi-loader-sky, .novi-loader-stars, .novi-loader-stars::after, .novi-loader-grid,
    .novi-loader-beams i, .novi-loader-ring, .novi-loader-scan::before, .novi-loader-orbit i,
    .novi-loader-halo, .novi-loader-bars i, .novi-loader-motes i { animation: none; }
    .novi-loader-motes, .novi-loader-beams { display: none; }
    .novi-loader-bars i { height: 16px; }
  }

  /* ── Website Networth im Novi-Look ────────────────────────────────
     Die Zahlen sind unverändert die berechneten — nur die Darstellung
     ist auf den Studio-Stil gehoben. ── */
  .nw-hero {
    position: relative; overflow: hidden; border-radius: 22px;
    padding: 46px 28px 40px; margin-bottom: 26px; text-align: center;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.2), rgba(20, 18, 34, 0.92) 62%);
    border: 1px solid rgba(139, 92, 246, 0.28);
    box-shadow: 0 26px 64px -34px rgba(168, 85, 247, 0.9);
  }
  .nw-hero-glow {
    position: absolute; left: 50%; top: -30%; width: 520px; height: 520px;
    transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.32), transparent 62%);
    filter: blur(18px); animation: nwGlow 6s ease-in-out infinite;
  }
  @keyframes nwGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
  .nw-hero-ring {
    position: absolute; left: 50%; top: 50%; width: 340px; height: 340px;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(168, 85, 247, 0.16);
    box-shadow: 0 0 0 46px rgba(168, 85, 247, 0.045);
  }
  .nw-hero-inner { position: relative; }
  .nw-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: #c4b5fd;
  }
  .nw-hero-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); animation: nwGlow 2.2s ease-in-out infinite;
  }
  .nw-hero-value {
    font-size: clamp(44px, 9vw, 82px); font-weight: 850; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #fff 18%, #c4b5fd 58%, #a855f7);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .nw-hero-label { margin-top: 12px; font-size: 14px; color: #b9b6d4; }
  .nw-hero-meta {
    display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap;
    margin-top: 16px; font-size: 12px; color: #8a87a6;
  }
  .nw-hero-meta span { position: relative; }
  .nw-hero-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

  .nw-section-title {
    font-size: 14px; font-weight: 750; color: #e9e7f5; margin: 26px 0 12px;
  }
  /* Acht Kacheln: feste vier Spalten ergeben zwei volle Reihen statt
     einer angebrochenen mit einzelner Restkachel. */
  .nw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 1100px) { .nw-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .nw-stat {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border-radius: 14px; background: rgba(22, 20, 36, 0.74);
    border: 1px solid rgba(139, 92, 246, 0.16);
    transition: border-color .16s ease, transform .16s ease;
  }
  .nw-stat:hover { border-color: rgba(168, 85, 247, 0.4); transform: translateY(-2px); }
  .nw-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px; margin-bottom: 2px;
    background: rgba(139, 92, 246, 0.16);
  }
  .nw-stat-icon svg { width: 16px; height: 16px; stroke: #c4b5fd; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nw-stat-value { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .nw-stat-label { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #82809c; }

  .nw-ext-card { gap: 9px !important; }
  .nw-ext { display: flex; align-items: center; gap: 12px; }
  .nw-ext-name { flex: none; width: 88px; font-size: 12px; font-weight: 650; color: #c9c6de; }
  .nw-ext-track { flex: 1; height: 9px; border-radius: 999px; background: rgba(10, 10, 18, 0.55); overflow: hidden; }
  .nw-ext-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #c4b5fd);
  }
  .nw-ext-value {
    flex: none; width: 84px; text-align: right; font-size: 11.5px;
    color: #8a87a6; font-variant-numeric: tabular-nums;
  }

  @media (max-width: 760px) {
    .nw-hero { padding: 34px 18px 30px; border-radius: 18px; }
    /* Deko-Elemente auf Handybreite eindampfen — sie werden zwar von der
       Karte geclippt, malen sonst aber unnötig grosse Flächen. */
    .nw-hero-glow { width: 340px; height: 340px; }
    .nw-hero-ring { width: 230px; height: 230px; box-shadow: 0 0 0 30px rgba(168, 85, 247, 0.045); }
    .nw-hero-actions { flex-direction: column; }
    .nw-hero-actions .novi-hero-btn { width: 100%; justify-content: center; }
    .nw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nw-ext-name { width: 62px; }
    .nw-ext-value { width: 66px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nw-hero-glow, .nw-hero-dot { animation: none; }
    .nw-stat:hover { transform: none; }
  }

  .novi-cwm-parse-note { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .novi-cwm-parse-note:empty { display: none; }
  .novi-cwm-parse-note.ok { color: var(--nv-good-text); }
  .novi-cwm-parse-note.warn { color: var(--nv-warn-text); }

  .novi-perf-kpis { margin-bottom: 14px; }
  .novi-perf-kpis-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
  }
  .novi-perf-kpis-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .novi-kpi-range { display: flex; align-items: center; gap: 8px; }
  .novi-kpi-range-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b7bb8;
  }
  .novi-kpi-range select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 30px 9px 12px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--nv-vio-text-soft);
    background-color: rgba(30, 20, 56, 0.9);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .novi-kpi-range select:hover { border-color: rgba(167, 139, 250, 0.75); }
  .novi-kpi-range select:focus-visible { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
  .novi-kpi-range select option { background: #17102c; color: var(--nv-vio-text-soft); }
  /* Bei schmalerer Spalte umbricht sonst die Zeile: das Wort "Zeitraum"
     kostet gut 60 px, und die Auswahl benennt sich mit "Live", "60
     Minuten" usw. ohnehin selbst. Der Screenreader-Name bleibt ueber
     aria-label erhalten. */
  @media (max-width: 1250px) { .novi-kpi-range-label { display: none; } }
  .novi-perf-kpis-head .novi-card-cta svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Benachrichtigungs-Dropdown in J.A.R.V.I.S.. Die Einträge selbst
     nutzen die .notif-* Klassen des Creator Hub — hier werden nur die
     Farben auf das dunkle Novi-Theme gezogen. */
  /* Auswahl-Buttons auf der Profilseite (Darstellung, Sprache) */
  .profile-choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .profile-choice {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary);
    transition: border-color .14s ease, background .14s ease;
  }
  .profile-choice:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
  .profile-choice.active {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong);
  }
  .profile-choice svg { width: 15px; height: 15px; flex: none; }
  .profile-lang-note { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.55; }

  .novi-notif-wrap { position: relative; }
  .novi-notif-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
    width: 340px; max-height: 70vh; overflow-y: auto;
    background: #16142a; border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 14px; padding: 8px;
    box-shadow: 0 26px 58px -28px rgba(0, 0, 0, 0.9);
  }
  .novi-notif-dropdown[hidden] { display: none; }
  .novi-notif-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 8px 10px; border-bottom: 1px solid rgba(139, 92, 246, 0.14);
    font-size: 12.5px; font-weight: 750; color: var(--nv-text);
  }
  .novi-notif-mark-all {
    background: none; border: 0; padding: 0; font: inherit; font-size: 11px;
    font-weight: 650; color: #a89ce0; cursor: pointer;
  }
  .novi-notif-mark-all:hover { color: var(--nv-vio-text); text-decoration: underline; }
  .novi-notif-mark-all:disabled { opacity: .5; cursor: default; text-decoration: none; }
  .novi-notif-dropdown .notif-item {
    border-bottom-color: rgba(139, 92, 246, 0.12);
  }
  .novi-notif-dropdown .notif-item.unread { background: rgba(139, 92, 246, 0.1); }
  .novi-notif-dropdown .notif-title { color: var(--nv-text-strong); }
  .novi-notif-dropdown .notif-desc { color: var(--nv-text-dim); }
  .novi-notif-dropdown .notif-time { color: #82809c; }
  .novi-notif-dropdown .notif-empty { color: var(--nv-text-dim2); padding: 18px 10px; text-align: center; font-size: 12px; }
  .novi-notif-dropdown .notif-read-btn {
    background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.28);
    color: var(--nv-vio-text);
  }
  .novi-notif-dropdown .notif-read-btn:hover { background: rgba(139, 92, 246, 0.24); }

  @media (max-width: 760px) {
    /* Die Glocke sitzt auf dem Handy nicht ganz aussen — an ihr
       verankert würde ein breites Dropdown über den linken Rand ragen.
       Deshalb hier am Viewport ausrichten; die Höhe setzt beim Öffnen
       noviPositionNotifDropdown(), weil die Topbar umbrechen kann. */
    .novi-notif-dropdown { position: fixed; left: 14px; right: 14px; width: auto; }
  }

  /* Veränderungen je Kanal nach einem Live-KPI-Abruf */
  .novi-kpi-changes {
    position: relative; overflow: hidden;
    margin-top: 16px; padding: 16px 18px; border-radius: 18px;
    background:
      linear-gradient(160deg, rgba(139, 92, 246, 0.13), var(--nv-lift-1)),
      rgba(18, 16, 30, 0.86);
    border: 1px solid rgba(139, 92, 246, 0.26);
  }
  .novi-kpi-changes::after {
    content: ""; position: absolute; right: -70px; top: -90px;
    width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.26), transparent 70%);
  }
  .novi-kpi-changes > * { position: relative; z-index: 1; }
  .novi-kpi-changes-head {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-vio-text);
  }
  .novi-kpi-changes-sub { font-size: 11px; color: #82809c; margin-top: 3px; }
  .novi-kpi-changes-empty { font-size: 12px; color: var(--nv-text-dim2); margin-top: 6px; }
  .novi-kpi-changes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .novi-kpi-change-row {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px solid rgba(139, 92, 246, 0.1);
  }
  .novi-kpi-change-row:first-child { padding-top: 0; border-top: 0; }
  .novi-kpi-change-name { flex: none; min-width: 170px; font-size: 12.5px; font-weight: 650; color: var(--nv-text-strong); }
  .novi-kpi-change-badges { display: flex; gap: 6px 16px; flex-wrap: wrap; }
  .novi-kpi-change-item { font-size: 11px; color: var(--nv-text-dim2); white-space: nowrap; }
  .novi-kpi-change-item .novi-kpi-delta { margin-left: 5px; font-size: 11.5px; }

  .novi-perf-kpi-error { display: none; margin-top: 10px; font-size: 12px; color: var(--nv-bad-text); line-height: 1.5; }
  .novi-perf-kpi-error.show { display: block; }

  .novi-perf-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .novi-perf-col { flex: 1 1 320px; min-width: 0; }
  .novi-perf-missing:empty { display: none; }
  .novi-perf-missing { margin-top: 12px; }

  /* The panels were built for the light Home page. Inside J.A.R.V.I.S.
     they have to speak the dark theme — surfaces, text and ring tracks
     are restyled here; the status colours (gold/green/violet) stay
     identical so a number means the same thing on both pages. */
  .novi-studio-view .perf-panel,
  .novi-studio-view .missing-upload-panel {
    position: relative; overflow: hidden;
    background:
      linear-gradient(160deg, rgba(139, 92, 246, 0.14), var(--nv-lift-1)),
      rgba(18, 16, 30, 0.86);
    border: 1px solid rgba(139, 92, 246, 0.26);
    border-radius: 18px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  /* Leuchtkreis wie bei den KPI-Karten, damit alle Flächen der
     Übersicht dieselbe Bildsprache haben. */
  .novi-studio-view .perf-panel::after,
  .novi-studio-view .missing-upload-panel::after {
    content: ""; position: absolute; right: -60px; top: -80px;
    width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 70%);
  }
  .novi-studio-view .perf-panel > *,
  .novi-studio-view .missing-upload-panel > * { position: relative; z-index: 1; }
  .novi-studio-view .perf-panel:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 14px 34px -18px rgba(168, 85, 247, 0.7);
  }
  .novi-studio-view .perf-panel.all-published {
    background:
      linear-gradient(160deg, rgba(74, 222, 128, 0.2), var(--nv-lift-1)),
      rgba(16, 24, 22, 0.9);
    border-color: rgba(74, 222, 128, 0.42);
  }
  .novi-studio-view .perf-panel.all-published::after {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.32), transparent 70%);
  }
  .novi-studio-view .perf-panel.all-published:hover {
    border-color: rgba(74, 222, 128, 0.7);
    box-shadow: 0 14px 34px -18px rgba(74, 222, 128, 0.75);
  }
  /* Die großen Ring-Prozentwerte bekommen denselben Leuchtakzent wie
     die KPI-Zahlen. */
  .novi-studio-view .perf-ring-value { text-shadow: 0 0 24px rgba(168, 85, 247, 0.55); }
  .novi-studio-view .goal-ring-value { text-shadow: 0 0 24px rgba(99, 102, 241, 0.55); }
  .novi-studio-view .perf-panel.all-published .perf-ring-value { text-shadow: 0 0 24px rgba(74, 222, 128, 0.6); }
  .novi-studio-view .perf-eyebrow { letter-spacing: .1em; }
  .novi-studio-view .perf-shimmer { display: none; }
  /* .goal-panel centres its children, which collapses the header row —
     the month label would otherwise stick to the "LIVE" eyebrow. */
  .novi-studio-view .goal-panel .perf-header { width: 100%; }
  .novi-studio-view .perf-date,
  .novi-studio-view .perf-ring-label,
  .novi-studio-view .perf-ring-caption,
  .novi-studio-view .goal-ring-caption,
  .novi-studio-view .goal-stats-sep,
  .novi-studio-view .goal-stats-target,
  .novi-studio-view .goal-loading { color: var(--nv-text-dim2); }
  .novi-studio-view .perf-ring-value,
  .novi-studio-view .goal-ring-value,
  .novi-studio-view .goal-stats-current,
  .novi-studio-view .perf-celebration-title,
  .novi-studio-view .missing-upload-panel-title { color: var(--nv-text-strong); }
  .novi-studio-view .perf-status-line,
  .novi-studio-view .perf-celebration-sub { color: var(--nv-text-dim); }
  .novi-studio-view .perf-ring-track,
  .novi-studio-view .goal-ring-track { stroke: rgba(255, 255, 255, 0.09); }
  .novi-studio-view .missing-upload-chip {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
  }
  .novi-studio-view .missing-upload-chip.is-uploaded {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
  }
  .novi-studio-view .missing-upload-chip-status { color: var(--nv-text-dim2); }

  .novi-gd-section { margin-bottom: 20px; }
  .novi-gd-section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 12px; flex-wrap: wrap;
  }
  .novi-gd-section-title { font-size: 14px; font-weight: 750; color: var(--nv-text); }
  .novi-gd-section-sub { font-size: 11.5px; color: #7c7996; }

  /* Channel cards */
  .novi-gd-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
  .novi-gd-channel {
    background: rgba(22, 20, 36, 0.74); border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    transition: border-color .16s ease, transform .16s ease;
  }
  .novi-gd-channel:hover { border-color: rgba(168, 85, 247, 0.38); transform: translateY(-1px); }
  .novi-gd-channel-top { display: flex; align-items: center; gap: 11px; }
  .novi-gd-channel-avatar {
    width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden;
    background: rgba(139, 92, 246, 0.16); display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: var(--nv-vio-text);
  }
  .novi-gd-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-gd-channel-name { font-size: 14px; font-weight: 750; color: var(--nv-text-strong); line-height: 1.25; }
  .novi-gd-channel-sub { font-size: 11px; color: var(--nv-text-dim2); margin-top: 2px; }
  .novi-gd-channel-stats { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--nv-text-dim); }
  .novi-gd-channel-stats b { color: #d7cdfb; font-weight: 700; }
  .novi-gd-channel-next {
    font-size: 11.5px; color: var(--nv-text-dim); line-height: 1.5;
    border-top: 1px solid rgba(139, 92, 246, 0.12); padding-top: 9px;
  }
  .novi-gd-channel-next b { color: #d7cdfb; font-weight: 650; }
  .novi-gd-channel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .novi-gd-channel-actions .novi-card-cta { flex: 1 1 130px; max-width: none; margin: 0; }

  /* Shared status pill — one colour language everywhere:
     passed=green, active=violet, warning=orange, blocked=red, idle=grey. */
  .novi-status-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
    border: 1px solid transparent; white-space: nowrap;
  }
  .novi-status-pill.passed { background: rgba(74, 222, 128, 0.14); color: var(--nv-good-text); border-color: rgba(74, 222, 128, 0.28); }
  .novi-status-pill.active { background: rgba(139, 92, 246, 0.16); color: var(--nv-vio-text); border-color: rgba(139, 92, 246, 0.34); }
  .novi-status-pill.warning { background: rgba(251, 146, 60, 0.14); color: var(--nv-warn-text); border-color: rgba(251, 146, 60, 0.3); }
  .novi-status-pill.blocked { background: rgba(248, 113, 113, 0.14); color: var(--nv-bad-text); border-color: rgba(248, 113, 113, 0.3); }
  .novi-status-pill.idle { background: rgba(124, 121, 150, 0.12); color: var(--nv-text-dim2); border-color: rgba(124, 121, 150, 0.24); }

  /* Pipeline */
  .novi-gd-pipeline { display: flex; gap: 8px; flex-wrap: wrap; }
  .novi-gd-pipe-step {
    flex: 1 1 110px; min-width: 96px; background: var(--nv-card);
    border: 1px solid rgba(139, 92, 246, 0.14); border-radius: 12px; padding: 11px 12px;
    text-align: left; cursor: pointer; font: inherit;
    transition: border-color .16s ease, background .16s ease;
  }
  .novi-gd-pipe-step:hover { border-color: rgba(168, 85, 247, 0.4); background: rgba(139, 92, 246, 0.1); }
  .novi-gd-pipe-step.is-empty { opacity: 0.55; cursor: default; }
  .novi-gd-pipe-step.is-empty:hover { border-color: rgba(139, 92, 246, 0.14); background: var(--nv-card); }
  .novi-gd-pipe-count { font-size: 19px; font-weight: 800; color: var(--nv-text-strong); line-height: 1; }
  .novi-gd-pipe-label { font-size: 10.5px; color: var(--nv-text-dim2); margin-top: 5px; }

  /* Priorities + warnings */
  .novi-gd-list { display: flex; flex-direction: column; gap: 8px; }
  .novi-gd-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--nv-card); border: 1px solid rgba(139, 92, 246, 0.13);
    border-radius: 12px; padding: 11px 14px;
  }
  .novi-gd-row-main { flex: 1; min-width: 190px; }
  .novi-gd-row-action { font-size: 12.5px; font-weight: 650; color: var(--nv-text); line-height: 1.4; }
  .novi-gd-row-meta { font-size: 10.5px; color: #82809c; margin-top: 3px; }
  .novi-gd-row.sev-blocker { border-left: 3px solid #f87171; }
  .novi-gd-row.sev-warning { border-left: 3px solid #fb923c; }

  .novi-gd-more-btn {
    background: none; border: 0; padding: 6px 0 0; font: inherit; font-size: 11.5px;
    color: #a89ce0; cursor: pointer; align-self: flex-start;
  }
  .novi-gd-more-btn:hover { color: var(--nv-vio-text); text-decoration: underline; }

  /* Single-channel header */
  .novi-ch-header {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: rgba(22, 20, 36, 0.72); border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 16px; padding: 16px 18px; margin-bottom: 18px;
  }
  .novi-ch-header-avatar {
    width: 46px; height: 46px; border-radius: 13px; flex: none; overflow: hidden;
    background: rgba(139, 92, 246, 0.16); display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800; color: var(--nv-vio-text);
  }
  .novi-ch-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .novi-ch-header-main { flex: 1; min-width: 180px; }
  .novi-ch-header-name { font-size: 17px; font-weight: 800; color: var(--nv-text-strong); }
  .novi-ch-header-meta { font-size: 11.5px; color: var(--nv-text-dim2); margin-top: 4px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
  .novi-ch-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* Channel selector: "Alle Kanäle" entry + separators */
  .novi-channel-dropdown-item.is-all { border-color: rgba(139, 92, 246, 0.26); }
  .novi-channel-dropdown-divider { height: 1px; background: rgba(139, 92, 246, 0.14); margin: 6px 0; }
  .novi-channel-dropdown-scroll { max-height: 46vh; overflow-y: auto; }

  @media (max-width: 980px) {
    .novi-dash-row { grid-template-columns: 1fr; }
    .novi-hero { grid-template-columns: 1fr; }
    .novi-workflow-steps { flex-wrap: wrap; }
    .novi-workflow-step { flex: 1 1 30%; }
    .novi-active-channel-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    /* ── Mobile Navigation: Leiste unten statt Seitenleiste ──
       Die Sidebar war auf Handybreite dauerhaft nach links aus dem Bild
       geschoben und ohne Umschalter gar nicht erreichbar. Sie wird hier
       zu einer festen Leiste am unteren Rand, deren Einträge horizontal
       durchgewischt werden. */
    .novi-sidebar {
      position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
      width: 100%; height: auto; transform: none; overflow: visible;
      flex-direction: row; align-items: stretch; gap: 6px;
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
      background: rgba(10, 10, 20, 0.97);
      border-right: none; border-top: 1px solid rgba(139, 92, 246, 0.28);
      box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
    }
    /* Logo und Abstandhalter haben in der Leiste keinen Platz. */
    .novi-sidebar-logo, .novi-sidebar-spacer { display: none; }
    .novi-nav-list {
      flex: 1; min-width: 0; display: flex; flex-direction: row; gap: 4px;
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .novi-nav-list::-webkit-scrollbar { display: none; }
    /* Icon oben, Beschriftung darunter — so passen deutlich mehr
       Einträge nebeneinander als in der Zeilendarstellung. */
    .novi-nav-item {
      flex: none; width: auto; min-width: 68px; scroll-snap-align: center;
      flex-direction: column; justify-content: center; gap: 4px;
      padding: 8px 10px; text-align: center; font-size: 9.5px; line-height: 1.2;
      border-radius: 12px;
    }
    .novi-nav-item svg { width: 20px; height: 20px; }
    .novi-nav-item.active { background: rgba(139, 92, 246, 0.22); }
    /* Fünf feste Tabs (Übersicht, Projekte, Geplant, Analytics, Mehr) —
       "Mehr" klappt die vollständige, seitlich scrollbare Liste auf.
       ID-Präfix: die Desktop-Regel (display:none) steht später im
       Stylesheet und würde sonst gewinnen. */
    #novi-nav-list .novi-nav-mehr { display: flex; }
    #novi-nav-list:not(.zeige-alle) { overflow-x: hidden; justify-content: space-between; gap: 2px; }
    #novi-nav-list:not(.zeige-alle) .novi-nav-item:not([data-novi-nav="uebersicht"]):not([data-novi-nav="videos2"]):not([data-novi-nav="geplant"]):not([data-novi-nav="analytics"]):not([data-novi-nav="hkweiter"]):not([data-novi-nav="bereiche"]):not(.novi-nav-mehr) { display: none; }
    /* Die fuenf Tabs teilen sich die Breite und schrumpfen mit (05.08.).
       Vorher hatte jeder feste 68 px Mindestbreite: auf einem 390-px-
       Bildschirm passten neben dem Profil-Knopf nur vier davon, der
       fuenfte wurde vom overflow:hidden abgeschnitten. Ausgerechnet der
       fuenfte ist "Mehr" — mit ihm verschwand der einzige Zugang zu den
       uebrigen acht Bereichen. */
    /* Das Innenmass muss hier durchgesetzt werden: die Trefferflaechen-
       Regeln des Skins geben jedem Knopf 12 px links und rechts, von
       60 px Kachelbreite blieben so 33 px fuer den Text — zu wenig fuer
       "Übersicht", das deshalb mitten im Wort umbrach. */
    #novi-nav-list:not(.zeige-alle) .novi-nav-item {
      flex: 1 1 0; min-width: 0; padding: 8px 2px !important;
    }
    /* Lange Beschriftungen brechen auf zwei Zeilen statt die Kachel zu
       sprengen ("Video Projekte" → "Video" / "Projekte"). Die Leiste
       bekommt dafuer eine Mindesthoehe: ohne sie stand nur die Hoehe der
       einzeiligen Fassung zur Verfuegung, die zweite Zeile wurde vom
       overflow-y:hidden der Liste abgeschnitten — die Beschriftungen
       endeten mitten im Buchstaben. */
    #novi-nav-list:not(.zeige-alle) { align-items: stretch; min-height: 62px; }
    /* Umbruch nur an Leerzeichen ("Video" / "Projekte") — Woerter
       mittendrin zu trennen ergab "Übersi / cht". */
    #novi-nav-list:not(.zeige-alle) .novi-nav-item > span {
      flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; width: 100%;
      font-size: 9.5px !important; line-height: 1.2; word-break: normal; overflow-wrap: normal;
    }
    #novi-nav-list:not(.zeige-alle) .novi-nav-item svg { flex: none; }
    /* Der Profil-Button ist im Sidebar-Layout breit (width:100%) — in der
       Leiste würde er damit die gesamte Breite beanspruchen und die
       Navigationsliste auf 0 zusammenquetschen. Hier also kompakt und
       als fester Anker rechts. */
    .novi-userbtn {
      flex: none; width: auto; padding: 8px 10px; gap: 0; border-radius: 12px;
      flex-direction: column; justify-content: center; min-width: 60px;
    }
    .novi-userbtn-text, .novi-userbtn-arrow { display: none; }
    .novi-userbtn-avatar { width: 26px; height: 26px; font-size: 10px; }
    .novi-topbar { padding: 14px 16px; flex-wrap: wrap; }
    /* Der große untere Abstand hält den Inhalt frei von der Navigationsleiste. */
    .novi-content { padding: 18px 16px 104px; }
    .novi-topbar-sub { display: none; }
    /* Auf dem Handy nur das Pfeil-Symbol — der Text kostet dort zu viel
       Breite neben Titel und Kanalauswahl. */
    .novi-back-btn span { display: none; }
    .novi-back-btn { padding: 8px 10px; }
    /* Keep the current scope readable on mobile — the user has to be
       able to tell "Alle Kanäle" from a single channel at a glance. */
    .novi-profile-text { max-width: 108px; }
    .novi-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
    .novi-profile-sub { display: none; }
    .novi-channel-dropdown { right: -10px; width: calc(100vw - 24px); }
    .novi-active-channel-grid { grid-template-columns: 1fr 1fr; }
    .novi-context-card { flex-direction: column; align-items: flex-start; gap: 10px; }
    .novi-acp-next-step { flex-direction: column; align-items: stretch; }
    .novi-acp-next-step .novi-hero-btn { width: 100%; justify-content: center; }
    .novi-cpw-status { flex-direction: column; align-items: stretch; }
    .novi-cw-summary-panel { flex-direction: column; align-items: stretch; }
    .novi-cwm-status-row { flex-direction: column; align-items: stretch; }
    .novi-cwm-actions { flex-direction: column; }
    .novi-cwm-actions .novi-hero-btn { width: 100%; justify-content: center; }
    .novi-vp-card-actions { flex-direction: column; }
    .novi-vp-phase-open-row { flex-direction: column; align-items: stretch; }
    /* Auf Handybreite zwei Kacheln pro Reihe statt einer riesigen. */
    /* Auf Handybreite reichen schmalere Zahlenspalten, sonst quetscht
       die Beschriftung links auf ein bis zwei Zeichen zusammen. */
    /* Assets über die Kennzahlen legen — auf dem Handy ist die
       Kanalidentität als Erstes interessant, und sticky ergibt hier
       keinen Sinn mehr. */
    .novi-ch-split { grid-template-columns: 1fr; }
    .novi-ch-split-side { position: static; order: -1; }
    /* Auf dem Handy steht das Video-Dashboard über der Arbeitsfläche —
       Titel und Thumbnails sind der Bezugspunkt für alles darunter. */
    .novi-ph-split { grid-template-columns: 1fr; }
    .novi-ph-split-side { position: static; order: -1; }
    .novi-sync-row, .novi-sync-legend { grid-template-columns: 1fr 62px 62px; gap: 8px; }
    .novi-settings-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .novi-settings-tile { padding: 14px 10px; gap: 8px; }
    .novi-settings-tile-icon { width: 44px; height: 44px; border-radius: 12px; }
    .novi-settings-tile-icon svg { width: 22px; height: 22px; }
    .novi-settings-tile-title { font-size: 12.5px; }
    .novi-settings-tile-sub { font-size: 10px; }
    .novi-thumb-variant-grid { grid-template-columns: 1fr; }
    .novi-thumb-upload-grid { grid-template-columns: 1fr; }
    .novi-thumb-upload-badge { float: none; display: inline-block; margin-top: 6px; }
    /* Mobile: at most two KPI cards per row, nothing cut off. */
    .novi-gd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .novi-gd-kpi-value { font-size: 19px; }
    .novi-gd-hero { padding: 20px 18px; border-radius: 16px; }
    .novi-gd-hero-title { font-size: 21px; }
    .novi-gd-hero-actions { flex-direction: column; }
    .novi-gd-hero-actions .novi-hero-btn { width: 100%; justify-content: center; }
    .novi-gd-channels { grid-template-columns: 1fr; }
    .novi-gd-channel-actions { flex-direction: column; }
    .novi-gd-channel-actions .novi-card-cta { max-width: none; }
    .novi-gd-pipeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .novi-perf-row { flex-direction: column; }
    .novi-perf-kpis-head { flex-direction: column; align-items: stretch; }
    .novi-perf-kpis-head .novi-card-cta { max-width: none; }
    .novi-perf-kpis-actions { flex-direction: column; align-items: stretch; }
    .novi-kpi-range { justify-content: space-between; }
    .novi-kpi-range select { flex: 1; margin-left: 10px; }

    .novi-kpi-change-row { flex-direction: column; gap: 5px; }
    .novi-kpi-change-name { min-width: 0; }
    .novi-gd-row { flex-direction: column; align-items: stretch; }
    .novi-gd-row .novi-card-cta { max-width: none; }
    .novi-ch-header { flex-direction: column; align-items: flex-start; }
    .novi-ch-header-actions { width: 100%; flex-direction: column; }
    .novi-ch-header-actions .novi-hero-btn { width: 100%; justify-content: center; }
  }
  /* Tablet: two columns, still comfortable. */
  @media (min-width: 761px) and (max-width: 1180px) {
    .novi-gd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .novi-gd-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Desktop: generous, but never a stretched-out empty band. */
  @media (min-width: 1500px) {
    .novi-gd-hero, .novi-gd-kpis, .novi-gd-section, .novi-ch-header { max-width: 1320px; }
  }

  /* ── Light Mode: Flächen mit Farbverlauf ─────────────────────────────
     Die Farbliterale laufen über Variablen, Verläufe aber nicht: dort
     stehen mehrere Stops in einer Kurzschreibweise, und ein Verlauf, der
     im Dunklen von Violett nach Fast-Schwarz geht, muss im Hellen von
     Violett nach Fast-Weiss gehen — das ist keine Wertersetzung, sondern
     eine andere Aussage. Darum hier ausdrücklich je Baustein.

     Dekoration bleibt bewusst dunkel: der Ladebildschirm, die Aura des
     Logos und das Portal der Startgrafik sind eigene Bildmotive, keine
     Benutzeroberfläche. ── */
  :root[data-theme="light"][data-legacy-light] .novi-userbtn,
  :root[data-theme="light"][data-legacy-light] .novi-context-card,
  :root[data-theme="light"][data-legacy-light] .novi-panel,
  :root[data-theme="light"][data-legacy-light] .novi-card,
  :root[data-theme="light"][data-legacy-light] .novi-settings-tile,
  :root[data-theme="light"][data-legacy-light] .kpi-card,
  :root[data-theme="light"][data-legacy-light] .missing-upload-panel,
  :root[data-theme="light"][data-legacy-light] .perf-panel {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), #fff 65%);
    border-color: rgba(109, 40, 217, 0.16);
  }
  :root[data-theme="light"][data-legacy-light] .novi-gd-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), #fff 62%);
    border-color: rgba(109, 40, 217, 0.18);
  }
  /* Die farbigen KPI-Kacheln behalten ihren Farbton, sitzen aber auf
     Weiss statt auf Dunkelviolett. */
  :root[data-theme="light"][data-legacy-light] .novi-ekpi {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.13), #fff 60%);
    border-color: rgba(109, 40, 217, 0.16);
  }
  /* Der Schleier über dem Kanalbanner hält den Namen lesbar. Im Dunklen
     verdunkelt er, im Hellen muss er aufhellen. */
  :root[data-theme="light"][data-legacy-light] .novi-ov-banner {
    background: linear-gradient(120deg, #ece7fa, #f7f5fb);
  }
  :root[data-theme="light"][data-legacy-light] .novi-ov-banner-veil {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.12) 100%);
  }
  :root[data-theme="light"][data-legacy-light] .novi-ov-banner-name {
    color: #14121c;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
  }
  /* Ein aktiver Navigationseintrag hatte weisse Schrift — auf hellem
     Grund unsichtbar. */
  :root[data-theme="light"][data-legacy-light] .novi-nav-item { color: var(--nv-text-mut); }
  :root[data-theme="light"][data-legacy-light] .novi-nav-item.active {
    color: #4c1d95;
    background: rgba(139, 92, 246, 0.12);
  }
  :root[data-theme="light"][data-legacy-light] .novi-nav-item:hover { background: rgba(139, 92, 246, 0.08); }
  /* Eingabefelder, Auswahllisten und Textflächen. */
  :root[data-theme="light"][data-legacy-light] .novi-studio-view input,
  :root[data-theme="light"][data-legacy-light] .novi-studio-view select,
  :root[data-theme="light"][data-legacy-light] .novi-studio-view textarea,
  :root[data-theme="light"][data-legacy-light] .novi-dark-page input,
  :root[data-theme="light"][data-legacy-light] .novi-dark-page select,
  :root[data-theme="light"][data-legacy-light] .novi-dark-page textarea {
    background: #fff;
    color: #221f2e;
    border-color: rgba(109, 40, 217, 0.22);
  }
  :root[data-theme="light"][data-legacy-light] .novi-kpi-range select { background: rgba(139, 92, 246, 0.08); }
  /* Prompt-Kästen: im Dunklen fast schwarz, hier ein ruhiges Hellgrau. */
  :root[data-theme="light"][data-legacy-light] .novi-cwm-prompt-box {
    background: #f4f2fa;
    color: #221f2e;
    border-color: rgba(109, 40, 217, 0.18);
  }
  /* Statuspillen und Badges brauchen auf Weiss mehr Sättigung. */
  :root[data-theme="light"][data-legacy-light] .novi-status-pill,
  :root[data-theme="light"][data-legacy-light] .novi-cw-status-badge,
  :root[data-theme="light"][data-legacy-light] .novi-gate-badge { background: rgba(139, 92, 246, 0.14); color: #4c1d95; }
  :root[data-theme="light"][data-legacy-light] .novi-status-pill.blocked,
  :root[data-theme="light"][data-legacy-light] .novi-gate-badge.g-blockiert { background: rgba(185, 28, 28, 0.12); color: #991b1b; }
  :root[data-theme="light"][data-legacy-light] .novi-status-pill.warning,
  :root[data-theme="light"][data-legacy-light] .novi-gate-badge.g-warnung { background: rgba(194, 65, 12, 0.12); color: #9a3412; }
  :root[data-theme="light"][data-legacy-light] .novi-status-pill.passed,
  :root[data-theme="light"][data-legacy-light] .novi-gate-badge.g-bestanden,
  :root[data-theme="light"][data-legacy-light] .novi-gate-badge.g-abgeschlossen { background: rgba(21, 128, 61, 0.12); color: #15803d; }
  /* Trennlinien und Tabellen. */
  :root[data-theme="light"][data-legacy-light] .novi-studio-view hr,
  :root[data-theme="light"][data-legacy-light] .novi-cwm-section,
  :root[data-theme="light"][data-legacy-light] .novi-gd-row,
  :root[data-theme="light"][data-legacy-light] .novi-gd-channel,
  :root[data-theme="light"][data-legacy-light] .novi-gd-kpi,
  :root[data-theme="light"][data-legacy-light] .novi-gd-pipe-step {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.16);
  }
  :root[data-theme="light"][data-legacy-light] .novi-gd-pipe-step.is-empty { background: rgba(24, 16, 56, 0.03); }

  /* ── Light Mode für die Unterseiten mit eigener Variablenbelegung ────
     .novi-dark-page (Admin Terminal, Website Networth, Backups) und
     .novi-entry-view (Startseite/Gate + Preise) belegen die
     Design-Variablen selbst neu — sie hängen darum nicht an --nv-*.
     Ohne diesen Satz kam dunkle Schrift auf dunkler Kachel heraus, weil
     die Fläche aus der eigenen Belegung stammte und die Schriftfarbe
     aus dem Thema. ── */
  :root[data-theme="light"][data-legacy-light] .novi-dark-page,
  :root[data-theme="light"][data-legacy-light] .novi-entry-view {
    --bg-page: #f7f5fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f2eefc;
    --border-subtle: rgba(109, 40, 217, 0.16);
    --border-strong: rgba(109, 40, 217, 0.32);
    --text-primary: #14121c;
    --text-secondary: #4a4560;
    --text-faint: #6b6688;
    --accent: #7c3aed;
    --accent-strong: #6d28d9;
    --accent-soft: rgba(139, 92, 246, 0.1);
  }
  /* Die Kacheln der dunklen Unterseiten tragen ihre Fläche als Verlauf. */
  :root[data-theme="light"][data-legacy-light] .novi-dark-page .tile {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), #fff 65%);
    border-color: rgba(109, 40, 217, 0.18);
  }

  /* ── Restliche fest verdrahtete Dunkel-Flächen im hellen Standard ────
     Phasen-Navigation, Video-Dashboard-Panel, Vertonungs-Block,
     Kanalkopf und die mobile Navigationsleiste trugen ihre dunkle
     Fläche als Literal statt über Variablen. ── */
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(109, 40, 217, 0.18);
  }
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav-here { color: #55506e; }
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav-btn {
    color: #4c1d95;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(109, 40, 217, 0.26);
  }
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav-btn:hover { background: rgba(139, 92, 246, 0.18); }
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav-btn.is-next {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  }
  :root[data-theme="light"][data-legacy-light] .novi-phase-nav-btn.is-next:hover { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
  :root[data-theme="light"][data-legacy-light] .novi-vd {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), #fff 70%);
    border-color: rgba(109, 40, 217, 0.2);
  }
  :root[data-theme="light"][data-legacy-light] .novi-vd-btn {
    color: #4c1d95;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(109, 40, 217, 0.26);
  }
  :root[data-theme="light"][data-legacy-light] .novi-vd-channel-link { color: #6d28d9; }
  :root[data-theme="light"][data-legacy-light] .novi-vo-block {
    background: rgba(24, 16, 56, 0.04);
    border-color: rgba(13, 148, 136, 0.3);
  }
  :root[data-theme="light"][data-legacy-light] .novi-vo-missing { color: #55506e; }
  :root[data-theme="light"][data-legacy-light] .novi-ch-header {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.16);
  }
  :root[data-theme="light"][data-legacy-light] .novi-vd-char-name { color: #4c1d95; }
  /* Charakter-Studio- und Analytics-Karten */
  :root[data-theme="light"][data-legacy-light] .novi-cs-card {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.16);
  }
  /* Achievements: leerer Hinweiskasten */
  :root[data-theme="light"][data-legacy-light] .novi-ach-empty { background: rgba(139, 92, 246, 0.05); }
  /* Thumbnails im Video-Dashboard und in Phase 02 */
  :root[data-theme="light"][data-legacy-light] .novi-vd-thumb {
    background: rgba(24, 16, 56, 0.04);
    border-color: rgba(109, 40, 217, 0.2);
  }
  :root[data-theme="light"][data-legacy-light] .novi-thumb-preview-16x9 {
    background: rgba(24, 16, 56, 0.04);
    border-color: rgba(109, 40, 217, 0.28);
    color: #6b6688;
  }
  /* Schritt-Übersicht (Phase 05) und Meilenstein-Panels */
  :root[data-theme="light"][data-legacy-light] .novi-step-overview {
    background: linear-gradient(150deg, rgba(139, 92, 246, 0.09), #fff 70%);
    border-color: rgba(109, 40, 217, 0.2);
  }
  :root[data-theme="light"][data-legacy-light] .novi-pp {
    background: linear-gradient(150deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.04) 55%, #fff), #fff;
    border-color: rgba(109, 40, 217, 0.24);
  }
  /* Asset-Spalte der Einzelkanal-Übersicht */
  :root[data-theme="light"][data-legacy-light] .novi-ch-assets {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), #fff 70%);
    border-color: rgba(109, 40, 217, 0.2);
  }
  :root[data-theme="light"][data-legacy-light] .novi-ch-asset-frame {
    background: rgba(24, 16, 56, 0.05);
    border-color: rgba(109, 40, 217, 0.2);
  }
  /* Upload-Kalender innerhalb des Studios */
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-table-wrap {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.18);
  }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-table { color: #221f2e; }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-table th {
    background: #f2eefc;
    color: #14121c;
    border-color: rgba(109, 40, 217, 0.14);
  }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-table td { border-color: rgba(109, 40, 217, 0.1); }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-day-cell {
    background: #f7f5fb;
    color: #55506e;
  }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .cal-select {
    background: #fff;
    color: #221f2e;
    border-color: rgba(109, 40, 217, 0.24);
  }

  /* ── Startseite (Landing/Gate) + Preisseite im hellen Standard ───────
     Auf Wunsch folgt auch die Marken-Startseite dem Theme: hell mit
     schwarzer Schrift im Standard, das Neon-Kleid bleibt dem Dark Mode.
     Die dunklen Deko-Ebenen (Sternfeld, Scan, Vignette, dunkles
     Hintergrundmotiv) sind für Schwarz gebaut und werden im Hellen
     abgeschaltet; die violetten Akzente bleiben. ── */
  :root[data-theme="light"] #view-studio-gate { background: #f7f5fb; }
  :root[data-theme="light"][data-legacy-light] .novi-entry-view::before,
  :root[data-theme="light"][data-legacy-light] .novi-entry-view::after,
  :root[data-theme="light"][data-legacy-light] .novi-splash-stars,
  :root[data-theme="light"][data-legacy-light] .novi-splash-scan,
  :root[data-theme="light"][data-legacy-light] .novi-splash-grid,
  :root[data-theme="light"][data-legacy-light] .novi-splash-vignette { display: none; }
  :root[data-theme="light"][data-legacy-light] .novi-splash-aurora { opacity: 0.4; }
  :root[data-theme="light"][data-legacy-light] .novi-land-nav {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(109, 40, 217, 0.16);
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-brand-name { color: #14121c; }
  :root[data-theme="light"][data-legacy-light] .novi-land-brand-name b { color: #6d28d9; }
  :root[data-theme="light"][data-legacy-light] .novi-land-item:hover .novi-land-link,
  :root[data-theme="light"][data-legacy-light] .novi-land-item:focus-within .novi-land-link,
  :root[data-theme="light"][data-legacy-light] .novi-land-link.as-btn:hover { color: #14121c; background: rgba(139, 92, 246, 0.1); }
  :root[data-theme="light"][data-legacy-light] .novi-land-drop {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.22);
    box-shadow: 0 18px 44px -18px rgba(24, 16, 56, 0.3);
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-drop-btn:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(109, 40, 217, 0.24); }
  :root[data-theme="light"][data-legacy-light] .novi-land-drop-text b { color: #14121c; }
  :root[data-theme="light"][data-legacy-light] .novi-land-drop-icon {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(109, 40, 217, 0.3);
    box-shadow: none;
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-drop-icon svg { stroke: #6d28d9; }
  :root[data-theme="light"][data-legacy-light] .novi-land-eyebrow { color: #6d28d9; }
  :root[data-theme="light"][data-legacy-light] .novi-land-title { color: #14121c; }
  :root[data-theme="light"][data-legacy-light] .novi-land-cta.ghost {
    color: #6d28d9;
    background: #fff;
    border-color: rgba(109, 40, 217, 0.35);
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-cta.ghost:hover { background: rgba(139, 92, 246, 0.1); }
  :root[data-theme="light"][data-legacy-light] .novi-land-stats b {
    background: linear-gradient(120deg, #14121c 20%, #6d28d9 105%);
    -webkit-background-clip: text; background-clip: text;
    color: #14121c;
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-card {
    background: #fff;
    border-color: rgba(109, 40, 217, 0.18);
    box-shadow: 0 14px 30px -22px rgba(24, 16, 56, 0.35);
  }
  :root[data-theme="light"][data-legacy-light] .novi-land-card b { color: #14121c; }
  :root[data-theme="light"][data-legacy-light] .novi-land-card-tag { color: #6d28d9; }
  :root[data-theme="light"][data-legacy-light] .novi-land-card-art { border-color: rgba(109, 40, 217, 0.14); }
  :root[data-theme="light"][data-legacy-light] .novi-splash-marquee {
    background: rgba(255, 255, 255, 0.8);
    border-top-color: rgba(109, 40, 217, 0.16);
  }
  :root[data-theme="light"][data-legacy-light] .novi-splash-marquee-track span { color: rgba(109, 40, 217, 0.5); }
  /* Violette Verlaufs-Knöpfe behalten weiße Schrift — die Variable
     würde im Hellen dunkle Schrift auf Violett liefern. */
  :root[data-theme="light"][data-legacy-light] #view-studio-gate .novi-entry-auth-btn.primary,
  :root[data-theme="light"][data-legacy-light] .novi-entry-auth-btn.primary { color: #fff; }
  :root[data-theme="light"][data-legacy-light] .novi-entry-back { color: #6d28d9; }
  /* Preis-Karten: weiße Fläche mit dem Farbton des Plans */
  :root[data-theme="light"][data-legacy-light] .novi-plan {
    background: linear-gradient(165deg, color-mix(in srgb, var(--m) 10%, #fff), #fff 65%);
    border-color: color-mix(in srgb, var(--m) 45%, #fff);
  }
  :root[data-theme="light"][data-legacy-light] .novi-plan-amount { text-shadow: none; }
  :root[data-theme="light"][data-legacy-light] .novi-plan-btn {
    background: rgba(24, 16, 56, 0.04);
    border-color: rgba(24, 16, 56, 0.28);
    color: #55506e;
  }
  :root[data-theme="light"][data-legacy-light] .novi-pricing-note {
    background: rgba(194, 65, 12, 0.08);
    border-color: rgba(194, 65, 12, 0.3);
    color: #9a3412;
  }
  :root[data-theme="light"][data-legacy-light] .novi-entry-title {
    background: linear-gradient(120deg, #14121c 20%, #6d28d9);
    -webkit-background-clip: text; background-clip: text;
  }

  /* ══ SKIN "EXPEDITION" — 1:1 nach der Designvorlage des Nutzers ════
     Warmes Obsidian (#0d141c) als Welt, Karten in dunklem Anthrazit
     mit goldener Kante, Ancient Gold (#C9943E / hell #E2B15C) als
     Akzent, Bone White als Schrift. Sitzt als Skin auf der DUNKLEN
     Struktur (data-theme="dark" + data-skin="wef"); die violette
     Neon-Schicht ist dabei abgeschaltet. Artworks (Hero mit Orin,
     Lagerfeuer) stammen aus der Vorlage und liegen unter /hub-assets. */
  :root[data-skin="wef"] {
    /* Hub-Variablen */
    --bg-page: #0d141c;
    --bg-card: #171d26;
    --bg-card-hover: #1e2530;
    --border-subtle: rgba(201, 148, 62, 0.18);
    --border-strong: rgba(201, 148, 62, 0.38);
    --text-primary: #f4efe4;
    --text-secondary: #b5ab97;
    --text-faint: #857c68;
    --accent: #C9943E;
    --accent-strong: #E2B15C;
    --accent-soft: rgba(201, 148, 62, 0.14);
    --accent-soft-strong: rgba(201, 148, 62, 0.22);
    --header-a: #2a2214;
    --header-b: #171208;
    --header-text: #f0e2c4;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -14px rgba(0, 0, 0, 0.65);
    /* Novi-Variablen */
    --nv-page: #0d141c;
    --nv-sidebar: #10161e;
    --nv-topbar: rgba(13, 20, 28, 0.92);
    --nv-card: #171d26;
    --nv-lift-1: rgba(255, 255, 255, 0.015);
    --nv-lift-2: rgba(255, 255, 255, 0.02);
    --nv-lift-3: rgba(255, 255, 255, 0.04);
    --nv-veil: rgba(13, 20, 28, 0.6);
    --nv-veil-strong: rgba(8, 12, 18, 0.86);
    --nv-text-strong: #f7f2e6;
    --nv-text: #e9e2d2;
    --nv-text-soft: #cfc6b1;
    --nv-text-mut: #b5ab97;
    --nv-text-mut2: #a49a85;
    --nv-text-dim: #948a75;
    --nv-text-dim2: #857c68;
    --nv-text-faint: #6e664f;
    --nv-ekpi-label: #a49a85;
    --nv-vio-text: #d9b679;
    --nv-vio-text-soft: #f0e2c4;
    --nv-good-text: #55c26a;
    --nv-good-text2: #7cd48c;
    --nv-bad-text: #e26d55;
    --nv-warn-text: #e09a4a;
    --nv-yellow-text: #e2c04c;
  }
  /* Violette Akzent-Literale der dunklen Struktur → Gold/Erde */
  :root[data-skin="wef"] .novi-ekpi.tone-violet { --k: #C9943E; }
  :root[data-skin="wef"] .novi-ekpi.tone-indigo { --k: #a3824f; }
  :root[data-skin="wef"] .novi-ekpi.tone-pink   { --k: #B85E2C; }
  :root[data-skin="wef"] .novi-ekpi.tone-cyan   { --k: #7d97a6; }
  :root[data-skin="wef"] .novi-ekpi.tone-amber  { --k: #e2b15c; }
  :root[data-skin="wef"] .novi-ekpi.tone-green  { --k: #55c26a; }
  :root[data-skin="wef"] .novi-ekpi {
    background: linear-gradient(160deg, color-mix(in srgb, var(--k) 13%, transparent), var(--nv-lift-2)), #171d26;
    border-color: color-mix(in srgb, var(--k) 34%, transparent);
  }
  /* Goldene Knöpfe mit dunkler Schrift — wie in der Vorlage */
  :root[data-skin="wef"] .novi-hero-btn-primary,
  :root[data-skin="wef"] .novi-card-cta {
    color: #241c10;
    background: linear-gradient(135deg, #E2B15C, #b3812e);
    box-shadow: 0 0 0 1px rgba(226, 177, 92, 0.35) inset, 0 10px 24px -10px rgba(201, 148, 62, 0.55);
  }
  :root[data-skin="wef"] .novi-card-cta.secondary,
  :root[data-skin="wef"] .novi-hero-btn-secondary {
    color: #e2b15c;
    background: rgba(201, 148, 62, 0.1);
    border: 1px solid rgba(201, 148, 62, 0.38);
    box-shadow: none;
  }
  :root[data-skin="wef"] .novi-nav-item:hover { background: rgba(201, 148, 62, 0.1); }
  :root[data-skin="wef"] .novi-nav-item.active {
    color: #f7f2e6;
    background: linear-gradient(120deg, rgba(201, 148, 62, 0.32), rgba(138, 90, 29, 0.22));
    box-shadow: inset 0 0 0 1px rgba(226, 177, 92, 0.4), 0 0 18px -6px rgba(201, 148, 62, 0.5);
  }
  :root[data-skin="wef"] .novi-status-pill,
  :root[data-skin="wef"] .novi-cw-status-badge,
  :root[data-skin="wef"] .novi-gate-badge { background: rgba(201, 148, 62, 0.16); color: #e2b15c; }
  :root[data-skin="wef"] .novi-phase-nav {
    background: rgba(201, 148, 62, 0.06);
    border-color: rgba(201, 148, 62, 0.22);
  }
  :root[data-skin="wef"] .novi-phase-nav-btn {
    color: #e2b15c;
    background: rgba(201, 148, 62, 0.1);
    border-color: rgba(201, 148, 62, 0.32);
  }
  :root[data-skin="wef"] .novi-phase-nav-btn.is-next {
    color: #241c10;
    background: linear-gradient(135deg, #E2B15C, #b3812e);
  }
  /* Karten: dunkles Anthrazit mit goldener Kante */
  :root[data-skin="wef"] .novi-cwm-section,
  :root[data-skin="wef"] .novi-gd-row,
  :root[data-skin="wef"] .novi-gd-channel,
  :root[data-skin="wef"] .novi-gd-kpi,
  :root[data-skin="wef"] .novi-gd-pipe-step,
  :root[data-skin="wef"] .novi-cs-card,
  :root[data-skin="wef"] .novi-userbtn,
  :root[data-skin="wef"] .novi-context-card,
  :root[data-skin="wef"] .novi-panel,
  :root[data-skin="wef"] .novi-card,
  :root[data-skin="wef"] .novi-settings-tile,
  :root[data-skin="wef"] .kpi-card,
  :root[data-skin="wef"] .novi-ch-header {
    background: #171d26;
    border-color: rgba(201, 148, 62, 0.2);
  }
  /* Hero: das Orin-Artwork aus der Vorlage, links ein Schleier für den Text */
  :root[data-skin="wef"] .novi-gd-hero {
    background:
      linear-gradient(90deg, rgba(13, 18, 25, 0.94) 0%, rgba(13, 18, 25, 0.72) 34%, rgba(13, 18, 25, 0.1) 68%, rgba(13, 18, 25, 0) 100%),
      url("/hub-assets/novi-wef-hero.webp") right 22% / cover no-repeat,
      #171d26;
    border-color: rgba(201, 148, 62, 0.32);
  }
  :root[data-skin="wef"] .novi-gd-hero-eyebrow { color: #d9b679; }
  :root[data-skin="wef"] .novi-gd-hero-next b { color: #e2b15c; }
  /* HEUTE-Panel: Lagerfeuer-Szene aus der Vorlage hinter den Werten */
  :root[data-skin="wef"] .novi-studio-view .perf-panel {
    background:
      linear-gradient(180deg, rgba(13, 18, 25, 0.62) 0%, rgba(13, 18, 25, 0.4) 45%, rgba(13, 18, 25, 0.78) 100%),
      url("/hub-assets/novi-wef-fire.webp") center / cover no-repeat,
      #171d26;
    border-color: rgba(201, 148, 62, 0.28);
  }
  :root[data-skin="wef"] .novi-studio-view .goal-panel,
  :root[data-skin="wef"] .novi-studio-view .missing-upload-panel {
    background: linear-gradient(160deg, rgba(201, 148, 62, 0.08), #171d26 70%);
    border-color: rgba(201, 148, 62, 0.24);
  }
  :root[data-skin="wef"] .perf-eyebrow { color: #e09a4a; }
  :root[data-skin="wef"] .perf-live-dot { background: #e09a4a; box-shadow: 0 0 0 3px rgba(224, 154, 74, 0.2); }
  :root[data-skin="wef"] .goal-panel .perf-eyebrow { color: #d9b679; }
  :root[data-skin="wef"] .goal-panel .perf-live-dot { background: #C9943E; box-shadow: 0 0 0 3px rgba(201, 148, 62, 0.22); }
  :root[data-skin="wef"] .goal-ring-value {
    background: linear-gradient(135deg, #E2B15C, #C9943E);
    -webkit-background-clip: text; background-clip: text;
  }
  /* Die Fortschritts-Instrumente bekommen ihre Farbe als Inline-Variable
     aus dem JS (#a855f7 = violetter Standard). Nur DIESE Variante wird
     auf Gold gedreht — Erfolgs-Grün bleibt Erfolgs-Grün. !important ist
     hier nötig, weil Inline-Styles sonst gewinnen. */
  :root[data-skin="wef"] .perf-ring-item[style*="a855f7"],
  :root[data-skin="wef"] .goal-ring-wrap[style*="a855f7"] {
    --gauge-color: #C9943E !important;
    --gauge-glow: rgba(201, 148, 62, 0.85) !important;
  }
  /* Der alte Kanalbanner passt nicht in die Vorlage — der Hero mit dem
     Orin-Artwork übernimmt seine Rolle. Nur im Expedition-Skin. */
  :root[data-skin="wef"] #novi-page-overview .novi-ov-banner { display: none; }
  :root[data-skin="wef"] .novi-ov-banner { background: linear-gradient(120deg, #1b1f28, #12171f); }
  :root[data-skin="wef"] .novi-kpi-range select { background: rgba(201, 148, 62, 0.1); }
  :root[data-skin="wef"] .novi-cwm-prompt-box {
    background: rgba(201, 148, 62, 0.05);
    border-color: rgba(201, 148, 62, 0.26);
  }
  :root[data-skin="wef"] .novi-studio-view .perf-panel::after,
  :root[data-skin="wef"] .novi-studio-view .missing-upload-panel::after {
    background: radial-gradient(circle, rgba(201, 148, 62, 0.2), transparent 70%);
  }
  :root[data-skin="wef"] .novi-spark-empty { color: #948a75; }
  :root[data-skin="wef"] .novi-vd,
  :root[data-skin="wef"] .novi-ch-assets,
  :root[data-skin="wef"] .novi-step-overview,
  :root[data-skin="wef"] .novi-pp {
    background: linear-gradient(160deg, rgba(201, 148, 62, 0.09), #171d26 70%), #171d26;
    border-color: rgba(201, 148, 62, 0.24);
  }
  :root[data-skin="wef"] .novi-vd-btn {
    color: #e2b15c;
    background: rgba(201, 148, 62, 0.1);
    border-color: rgba(201, 148, 62, 0.32);
  }
  :root[data-skin="wef"] .novi-vd-channel-link { color: #d9b679; }
  :root[data-skin="wef"] .novi-vo-block {
    background: rgba(201, 148, 62, 0.05);
    border-color: rgba(201, 148, 62, 0.28);
  }
  :root[data-skin="wef"] .novi-vd-char-name { color: #d9b679; }
  /* Upload-Kalender im Studio */
  :root[data-skin="wef"] .novi-studio-view .cal-table-wrap { background: #12171f; border-color: rgba(201, 148, 62, 0.22); }
  :root[data-skin="wef"] .novi-studio-view .cal-table { color: #cfc6b1; }
  :root[data-skin="wef"] .novi-studio-view .cal-table th { background: #1e242e; border-color: rgba(201, 148, 62, 0.16); }
  :root[data-skin="wef"] .novi-studio-view .cal-table td { border-color: rgba(201, 148, 62, 0.1); }
  :root[data-skin="wef"] .novi-studio-view .cal-day-cell { background: #181e27; color: #a49a85; }
  :root[data-skin="wef"] .novi-studio-view .cal-select {
    background: rgba(13, 20, 28, 0.6);
    color: #cfc6b1;
    border-color: rgba(201, 148, 62, 0.24);
  }
  /* Startseite (Landing/Gate) + Preise im Expeditions-Kleid */
  :root[data-skin="wef"] #view-studio-gate { background: #0d141c; }
  :root[data-skin="wef"] .novi-land-nav {
    background: rgba(13, 18, 25, 0.72);
    border-bottom-color: rgba(201, 148, 62, 0.2);
  }
  :root[data-skin="wef"] .novi-land-brand-name b,
  :root[data-skin="wef"] .novi-land-eyebrow,
  :root[data-skin="wef"] .novi-land-card-tag { color: #d9b679; }
  :root[data-skin="wef"] .novi-land-title { color: #f7f2e6; }
  :root[data-skin="wef"] .novi-land-title em {
    background: linear-gradient(100deg, #E2B15C 10%, #C9943E 45%, #B85E2C 70%, #E2B15C 95%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: #d9b679;
    animation: wefGoldShimmer 7s ease-in-out infinite;
  }
  :root[data-skin="wef"] .novi-land-cta.primary {
    color: #241c10;
    background: linear-gradient(135deg, #E2B15C, #b3812e);
    box-shadow: 0 0 0 1px rgba(226, 177, 92, 0.35) inset, 0 12px 30px -10px rgba(201, 148, 62, 0.55);
  }
  :root[data-skin="wef"] .novi-land-cta.ghost {
    color: #e2b15c;
    background: rgba(201, 148, 62, 0.08);
    border-color: rgba(201, 148, 62, 0.4);
  }
  :root[data-skin="wef"] .novi-land-stats b {
    background: linear-gradient(120deg, #f7f2e6 18%, #E2B15C 62%, #C9943E 105%);
    -webkit-background-clip: text; background-clip: text;
    color: #f0e2c4;
  }
  :root[data-skin="wef"] .novi-land-card {
    background: #171d26;
    border-color: rgba(201, 148, 62, 0.22);
  }
  :root[data-skin="wef"] .novi-land-card b { color: #f7f2e6; }
  :root[data-skin="wef"] .novi-land-drop {
    background: #171d26;
    border-color: rgba(201, 148, 62, 0.3);
    box-shadow: 0 0 40px -10px rgba(201, 148, 62, 0.25), 0 26px 60px -20px rgba(0, 0, 0, 0.9);
  }
  :root[data-skin="wef"] .novi-land-drop-btn:hover { background: rgba(201, 148, 62, 0.1); border-color: rgba(201, 148, 62, 0.3); }
  :root[data-skin="wef"] .novi-land-drop-icon {
    background: rgba(201, 148, 62, 0.14);
    border-color: rgba(201, 148, 62, 0.4);
    box-shadow: 0 0 14px -4px rgba(201, 148, 62, 0.5);
  }
  :root[data-skin="wef"] .novi-land-drop-icon svg { stroke: #e2b15c; }
  :root[data-skin="wef"] .novi-land-item:hover .novi-land-link,
  :root[data-skin="wef"] .novi-land-item:focus-within .novi-land-link,
  :root[data-skin="wef"] .novi-land-link.as-btn:hover { color: #f7f2e6; background: rgba(201, 148, 62, 0.12); }
  :root[data-skin="wef"] .novi-splash-aurora { background: radial-gradient(circle, rgba(201, 148, 62, 0.28), transparent 70%); }
  :root[data-skin="wef"] .novi-splash-orbit { border-color: rgba(201, 148, 62, 0.16); }
  :root[data-skin="wef"] .novi-splash-marquee {
    background: rgba(13, 18, 25, 0.6);
    border-top-color: rgba(201, 148, 62, 0.2);
  }
  :root[data-skin="wef"] .novi-splash-marquee-track span { color: rgba(217, 182, 121, 0.4); }
  :root[data-skin="wef"] .novi-entry-auth-btn {
    background: rgba(201, 148, 62, 0.1);
    border-color: rgba(201, 148, 62, 0.35);
    color: #d9b679;
  }
  :root[data-skin="wef"] #view-studio-gate .novi-entry-auth-btn.primary,
  :root[data-skin="wef"] .novi-entry-auth-btn.primary {
    color: #241c10;
    background: linear-gradient(135deg, #E2B15C, #b3812e);
    box-shadow: 0 8px 22px -10px rgba(201, 148, 62, 0.7);
  }
  :root[data-skin="wef"] .novi-entry-back { color: #d9b679; }
  :root[data-skin="wef"] .novi-entry-title {
    background: linear-gradient(120deg, #f7f2e6 20%, #d9b679);
    -webkit-background-clip: text; background-clip: text;
  }
  :root[data-skin="wef"] .novi-plan {
    background: linear-gradient(165deg, color-mix(in srgb, var(--m) 12%, transparent), var(--nv-lift-1)), #171d26;
    border-color: color-mix(in srgb, var(--m) 38%, transparent);
  }
  /* Die Kanal-Pills im "Heute noch nicht veröffentlicht"-Panel tragen
     Dark-Mode-Pastelltöne — auf hellen Flächen (Standard UND
     Expedition) brauchen sie kräftige Schrift. */
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .missing-upload-chip {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.26);
    color: #b3402a;
  }
  :root[data-theme="light"][data-legacy-light] .novi-studio-view .missing-upload-chip.is-uploaded {
    background: rgba(230, 162, 0, 0.12);
    border-color: rgba(230, 162, 0, 0.3);
    color: #a06800;
  }

  /* ── Expedition: lebendige Elemente ──────────────────────────────────
     Die Referenzwelt lebt von Glut und Licht: aufsteigende Funken auf
     der Startseite, ein wanderndes Gold-Schimmern im Titel, atmende
     Lichtkreise auf Karten und Panels. Alles bewusst zurückhaltend
     (controlled stylization) und bei reduzierter Bewegung abgeschaltet. */
  @keyframes wefGoldShimmer {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
  }
  @keyframes wefEmberRise {
    from { background-position: 0 0, 60px 40px, 130px 80px; }
    to { background-position: 0 -460px, 60px -420px, 130px -380px; }
  }
  @keyframes wefGlowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  /* Funken: das (im Hellen abgeschaltete) Sternfeld kehrt als warme,
     langsam aufsteigende Glut zurück. Drei Ebenen mit verschiedenen
     Geschwindigkeiten über die Hintergrund-Position — nahtlose Schleife. */
  :root[data-skin="wef"] .novi-splash-stars {
    display: block;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 88%, rgba(201, 148, 62, 0.85), transparent),
      radial-gradient(1.1px 1.1px at 33% 72%, rgba(184, 94, 44, 0.7), transparent),
      radial-gradient(1.4px 1.4px at 57% 92%, rgba(226, 178, 92, 0.65), transparent),
      radial-gradient(1px 1px at 74% 78%, rgba(184, 94, 44, 0.55), transparent),
      radial-gradient(1.5px 1.5px at 89% 85%, rgba(201, 148, 62, 0.7), transparent);
    background-size: 460px 460px, 420px 420px, 380px 380px;
    animation: wefEmberRise 30s linear infinite;
    opacity: 0.85;
  }
  :root[data-skin="wef"] .novi-ekpi-glow,
  :root[data-skin="wef"] .novi-plan-glow,
  :root[data-skin="wef"] .novi-pp-glow { animation: wefGlowPulse 5.5s ease-in-out infinite; }
  :root[data-skin="wef"] .novi-studio-view .perf-panel::after,
  :root[data-skin="wef"] .novi-studio-view .missing-upload-panel::after {
    animation: wefGlowPulse 6.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    :root[data-skin="wef"] .novi-splash-stars,
    :root[data-skin="wef"] .novi-land-title em,
    :root[data-skin="wef"] .novi-ekpi-glow,
    :root[data-skin="wef"] .novi-plan-glow,
    :root[data-skin="wef"] .novi-pp-glow,
    :root[data-skin="wef"] .novi-studio-view .perf-panel::after,
    :root[data-skin="wef"] .novi-studio-view .missing-upload-panel::after { animation: none; }
  }
  @media (max-width: 760px) {
    :root[data-theme="light"][data-legacy-light] .novi-sidebar {
      background: rgba(255, 255, 255, 0.97);
      border-top-color: rgba(109, 40, 217, 0.22);
      box-shadow: 0 -8px 24px -12px rgba(24, 16, 56, 0.25);
    }
    :root[data-theme="light"][data-legacy-light] .novi-nav-item.active { background: rgba(139, 92, 246, 0.16); }
  }

  /* Platzhalter-Eintrag: sichtbar, aber klar als "kommt noch" markiert */
  .novi-nav-item.is-soon { opacity: 0.45; }
  /* "Mehr"-Tab existiert nur in der unteren Handy-Leiste. */
  .novi-nav-mehr { display: none; }
  .novi-nav-item.is-soon::after {
    content: "Bald"; margin-left: auto; font-size: 8.5px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px;
    border-radius: 999px; background: rgba(139, 92, 246, 0.18); color: #c4b5fd;
  }
  /* Das Badge ist ein CSS-Pseudoelement — der data-i18n-Durchlauf erreicht
     es nicht, darum folgt sein Text dem lang-Attribut, das applyLanguage()
     am Wurzelelement setzt. */
  html[lang="en"] .novi-nav-item.is-soon::after { content: "Soon"; }
  html[lang="fr"] .novi-nav-item.is-soon::after { content: "Bientôt"; }
  html[lang="es"] .novi-nav-item.is-soon::after { content: "Pronto"; }

  /* ── Mobile-Feinschliff ─────────────────────────────────────────────
     Ergebnis des 45-Stationen-Audits: kein Überlauf, aber einige Badges
     unter 9,5px — auf dem Handy unleserlich. Dazu Touch-Verhalten:
     kein Doppeltipp-Zoom auf Knöpfen, Wisch-Trägheit in Scroll-Flächen. */
  html { -webkit-text-size-adjust: 100%; }
  button, [role="button"], .tile, .novi-nav-item { touch-action: manipulation; }
  .cal-table-wrap, .novi-nav-list, .novi-channel-dropdown-scroll { -webkit-overflow-scrolling: touch; }
  @media (max-width: 760px) {
    #channel-grid .channel-tile .sub { font-size: 10px; }
    .tile-kpi-row { font-size: 9.5px; }
    .cal-next-badge { font-size: 10px; }
    .novi-vd-var { font-size: 10px; }
    .novi-vd-thumb-empty { font-size: 10px; }
    .novi-phaselist-now { font-size: 10px; }
    .novi-plan-flag { font-size: 10px; }
    .rank-stat-label { font-size: 10px; }
    /* Höhere Spezifität nötig: die nvh2-Basisregeln stehen später im Blatt */
    #view-novi-studio .nvh2-kpi > .nvh2-zielzeit { font-size: 10px; }
    /* Startseiten-Module: unter 760px einspaltig. Der 2-Spalten-Fallback
       der nvh2-Sektionen endet bei 1280px — auf dem Handy standen
       Pipeline und Tages-Kalender nebeneinander und wurden rechts
       abgeschnitten. minmax(0,1fr) verhindert, dass Inhalte die
       Spuren über die Containerbreite hinaus aufweiten. */
    /* 26.08.: "pipe" und "seite" sind hier entfallen. Beide Module
       stehen laengst nicht mehr im Markup, ihre Zeilen blieben aber
       im Raster - leere Zeilen haben zwar Hoehe 0, erzeugen aber
       trotzdem ihren Abstand. Auf dem Handy waren das zwei Luftzeilen
       in der Modulspalte. Diese Regel traegt eine ID und hat die
       Korrektur weiter oben ueberstimmt. */
    #view-novi-studio .nvh2-modules {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "perf" "kal" "ziel";
    }
    #view-novi-studio .nvh2-modules > * { min-width: 0; }
    #view-novi-studio .nvh2-pipe-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #view-novi-studio .nvh2-heldenreihe { grid-template-columns: minmax(0, 1fr); }
    #view-novi-studio .nvh2-kal-grid { gap: 3px; }
    #view-novi-studio .nvh2-kal-tag { font-size: 10px; border-radius: 6px; }
  }