/* Studio UI — Oberflaechenschicht.
   Wird als letztes Stylesheet geladen und kleidet die bestehenden
   Bausteine neu ein, ohne dass das Markup angefasst werden muss.
   Reihenfolge innerhalb der Datei: Tokens, Grundlagen, Shell, Bausteine. */

/* ---------------------------------------------------------------
   1. Design-Tokens
   --------------------------------------------------------------- */
:root{
  /* Neutralskala, leicht kuehl getont */
  --s-0:#ffffff;
  --s-25:#fcfcfd;
  --s-50:#f8f8fa;
  --s-100:#f2f2f5;
  --s-200:#e8e8ed;
  --s-300:#d6d6dd;
  --s-400:#a3a3ad;
  --s-500:#74747f;
  --s-600:#55555f;
  --s-700:#3d3d46;
  --s-800:#26262d;
  --s-900:#17171c;
  --s-950:#0b0b0f;

  /* Markenakzent */
  --a-300:#ffb385;
  --a-400:#ff8a3d;
  --a-500:#ff6400;
  --a-600:#ed5600;
  --a-700:#c44800;
  --a-tint:#fff4ec;

  /* Semantik */
  --ok:#0f9d63;      --ok-bg:#eafaf1;   --ok-line:#bdecd4;
  --warn:#b4690e;    --warn-bg:#fff7e8; --warn-line:#f6ddb0;
  --err:#d4342c;     --err-bg:#fef1f0;  --err-line:#f7c9c5;
  --info:#2563eb;    --info-bg:#eef3ff; --info-line:#cbdbff;

  /* Flaechen und Linien */
  --surface:var(--s-0);
  --surface-sunken:var(--s-50);
  --line:rgba(15,15,20,.08);
  --line-strong:rgba(15,15,20,.14);

  /* Gestaffelte Schatten statt harter Raender */
  --sh-xs:0 1px 2px rgba(15,18,28,.05);
  --sh-sm:0 1px 2px rgba(15,18,28,.04), 0 2px 6px -1px rgba(15,18,28,.05);
  --sh-md:0 1px 2px rgba(15,18,28,.04), 0 10px 22px -8px rgba(15,18,28,.12);
  --sh-lg:0 2px 4px rgba(15,18,28,.04), 0 22px 48px -16px rgba(15,18,28,.18);
  --sh-glow:0 6px 18px -5px rgba(255,100,0,.40);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.14);

  --r-xs:7px; --r-sm:9px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-2xl:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.14s var(--ease);
  --med:.24s var(--ease);

  /* Tailwind-Theme mitziehen, damit bg-canvas/border-line/text-muted folgen */
  --color-canvas:#f7f7f9;
  --color-paper:#f7f7f9;
  --color-line:#e8e8ed;
  --color-muted:#74747f;
  --color-ink:#17171c;
  --color-black:#17171c;

  --font-ui:"Inter","Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
}

/* ---------------------------------------------------------------
   2. Grundlagen
   --------------------------------------------------------------- */
*{ -webkit-tap-highlight-color:transparent }

html{ -webkit-text-size-adjust:100% }

body{
  font-family:var(--font-ui);
  font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1;
  font-variant-ligatures:common-ligatures;
  color:var(--s-700);
  background:var(--color-canvas);
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Der Inhaltsbereich bekommt einen sehr flachen Farbverlauf, damit die
   Flaeche nicht wie ein einzelnes graues Rechteck wirkt. */
.app-shell>main{
  background:
    radial-gradient(1200px 420px at 12% -8%, rgba(255,100,0,.045), transparent 62%),
    radial-gradient(900px 360px at 92% 0%, rgba(37,99,235,.038), transparent 58%),
    var(--color-canvas);
}

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--s-950); letter-spacing:-.028em; font-weight:600 }
h1{ letter-spacing:-.035em }

/* Zahlen in Tabellen und Kennzahlen laufen sonst optisch aus dem Raster. */
.metric strong,.analytics-kpi strong,.analytics-table td,.users-table td,
.backlog-stats strong,td,th,time,.tabular{ font-variant-numeric:tabular-nums }

::selection{ background:rgba(255,100,0,.20); color:var(--s-950) }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--a-500);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Schlanke Scrollbalken passend zur Flaeche */
*{ scrollbar-width:thin; scrollbar-color:var(--s-300) transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--s-300); border:3px solid transparent; background-clip:content-box; border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:var(--s-400); background-clip:content-box }

