/* Tokens 1:1 aus console main (frontend/src/index.css) — via docs-mock.html */
:root {
  --paper:#f6f5f1; --paper-2:#efede6; --paper-3:#e9e7dd; --surface:#fffdf8;
  --ink:#16160f; --ink-2:#55534a; --ink-3:#8b897d;
  --line:#e2e0d6; --line-2:#d6d3c6;
  --lime:#ccff00; --lime-deep:#7e9c00; --lime-soft:rgba(204,255,0,.18); --lime-glow:rgba(204,255,0,.55);
  --amber:#a86a12; --amber-soft:rgba(168,106,18,.12);
  --red:#b23a2c; --red-soft:rgba(178,58,44,.10);
  --ok:#5d7d00; --night:#14140d;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:7px; --r-lg:14px;
  --lift-1:0 1px 2px rgba(22,22,15,.05), 0 8px 24px rgba(22,22,15,.05);
  --lift-2:0 2px 6px rgba(22,22,15,.06), 0 24px 60px rgba(22,22,15,.09);
  --sb:230px;
}
* { box-sizing:border-box; margin:0; }
html, body { height:100%; }
body { background:var(--paper); color:var(--ink); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(120% 70% at 88% -10%, rgba(204,255,0,.07) 0%, transparent 42%),
              radial-gradient(80% 60% at 6% 0%, rgba(244,184,120,.10) 0%, transparent 44%); }
::selection { background:var(--lime); color:var(--night); }
button { font-family:inherit; cursor:pointer; }
.mono { font-family:var(--mono); }

.app { display:grid; grid-template-columns:var(--sb) minmax(0,1fr); height:100vh; }

/* ---- sidebar ---- */
.sidebar { background:var(--paper-2); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.org { display:flex; align-items:center; gap:9px; padding:16px 16px 14px; }
.org svg { width:24px; height:24px; }
.org .wm { font-weight:800; font-size:15px; letter-spacing:-.01em; }
.org .wm span { color:var(--ink-3); font-weight:600; }
.nav { padding:6px 10px; flex:1; }
.gl { font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r); color:var(--ink-2); font-weight:500; font-size:13px; cursor:pointer; }
.nav-item:hover { background:var(--paper-3); color:var(--ink); }
.nav-item.active { background:var(--surface); color:var(--ink); box-shadow:var(--lift-1); font-weight:600; }
.nav-item .count { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--ink-3); border:1px solid var(--line-2); border-radius:100px; padding:1px 7px; }
.nav-item .count.alert { color:#fff; background:var(--red); border-color:var(--red); }
.sb-foot { border-top:1px solid var(--line); padding:12px 16px; font-size:11px; color:var(--ink-3); }

/* ---- topbar / content ---- */
.main { min-width:0; display:flex; flex-direction:column; min-height:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 26px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter:blur(10px); }
.scope { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.scope .dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px var(--lime-soft), 0 0 7px var(--lime-glow); }
.scope .sep, .scope .dim { color:var(--ink-3); font-weight:500; }
.spacer { flex:1; }
.watch-pill { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); border-radius:100px; padding:6px 12px; }
.watch-pill .wl { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px var(--lime-soft), 0 0 8px var(--lime-glow); animation:breath 4s ease-in-out infinite; }
@keyframes breath { 0%,100%{transform:scale(1);opacity:.92} 50%{transform:scale(1.18);opacity:1} }

.content { flex:1; overflow-y:auto; padding:24px 28px 48px; }
.view { display:none; max-width:1150px; } .view.on { display:block; }
.pagehead { margin-bottom:20px; }
.pagehead h1 { font-size:23px; font-weight:800; letter-spacing:-.02em; }
.pagehead .sub { color:var(--ink-2); font-size:13px; margin-top:5px; max-width:78ch; }
.sectag { display:flex; align-items:center; gap:12px; margin:28px 0 13px; }
.sectag .n { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.sectag .rule { flex:1; height:1px; background:var(--line); }

.card { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--lift-1); overflow:hidden; }
.pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:100px; border:1px solid var(--line-2); color:var(--ink-2); }
.pill .pd { width:6px; height:6px; border-radius:50%; background:var(--ink-3); }
.pill.ok { color:var(--ok); } .pill.ok .pd { background:var(--lime); box-shadow:0 0 0 2px var(--lime-soft); }
.pill.warn { color:var(--amber); } .pill.warn .pd { background:var(--amber); }
.pill.crit { color:var(--red); } .pill.crit .pd { background:var(--red); }
.pill.mute { color:var(--ink-3); }
.flag { font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--amber); border:1px solid var(--amber); border-radius:5px; padding:1px 6px; margin-left:7px; white-space:nowrap; background:var(--amber-soft); }
.flag.bad { color:var(--red); border-color:var(--red); background:var(--red-soft); }