/* ---------------------------------------------------------------
   3. Sidebar
   --------------------------------------------------------------- */
.app-sidebar{
  background:
    radial-gradient(520px 260px at 20% -6%, rgba(255,100,0,.16), transparent 70%),
    linear-gradient(180deg,#141419 0%,#0c0c10 46%,#08080b 100%) !important;
  border-right:1px solid rgba(255,255,255,.07);
  color:var(--s-300);
  position:relative;
}

/* Feine Lichtkante an der Innenseite */
.app-sidebar:after{
  content:"";
  position:absolute; inset:0 -1px 0 auto; width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);
  pointer-events:none;
}

/* Auf dem Desktop fuellt die Seitenleiste immer die Fensterhoehe und
   bleibt beim Blaettern stehen. Reicht die Hoehe nicht fuer alle
   Menuepunkte, blaettert die Leiste selbst. Diese Datei laedt zuletzt,
   deshalb muss sticky hier stehen, sonst gewinnt position:relative. */
@media (min-width:1024px){
  .app-sidebar{
    position:sticky; top:0;
    height:100vh; height:100dvh;
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
  }
  .app-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); background-clip:content-box }
}

.sidebar-brand img{ filter:drop-shadow(0 4px 12px rgba(255,100,0,.35)) }
.sidebar-brand strong{ letter-spacing:-.03em; font-size:16px }
.sidebar-brand span{ color:rgba(255,255,255,.38); letter-spacing:.22em }

.nav-item{
  position:relative;
  gap:.7rem;
  padding:.56rem .7rem;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.60);
  font-family:var(--font-ui);
  font-weight:500;
  font-size:.83rem;
  letter-spacing:-.012em;
  transition:background var(--fast), color var(--fast), transform var(--fast);
}

/* Die Icon-Zeichen im Markup bekommen eine eigene Flaeche, damit die
   Navigation eine durchgehende vertikale Kante hat. */
.nav-item>span:first-child{
  display:grid; place-items:center;
  width:26px; height:26px; flex:none;
  border-radius:7px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.06);
  font-size:.72rem; line-height:1;
  color:rgba(255,255,255,.72);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}