/* ---- HERO / flow ---- */
.hero { padding:20px 22px 18px; }
.hero-head { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.ava { width:40px; height:40px; border-radius:11px; background:var(--night); color:var(--lime); display:grid; place-items:center; font-weight:800; font-size:15px; }
.hero-head h2 { font-size:19px; font-weight:800; letter-spacing:-.01em; }
.hero-head .role { color:var(--ink-2); font-size:12.5px; margin-top:1px; }
.hero-head .chips { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.learn { font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:10px; display:flex; align-items:center; gap:7px; }
.learn .wl { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 2px var(--lime-soft); animation:breath 3s infinite; }

.flow { display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:20px 2px 8px; }
.ph { min-width:116px; flex:1; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:10px 11px; cursor:pointer; position:relative; }
.ph:hover { border-color:var(--line-2); box-shadow:var(--lift-1); }
.ph.sel { border-color:var(--lime-deep); box-shadow:0 0 0 3px var(--lime-soft), var(--lift-2); }
.ph .pn { font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.ph .pt { font-weight:700; font-size:12.5px; margin:4px 0 7px; }
.ph .ps { font-family:var(--mono); font-size:9.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:2px; }
.ph .retry { position:absolute; top:-9px; right:9px; font-family:var(--mono); font-size:9px; font-weight:700; color:var(--amber); background:var(--surface); border:1px solid var(--amber); border-radius:100px; padding:1px 7px; }
.conn { align-self:center; width:16px; min-width:16px; height:1px; background:var(--line-2); position:relative; }
.conn::after { content:""; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left-color:var(--line-2); }
.gate { align-self:center; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 4px; }
.gate .gd { width:11px; height:11px; transform:rotate(45deg); border:1.5px solid var(--lime-deep); background:var(--lime-soft); border-radius:2px; }
.gate .gt { font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime-deep); white-space:nowrap; font-weight:600; }
.ends { align-self:center; display:flex; flex-direction:column; gap:5px; padding-left:4px; }

.phdetail { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.phdetail:empty { display:none; }
.phdetail .ti { font-weight:700; font-size:13px; margin-bottom:10px; }
.phdetail .ti .mono { color:var(--ink-3); font-size:10.5px; font-weight:500; margin-left:8px; }
.pdgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; }
.pd-kpi { border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; background:var(--paper); }
.pd-kpi .k { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.pd-kpi .v { font-weight:800; font-size:17px; margin-top:4px; letter-spacing:-.01em; }
.pd-kpi .v small { font-size:11px; color:var(--ink-3); font-weight:600; }
.pdnote { margin-top:11px; font-size:12.5px; color:var(--ink-2); }
.pdnote b { color:var(--ink); }
.trend { color:var(--ok); font-family:var(--mono); font-size:10.5px; }

.ghost { border:1.5px dashed var(--line-2); border-radius:var(--r-lg); background:transparent; box-shadow:none; display:flex; align-items:center; justify-content:center; padding:26px; color:var(--ink-3); font-size:12.5px; text-align:center; line-height:1.6; margin-top:16px; }

/* ---- kpis ---- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.kpi { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--lift-1); }
.kpi .lab { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.kpi .val { font-size:25px; font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.kpi .val .u { font-size:13px; color:var(--ink-3); font-weight:600; }
.kpi .dl { font-size:11px; margin-top:6px; color:var(--ink-2); }
.kpi.warn .val { color:var(--amber); }

/* ---- alerts ---- */
.alerts { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.alert { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:10px 15px; font-size:12.5px; background:var(--surface); box-shadow:var(--lift-1); }
.alert .t { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); min-width:40px; }
.alert .go { margin-left:auto; font-weight:600; font-size:12px; color:var(--lime-deep); cursor:pointer; white-space:nowrap; }

/* ---- tables ---- */
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:10px 16px; }
table.tbl td { padding:11px 16px; border-top:1px solid var(--line); font-size:13px; vertical-align:middle; }
table.tbl tr.r { cursor:pointer; } table.tbl tr.r:hover td { background:var(--paper-2); }
.num-r { text-align:right; font-family:var(--mono); font-size:12px; }
th.num-r { font-size:9.5px; }
.dim { color:var(--ink-2); } .dimmer { color:var(--ink-3); }

/* ---- run detail ---- */
.runhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.runhead h1 { font-size:21px; font-weight:800; letter-spacing:-.02em; }
.facts { display:flex; gap:24px; flex-wrap:wrap; margin:14px 0 2px; }
.fact .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.fact .v { font-weight:700; font-size:14.5px; margin-top:3px; }
.ops { display:flex; gap:8px; margin:14px 0 18px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border:1px solid transparent; border-radius:var(--r); padding:8px 14px; background:transparent; color:var(--ink); }
.btn-primary { background:var(--ink); color:var(--paper); box-shadow:var(--lift-1); }
.btn-ghost { border-color:var(--line-2); background:var(--surface); }
.btn:disabled { opacity:.35; cursor:default; }
.budgets { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:18px; }
.budget { border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 15px; background:var(--surface); box-shadow:var(--lift-1); }
.budget .row1 { display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-2); margin-bottom:8px; }
.budget .row1 b { font-family:var(--mono); font-size:11.5px; color:var(--ink); }
.bar { height:6px; background:var(--paper-3); border-radius:4px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--lime-deep); border-radius:4px; }
.bar i.warn { background:var(--amber); }
.stype { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; padding:2px 7px; border-radius:4px; text-transform:uppercase; }
.stype.tool { color:#5b78a8; background:rgba(120,150,200,.14); }
.stype.llm { color:var(--lime-deep); background:var(--lime-soft); }
.stype.event { color:var(--ink-2); background:var(--paper-3); }
.stype.infra { color:var(--ink-3); background:var(--paper-3); }
tr.anom td { background:var(--amber-soft); }
.artifacts { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.arte { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:9px 14px; font-size:12.5px; background:var(--surface); box-shadow:var(--lift-1); }
.arte .okm { color:var(--ok); font-weight:800; }

/* ---- agents grid ---- */
.bpgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.bp { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--lift-1); padding:18px 19px; }
.bp .bph { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.bp .bnm { font-weight:800; font-size:15px; }
.bp .btag { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:1px; }
.kv { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
.kv .k { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.kv .v { font-weight:800; font-size:16px; margin-top:2px; }

/* ================= agent-ops UI-Ergänzungen (nicht im Mock) ================= */
a.nav-item { text-decoration:none; }
.page { max-width:1150px; }

/* laufender Lauf: pulsierender Dot */
.pill.run { color:var(--ok); }
.pill.run .pd { background:var(--lime); box-shadow:0 0 0 2px var(--lime-soft), 0 0 7px var(--lime-glow); animation:breath 1.5s ease-in-out infinite; }

/* proposed-Phase */
.ph.proposed { border-style:dashed; }
.ppill { font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); background:var(--amber-soft); border-radius:100px; padding:0 6px; margin-left:6px; vertical-align:middle; }
.ppill.pinned { color:var(--lime-deep); border-color:var(--lime-deep); background:var(--lime-soft); }
.ph .pedit { margin-left:6px; color:var(--ink-3); cursor:pointer; font-size:12px; visibility:hidden; }
.ph:hover .pedit { visibility:visible; }
.ph .pedit:hover { color:var(--ink); }
.trend.good { color:var(--ok); } .trend.bad { color:var(--amber); } .trend.flat { color:var(--ink-3); }

/* topbar Agent-Selector */
.scope .agsel { font:inherit; font-weight:600; font-size:13px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r); padding:2px 8px; color:var(--ink); }

/* Filterzeile */
.filters { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:4px 0 16px; }
.fgroup { display:flex; align-items:center; gap:8px; }
.flab { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:100px; overflow:hidden; background:var(--surface); }
.segb { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 12px; border:0; background:transparent; color:var(--ink-2); }
.segb + .segb { border-left:1px solid var(--line); }
.segb.on { background:var(--ink); color:var(--paper); }
.segb:hover:not(.on) { background:var(--paper-3); color:var(--ink); }
.phsel { font:inherit; font-size:12px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r); padding:5px 9px; color:var(--ink); }

/* Verlauf-Graph */
.chart-wrap { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--lift-1); padding:16px 14px 10px; }
.linechart { width:100%; height:auto; display:block; }
.linechart .grid { stroke:var(--line); stroke-width:1; }
.linechart .cline { fill:none; stroke:var(--lime-deep); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.linechart .dot { cursor:pointer; }
.linechart .dot:hover { stroke:var(--ink); stroke-width:2; }
.linechart .vmark { stroke:var(--ink-3); stroke-width:1; stroke-dasharray:4 3; }
.linechart .vlab { font-family:var(--mono); font-size:9px; fill:var(--ink-3); }
.linechart .ylab { font-family:var(--mono); font-size:10px; fill:var(--ink-3); text-anchor:end; }
.linechart .xlab { font-family:var(--mono); font-size:10px; fill:var(--ink-3); text-anchor:middle; }
.chart-sum { font-size:12.5px; color:var(--ink-2); margin-top:13px; padding:0 4px; }
.chart-sum b { color:var(--ink); font-family:var(--mono); }

/* Run-Detail Extras */
tr.phdiv td { background:var(--paper-2); font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:6px 16px; border-top:1px solid var(--line-2); }
.stype.thinking { color:#8a6ab0; background:rgba(150,110,190,.12); }
.hint { font-size:12.5px; color:var(--ink); background:var(--lime-soft); border:1px solid var(--lime-deep); border-radius:10px; padding:10px 14px; margin:12px 0; }
dialog.card { border:1px solid var(--line); }
dialog::backdrop { background:rgba(22,22,15,.28); backdrop-filter:blur(3px); }

/* Login */
.login-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(6px); }
.login-card { display:flex; flex-direction:column; gap:12px; width:300px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--lift-2); padding:26px 24px; }
.login-card .ll { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.login-card .lh { font-size:18px; font-weight:800; letter-spacing:-.01em; margin-bottom:2px; }
.login-card input { font:inherit; border:1px solid var(--line-2); background:var(--paper); border-radius:var(--r); padding:9px 11px; color:var(--ink); }
.login-card .btn { justify-content:center; }
.login-card .lerr { font-size:12px; color:var(--red); }

/* Toast */
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:60; background:var(--night); color:var(--paper); font-size:13px; padding:11px 18px; border-radius:100px; box-shadow:var(--lift-2); }