.nav-item:hover{ background:rgba(255,255,255,.055); color:#fff; transform:translateX(1px) }
.nav-item:hover>span:first-child{ background:rgba(255,255,255,.10); color:#fff }

.nav-item.active{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05)) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.30);
}
.nav-item.active>span:first-child{
  background:linear-gradient(180deg,var(--a-400),var(--a-600));
  border-color:transparent;
  color:#1a0d02;
  box-shadow:0 4px 12px -3px rgba(255,100,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Der Punkt am Zeilenende wird zum Lichtbalken am linken Rand. */
.nav-item.active:after{
  content:"";
  position:absolute; left:-5px; top:50%;
  width:3px; height:18px; margin:0;
  transform:translateY(-50%);
  border-radius:99px;
  background:var(--a-500) !important;
  box-shadow:0 0 12px rgba(255,100,0,.8);
}

.app-profile .border-t{ border-color:rgba(255,255,255,.08) !important }
.app-profile p:first-of-type{ color:#fff; letter-spacing:-.015em }
.user-avatar{
  background:linear-gradient(145deg,var(--a-400),var(--a-600)) !important;
  color:#1a0d02 !important;
  box-shadow:0 4px 14px -4px rgba(255,100,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
}

.app-menu-toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12) !important;
  color:#fff;
}

/* ---------------------------------------------------------------
   4. Kopfzeile und Seitenkopf
   --------------------------------------------------------------- */
.app-shell>main>header.h-16{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.app-shell>main>header.h-16 p{ font-size:.8rem; color:var(--s-500) }
.app-shell>main>header.h-16 strong{ color:var(--s-900); font-weight:600 }
.breadcrumb-home{ transition:color var(--fast) }
.breadcrumb-home:hover{ color:var(--a-600) }

.eyebrow{
  font-family:var(--font-ui);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  color:var(--s-500);
}
.eyebrow.\!text-lime,.eyebrow[class*="text-lime"]{ color:var(--a-400) !important }

.app-shell h1{ color:var(--s-950); font-size:clamp(1.85rem,1.2rem + 1.6vw,2.45rem); line-height:1.08 }
.app-shell h1+p,.text-muted{ color:var(--s-500) }

.system-status{
  padding:.38rem .7rem .38rem .6rem;
  border-radius:99px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
  font-size:.76rem;
  font-weight:500;
  transition:box-shadow var(--fast), transform var(--fast);
}
.system-status:hover{ box-shadow:var(--sh-sm); transform:translateY(-1px) }

/* ---------------------------------------------------------------
   5. Flaechen und Karten
   --------------------------------------------------------------- */
.bg-white.border.border-line,
.users-card,.mcp-card,.analytics-source,.analytics-chart,.backlog-shell,
.credential-card,.connection-card,.support-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
}

.users-card,.mcp-card,.analytics-source,.analytics-chart{
  transition:box-shadow var(--med), border-color var(--med), transform var(--med);
}
.mcp-card:hover,.analytics-source:hover{
  box-shadow:var(--sh-md);
  border-color:var(--line-strong);
}

/* Dunkle Panels (Dashboard-Hero) bekommen Tiefe statt flachem Schwarz. */
.bg-ink{
  background:
    radial-gradient(640px 300px at 88% -20%, rgba(255,100,0,.22), transparent 66%),
    linear-gradient(160deg,#17171d 0%,#0e0e12 55%,#0a0a0d 100%) !important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.07);
}
.bg-ink h2{ color:#fff; letter-spacing:-.03em }
.bg-ink .absolute.rounded-full{ border-color:rgba(255,255,255,.08) !important }

/* ---------------------------------------------------------------
   6. Schaltflaechen
   --------------------------------------------------------------- */
.btn-primary,.btn-secondary,.icon-btn{
  font-family:var(--font-ui);
  font-weight:550;
  letter-spacing:-.01em;
  border-radius:var(--r-sm);
  transition:background var(--fast), border-color var(--fast), box-shadow var(--fast), transform var(--fast), color var(--fast);
}

.btn-primary{
  background:linear-gradient(180deg,var(--a-400) 0%,var(--a-500) 52%,var(--a-600) 100%) !important;
  color:#fff !important;
  border:1px solid var(--a-700);
  padding:.58rem 1rem;
  box-shadow:var(--sh-glow), var(--sh-inset);
  text-shadow:0 1px 1px rgba(120,42,0,.25);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#ff9550 0%,var(--a-500) 50%,var(--a-600) 100%) !important;
  box-shadow:0 8px 24px -6px rgba(255,100,0,.52), var(--sh-inset);
  transform:translateY(-1px);
}
.btn-primary:active{ transform:translateY(0); box-shadow:var(--sh-xs), var(--sh-inset) }

.btn-secondary,.icon-btn,.analytics-actions a,.analytics-actions button{
  background:var(--surface);
  border:1px solid var(--line-strong) !important;
  color:var(--s-700);
  box-shadow:var(--sh-xs);
}
.btn-secondary:hover,.icon-btn:hover{
  background:var(--s-50);
  border-color:var(--s-300) !important;
  color:var(--s-900);
  box-shadow:var(--sh-sm);
  transform:translateY(-1px);
}
.icon-btn{ height:2.15rem; min-width:2.15rem; border-radius:var(--r-xs) }

.search{
  height:2.15rem;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xs);
  box-shadow:var(--sh-xs);
  color:var(--s-400);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.search:focus-within{
  border-color:var(--a-400);
  box-shadow:0 0 0 3px rgba(255,100,0,.13);
}
.search input{ color:var(--s-800); font-size:.82rem }
.search input::placeholder{ color:var(--s-400) }

/* Segmentierte Umschalter (Meine Projekte / Alle Projekte) */
.scope-toggle{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border-radius:var(--r-sm);
  background:var(--s-100);
  border:1px solid var(--line);
}
.scope-toggle button{
  border:0; background:transparent;
  padding:.36rem .7rem;
  border-radius:calc(var(--r-sm) - 3px);
  font-size:.76rem; font-weight:550;
  color:var(--s-500);
  transition:background var(--fast), color var(--fast), box-shadow var(--fast);
}
.scope-toggle button:hover{ color:var(--s-800) }
.scope-toggle button.active{
  background:var(--surface);
  color:var(--s-950);
  box-shadow:var(--sh-xs);
}
.scope-toggle-dark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10) }
.scope-toggle-dark button{ color:rgba(255,255,255,.62) }
.scope-toggle-dark button:hover{ color:#fff }
.scope-toggle-dark button.active{
  background:linear-gradient(180deg,var(--a-400),var(--a-600));
  color:#fff;
  box-shadow:0 4px 12px -3px rgba(255,100,0,.5), inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------------------------------------------------------------
   7. Kennzahlen
   --------------------------------------------------------------- */
.metric,.analytics-kpi{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:box-shadow var(--med), transform var(--med);
}
.metric:hover,.analytics-kpi:hover{ box-shadow:var(--sh-md); transform:translateY(-2px) }

/* Der farbige Oberkante-Akzent ersetzt den frueheren 3px-Rahmen. */
.metric:before,.analytics-kpi:before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--s-300),transparent 70%);
}
.metric:first-child:before,.analytics-kpi.tone-up:before{
  background:linear-gradient(90deg,var(--a-500),rgba(255,100,0,0) 72%);
}
.analytics-kpi.tone-down:before{ background:linear-gradient(90deg,var(--err),transparent 72%) }

.metric{ border-top:0 !important }
.metric p{ font-size:.76rem; color:var(--s-500); font-weight:500 }
.metric strong{ font-size:2.15rem; letter-spacing:-.04em; color:var(--s-950) }
.metric>span:last-child{ color:var(--s-400); font-size:.69rem }

.badge{ font-weight:600; letter-spacing:-.01em }
.badge.positive{ background:var(--ok-bg); color:var(--ok) !important; border:1px solid var(--ok-line) }
.badge.warn{ background:var(--warn-bg); color:var(--warn) !important; border:1px solid var(--warn-line) }

/* ---------------------------------------------------------------
   8. Tabellen
   --------------------------------------------------------------- */
th{
  background:transparent;
  border-bottom:1px solid var(--line);
  color:var(--s-500);
  font-family:var(--font-ui);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.07em;
  padding:.85rem 1rem;
}
td{ border-bottom:1px solid rgba(15,15,20,.05); padding:.95rem 1rem; color:var(--s-700) }
tbody tr{ transition:background var(--fast) }
tbody tr:hover{ background:var(--s-50) }
tbody tr:last-child td{ border-bottom:0 }
table .font-semibold,.report-title{ color:var(--s-950); font-weight:600 }
.report-title:hover{ color:var(--a-600); text-decoration-color:var(--a-400) }

/* ---------------------------------------------------------------
   9. Status, Chips und Marken
   --------------------------------------------------------------- */
.status{
  padding:.28rem .58rem;
  border-radius:99px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:-.005em;
  border:1px solid transparent;
}
.status.on{ background:var(--ok-bg) !important; color:var(--ok) !important; border-color:var(--ok-line) }
.status.on:before{ background:var(--ok) !important; color:var(--ok) !important; box-shadow:0 0 0 2px rgba(15,157,99,.16) }
.status.off{ background:var(--s-100); color:var(--s-500); border-color:var(--line) }

.users-chip,.analytics-tag,.mini-chip,.recipient-tag{
  border-radius:99px;
  font-weight:600;
  font-size:.68rem;
  letter-spacing:-.005em;
}
.users-chip.on,.analytics-tag.tone-ok{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line) }
.users-chip.pending,.analytics-tag.tone-warning{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line) }
.users-chip.expired,.analytics-tag.tone-error{ background:var(--err-bg); color:var(--err); border:1px solid var(--err-line) }
.users-chip.admin,.users-chip.team,.analytics-tag.tone-notice{ background:var(--info-bg); color:var(--info); border:1px solid var(--info-line) }