/* Leerzustand in Tabellen/Views */
.empty { color:var(--ink-3); font-size:12.5px; padding:26px; text-align:center; }

/* Perioden-Trend auf den SLO-Kacheln (vs. gleich langes Fenster davor) */
.trend { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.01em; vertical-align:4px; margin-left:6px; white-space:nowrap; }
.trend.good { color:var(--ok); }
.trend.bad { color:var(--red); }
.trend.flat { color:var(--ink-3); }

/* Lauf-Profil (Radar: Ist vs. typisch) */
.radarcard { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:14px 18px; }
.radarwrap { flex:0 1 360px; max-width:380px; min-width:260px; }
.radar { width:100%; height:auto; display:block; }
.radar .ring { fill:none; stroke:var(--line); stroke-width:1; }
.radar .ring.typ { stroke:var(--ink-3); stroke-width:1.2; stroke-dasharray:5 4; }
.radar .spoke { stroke:var(--line); stroke-width:1; }
.radar .prevrun { fill:none; stroke:var(--ink-3); stroke-width:1; opacity:.35; }
.radar .currun { fill:var(--lime-soft); stroke:var(--lime-deep); stroke-width:1.8; }
.radar .curpt { fill:var(--lime-deep); }
.radar .rlab { font-family:var(--mono); font-size:9px; fill:var(--ink-2); }
.radarlegend { display:flex; flex-direction:column; gap:7px; font-size:11.5px; color:var(--ink-2); min-width:180px; }
.radarlegend .lg::before { content:''; display:inline-block; width:16px; height:0; border-top:2px solid var(--ink-3); margin-right:8px; vertical-align:3px; }
.radarlegend .lg.cur::before { border-color:var(--lime-deep); }
.radarlegend .lg.typ::before { border-top-style:dashed; }
.radarlegend .lg.prev::before { opacity:.4; }
.radarlegend .rhint { font-size:10.5px; color:var(--ink-3); }

/* Detektor-Button in der Flow-Map-Fußzeile */
.learn .detectbtn { margin-left:auto; font-size:9.5px; padding:5px 10px; border-color:var(--line); color:var(--ink-2); }
.learn .detectbtn:hover { border-color:var(--ink-3); }
.learn .detectbtn:disabled { opacity:.5; }