.source-chip,.source-logo,.client-dot,.client-logo,.project-favicon{
  border-radius:9px;
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
  background:var(--surface);
}
.source-chip{ font-size:.62rem; color:var(--s-600) }

.ai-badge{
  background:linear-gradient(180deg,var(--a-400),var(--a-600)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 3px 10px -3px rgba(255,100,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  font-family:var(--font-ui);
  font-weight:600;
}
.ai-panel{
  background:linear-gradient(180deg,var(--a-tint),#fff) !important;
  border-color:#ffdcc4 !important;
  border-radius:var(--r-lg);
}

.priority{
  border-radius:99px;
  padding:.22rem .52rem;
  font-size:.62rem;
  font-weight:650;
  letter-spacing:-.005em;
}
.priority.high{ background:linear-gradient(180deg,var(--a-400),var(--a-600)) !important; color:#fff !important; box-shadow:0 3px 9px -3px rgba(255,100,0,.5) }
.priority.med{ background:var(--warn-bg) !important; color:var(--warn) !important; border:1px solid var(--warn-line) }

/* ---------------------------------------------------------------
   10. Listen im dunklen Panel (Dashboard-Opportunities)
   --------------------------------------------------------------- */
.todo{
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  transition:background var(--fast), border-color var(--fast), transform var(--fast);
}
.todo:hover{ background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.16); transform:translateX(2px) }
.todo strong{ color:#fff; letter-spacing:-.015em }
.todo p{ color:rgba(255,255,255,.52) }

/* ---------------------------------------------------------------
   11. Backlog
   --------------------------------------------------------------- */
.backlog-item{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--med), border-color var(--med), transform var(--med);
}
.backlog-item:hover{ box-shadow:var(--sh-md); border-color:var(--line-strong); transform:translateY(-1px) }
.backlog-item h3{ letter-spacing:-.022em; color:var(--s-950) }
.backlog-toolbar,.backlog-create,.backlog-ai-note,.backlog-management-summary{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
}
.backlog-ai-note{ background:linear-gradient(180deg,var(--a-tint),#fff); border-color:#ffdcc4 }
.backlog-stats strong{ color:var(--s-950); letter-spacing:-.03em }

/* ---------------------------------------------------------------
   12. Formularfelder
   --------------------------------------------------------------- */
.field input,.field select,.field textarea,.source-option select,
.tag-input,.users-card input,.users-card select,
.backlog-create input,.backlog-create select,.backlog-create textarea{
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-xs) !important;
  background:var(--surface);
  color:var(--s-800);
  box-shadow:var(--sh-xs);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.field input:focus,.field select:focus,.field textarea:focus,
.tag-input:focus-within,.source-option select:focus,
.backlog-create input:focus,.backlog-create select:focus,.backlog-create textarea:focus{
  border-color:var(--a-400) !important;
  box-shadow:0 0 0 3px rgba(255,100,0,.13) !important;
  outline:none;
}
.label,.field{ color:var(--s-600); font-weight:600 }
.source-option{ border-radius:var(--r-md); border-color:var(--line) }
.source-option:hover{ border-color:var(--line-strong); background:var(--s-25) }

/* ---------------------------------------------------------------
   13. Ueberlagerungen
   --------------------------------------------------------------- */
.modal{ background:rgba(10,10,14,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.modal-panel{
  box-shadow:-28px 0 80px rgba(10,10,14,.22);
  border-left:1px solid var(--line);
}
@keyframes slidein{ from{ transform:translateX(24px); opacity:0 } }

.toast{
  background:linear-gradient(180deg,var(--s-800),var(--s-950));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.10);
  font-weight:500;
}

/* ---------------------------------------------------------------
   14. Sprachumschalter
   --------------------------------------------------------------- */
.lang-switch{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10) }
.lang-switch a{ font-family:var(--font-ui); letter-spacing:.03em }
.lang-switch a.active{
  background:linear-gradient(180deg,var(--a-400),var(--a-600)) !important;
  color:#fff !important;
  box-shadow:0 3px 9px -3px rgba(255,100,0,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.lang-switch.is-light{ background:var(--s-100); border-color:var(--line) }
.lang-switch.is-light a{ color:var(--s-500) }
.lang-switch.is-light a:hover{ color:var(--s-900) }
.lang-switch.is-light a.active{
  background:linear-gradient(180deg,var(--s-800),var(--s-950)) !important;
  color:#fff !important;
  box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------------------------------------------------------------
   15. Bewegung
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .nav-item:hover,.metric:hover,.btn-primary:hover,.todo:hover{ transform:none }
}

/* ---------------------------------------------------------------
   16. Kundenprojekte als eigenstaendige Karten
   --------------------------------------------------------------- */
.customer-grid{
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:14px;
  padding:4px 0;
}
.customer-card{
  padding:16px;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--med), border-color var(--med), transform var(--med);
}
.customer-card:hover{
  box-shadow:var(--sh-md);
  border-color:var(--line-strong);
  transform:translateY(-2px);
}
.customer-card h3{ font-family:var(--font-display); font-size:15px; letter-spacing:-.022em }
.customer-card p{ font-size:11.5px; color:var(--s-500) }
.customer-card-actions{ flex-wrap:wrap; gap:6px; margin-top:14px }
.customer-card-actions button{
  padding:.42rem .62rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-xs);
  background:var(--surface);
  box-shadow:var(--sh-xs);
  font:600 10.5px/1.2 var(--font-ui);
  letter-spacing:-.005em;
  color:var(--s-700);
  white-space:nowrap;
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.customer-card-actions button:hover{ background:var(--s-50); border-color:var(--s-300); color:var(--s-950); transform:translateY(-1px) }
.customer-card-actions .danger{ color:var(--err) }
.customer-card-actions .danger:hover{ background:var(--err-bg); border-color:var(--err-line); color:var(--err) }
.modal-actions .danger{ color:var(--err) }
.modal-actions .danger:hover{ background:var(--err-bg); border-color:var(--err-line); color:var(--err) }

.template-state{ font-size:9.5px; letter-spacing:.01em }
.template-state.standard{ background:var(--s-100); color:var(--s-500); border:1px solid var(--line) }
.template-state.custom{ background:var(--a-tint); color:var(--a-700); border:1px solid #ffdcc4 }
.customer-template-box{ border-radius:var(--r-lg); border-color:var(--line); background:var(--s-25) }

.client-logo,.project-favicon{ background:var(--surface); border-color:var(--line) }
.client-logo:hover,.project-favicon:hover{ border-color:var(--line-strong) }

/* Empfaengerstapel */
.avatar{
  width:26px; height:26px;
  border:2px solid var(--surface);
  background:linear-gradient(145deg,var(--s-100),var(--s-200));
  color:var(--s-600);
  font-weight:600;
  box-shadow:var(--sh-xs);
}

/* ---------------------------------------------------------------
   17. Verbindungen und Zugangsdaten
   --------------------------------------------------------------- */
.connection-list>*{ border-radius:var(--r-md); transition:background var(--fast) }
.connection-list>*:hover{ background:var(--s-25) }
.connection strong{ color:var(--s-900); letter-spacing:-.015em }
.connection p{ color:var(--s-500) }
.source-logo{ border:1px solid var(--line); box-shadow:var(--sh-xs) }
.source-logo.google{ background:var(--info-bg); color:var(--info) }
.source-logo.sistrix{ background:var(--a-tint); color:var(--a-700) }
.source-logo.openai{ background:linear-gradient(180deg,var(--a-400),var(--a-600)) !important; color:#fff !important }

.credential-card{ border-radius:var(--r-lg); transition:box-shadow var(--med), border-color var(--med) }
.credential-card:hover{ box-shadow:var(--sh-sm); border-color:var(--line-strong) }
.credential-meta{ color:var(--s-500) }

.mcp-card{ border-radius:var(--r-lg) }
.mcp-policy-bar{ border-radius:var(--r-md); background:var(--s-50); border:1px solid var(--line) }

/* ---------------------------------------------------------------
   18. Backlog-Feinschliff
   --------------------------------------------------------------- */
.backlog-toolbar{ background:var(--surface) }
.backlog-stats span{ color:var(--s-500); font-size:.82rem }
.backlog-filters select{
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-xs) !important;
  background:var(--surface);
  box-shadow:var(--sh-xs);
}
.backlog-filters label{ color:var(--s-500); font-weight:600; font-size:.72rem; letter-spacing:.01em }

/* Die Erledigt-Markierung wird vom blassen Kaestchen zum klaren Ziel. */
.backlog-check span{
  display:grid; place-items:center;
  width:22px; height:22px;
  border:1.5px solid var(--s-300);
  border-radius:7px;
  background:var(--surface);
  color:transparent;
  font-size:12px;
  box-shadow:var(--sh-xs);
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.backlog-check:hover span{ border-color:var(--a-400); transform:scale(1.06) }
/* Die Checkbox ist unsichtbar; der Fokus muss am sichtbaren Kaestchen erscheinen. */
.backlog-check input:focus-visible+span{ outline:2px solid var(--a-600); outline-offset:2px }
.backlog-check input:disabled+span{ opacity:.45; cursor:not-allowed; transform:none }
.backlog-check input:checked+span{
  background:linear-gradient(180deg,var(--a-400),var(--a-600));
  border-color:var(--a-600);
  color:#fff;
  box-shadow:0 3px 10px -3px rgba(255,100,0,.5);
}

.backlog-create summary{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
  border-radius:var(--r-sm);
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:var(--sh-xs);
  color:var(--s-700);
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  list-style:none;
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.backlog-create summary::-webkit-details-marker{ display:none }
.backlog-create summary:hover{ background:var(--s-50); border-color:var(--s-300); color:var(--s-950); transform:translateY(-1px) }

.backlog-meta span,.backlog-effort,.backlog-customer{
  border-radius:99px;
  background:var(--s-100);
  border:1px solid var(--line);
  color:var(--s-600);
  font-size:.67rem;
  font-weight:550;
  padding:.2rem .5rem;
}
.backlog-management-summary{ background:var(--surface) }

/* ---------------------------------------------------------------
   19. Anmeldung und Einladung
   --------------------------------------------------------------- */
.auth-choice{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
}
.login-reset-form{ border-radius:var(--r-lg); border-color:var(--line); background:var(--s-25) }
.login-password input,.login-reset-form input,.invite-fields input{
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--sh-xs);
  color:var(--s-800);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.login-password input:focus,.login-reset-form input:focus,.invite-fields input:focus{
  border-color:var(--a-400);
  box-shadow:0 0 0 3px rgba(255,100,0,.13);
  outline:none;
}
.login-password label,.login-reset-form label{ color:var(--s-600) }
.login-password button,.invite-submit{
  background:linear-gradient(180deg,var(--s-800),var(--s-950));
  border:1px solid var(--s-950);
  border-radius:var(--r-sm);
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:-.012em;
  box-shadow:var(--sh-sm), var(--sh-inset);
  transition:transform var(--fast), box-shadow var(--fast);
}
.login-password button:hover,.invite-submit:hover{
  background:linear-gradient(180deg,var(--s-700),var(--s-900));
  box-shadow:var(--sh-md), var(--sh-inset);
  transform:translateY(-1px);
}
.login-divider{ color:var(--s-400) }
.login-divider:before,.login-divider:after{ background:var(--line) }
.login-reset summary{ color:var(--a-700); font-family:var(--font-ui) }
.login-reset summary:hover{ color:var(--a-500) }
.login-reset-form button{
  border-radius:var(--r-sm);
  border-color:var(--line-strong);
  box-shadow:var(--sh-xs);
  font-family:var(--font-ui);
}
.login-reset-form button:hover{ border-color:var(--a-400); color:var(--a-700); background:var(--a-tint) }
.login-google-button{
  background:linear-gradient(180deg,var(--a-400) 0%,var(--a-500) 52%,var(--a-600) 100%) !important;
  border-color:var(--a-700) !important;
  box-shadow:var(--sh-glow), var(--sh-inset) !important;
  border-radius:var(--r-sm);
  font-weight:600;
  letter-spacing:-.012em;
}
.login-google-button:hover{
  background:linear-gradient(180deg,#ff9550 0%,var(--a-500) 50%,var(--a-600) 100%) !important;
  box-shadow:0 10px 26px -6px rgba(255,100,0,.5), var(--sh-inset) !important;
}
.login-hint,.login-reset-lead{ color:var(--s-500) }
.login-error{ background:var(--err-bg); border:1px solid var(--err-line); color:var(--err); border-radius:var(--r-sm) }
.login-notice{ background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); border-radius:var(--r-sm) }

/* ---------------------------------------------------------------
   20. Datenansichten
   --------------------------------------------------------------- */
.analytics-kpi strong{ font-size:1.95rem; letter-spacing:-.04em; color:var(--s-950) }
.analytics-kpi-label{ color:var(--s-500); font-weight:600; letter-spacing:.01em }
.analytics-kpi-meta{ color:var(--s-400) }
.analytics-tabs a,.analytics-periods a,.analytics-periods button{
  border-radius:var(--r-xs);
  transition:background var(--fast), color var(--fast);
}
.analytics-link{ color:var(--a-600); font-weight:600; transition:color var(--fast) }
.analytics-link:hover{ color:var(--a-700) }
.analytics-empty{
  background:var(--surface);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-xs);
  color:var(--s-500);
}
.analytics-canvas,.analytics-chart{ border-radius:var(--r-lg) }

/* ---------------------------------------------------------------
   21. Einstellungen, Textfelder und Protokolle
   --------------------------------------------------------------- */
textarea{
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  background:var(--surface);
  color:var(--s-800);
  box-shadow:var(--sh-xs);
  font-family:var(--font-ui);
  line-height:1.6;
  transition:border-color var(--fast), box-shadow var(--fast);
}
textarea:focus{
  border-color:var(--a-400) !important;
  box-shadow:0 0 0 3px rgba(255,100,0,.13) !important;
  outline:none;
}
/* Der Standardprompt ist Fliesstext mit Struktur und liest sich monospaced besser. */
#defaultPrompt,.ai-settings textarea,.customer-template-box textarea{
  font-family:ui-monospace,"SFMono-Regular","JetBrains Mono","Cascadia Code",Consolas,monospace;
  font-size:12.5px;
}

select{ transition:border-color var(--fast), box-shadow var(--fast) }

.security-pill,.configured-pill{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:-.005em;
  border:1px solid var(--line);
  background:var(--s-100);
  color:var(--s-600);
}
.security-pill{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line) }
.configured-pill{
  background:linear-gradient(180deg,var(--a-400),var(--a-600)) !important;
  color:#fff !important;
  border-color:transparent;
  box-shadow:0 3px 9px -3px rgba(255,100,0,.45);
}
.credential-card h3{ font-family:var(--font-display); letter-spacing:-.025em }
.credential-meta{ background:var(--s-50); border:1px solid var(--line); border-radius:var(--r-md) }
.credential-meta strong{ color:var(--s-800) }
.ai-settings{
  background:linear-gradient(180deg,var(--a-tint),#fff) !important;
  border-color:#ffdcc4 !important;
  border-radius:var(--r-lg);
}
.model-note strong{ color:var(--ok); font-family:var(--font-ui) }

.run-stat{
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--med), transform var(--med);
}
.run-stat:hover{ box-shadow:var(--sh-sm); transform:translateY(-1px) }
.run-stat span{ color:var(--s-500); font-weight:500 }
.run-stat strong{ color:var(--s-950); letter-spacing:-.035em; font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------
   22. Support
   --------------------------------------------------------------- */
.support-card,.support-form,.support-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
}
.support-item{ transition:box-shadow var(--med), border-color var(--med) }
.support-item:hover{ box-shadow:var(--sh-sm); border-color:var(--line-strong) }

/* ---------------------------------------------------------------
   23. Schmale Ansichten
   --------------------------------------------------------------- */
@media (max-width:1023px){
  /* Als Kopfleiste braucht die Seitenleiste weniger Leuchtkraft als
     in der vollen Hoehe der Desktopansicht. */
  .app-sidebar{
    background:
      radial-gradient(420px 160px at 12% -40%, rgba(255,100,0,.13), transparent 70%),
      linear-gradient(180deg,#131318,#0a0a0d) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 24px -14px rgba(0,0,0,.6);
  }
  .app-sidebar:after{ display:none }
  .nav-item.active:after{ left:-2px }
  .app-shell>main{ background:var(--color-canvas) }
}

@media (max-width:640px){
  .customer-grid{ grid-template-columns:1fr }
  .app-shell h1{ font-size:1.7rem }
  .metric strong{ font-size:1.85rem }
}

/* ---------------------------------------------------------------
   Projektauswahl in der Kopfzeile (CurrentProject, Aufgabe 25)
   --------------------------------------------------------------- */
.header-actions{ display:flex; align-items:center; gap:12px; min-width:0 }
.project-switch{
  max-width:260px; min-width:0; height:38px;
  padding:0 32px 0 12px;
  border:1px solid var(--line-strong); border-radius:var(--r-xs);
  background-color:var(--surface); box-shadow:var(--sh-xs);
  font-size:13px; font-weight:600; color:var(--s-900, #111);
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
@media(max-width:640px){
  .header-actions{ flex:1 1 100%; flex-wrap:wrap }
  .project-switch{ flex:1 1 180px; max-width:none; width:100% }
}