/* ══════ MCL Central — design system "control room" ══════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:#F4F5F2; --panel:#FFFFFF; --ink:#15211B; --muted:#5D6B63; --line:#E1E5E0;
  --acc:#1E7A4C; --acc-soft:#E4F1E9; --acc-ink:#0F5132;
  --amber:#B4700B; --amber-soft:#FBF0DC; --red:#B3372B; --red-soft:#F9E7E4;
  --blue:#2D64A8; --blue-soft:#E5EDF7;
  --rail:#0E1A14; --rail-ink:#C9D6CE; --rail-act:#173226;
  --r:10px; --shadow:0 1px 2px rgba(21,33,27,.06),0 8px 24px rgba(21,33,27,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;min-height:100vh}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.01em}
h1{font-size:24px;font-weight:700;margin:0 0 14px}
h2{font-size:17px;font-weight:600;margin:22px 0 10px}
a{color:var(--acc-ink)}
code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px}

/* ── sidebar ── */
.sidebar{width:228px;flex:0 0 228px;background:var(--rail);color:var(--rail-ink);
  padding:18px 12px 24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar h2{color:#fff;font-size:15px;font-weight:700;margin:2px 8px 4px;letter-spacing:.02em}
.sidebar h2::before{content:'◈ ';color:var(--acc)}
.sidebar .tag{display:block;margin:0 8px 16px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5F7A6C}
.sidebar .sec{margin:16px 8px 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#5F7A6C;font-family:'JetBrains Mono',monospace}
.sidebar a{display:block;padding:8px 10px;margin:1px 0;border-radius:8px;
  color:var(--rail-ink);text-decoration:none;font-size:14px}
.sidebar a:hover{background:var(--rail-act);color:#fff}
.sidebar a.active{background:var(--acc);color:#fff;font-weight:600}
.sidebar a:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* ── main ── */
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1200px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:0 0 18px;box-shadow:var(--shadow)}
.card h1:first-child,.card h2:first-child{margin-top:0}

/* ── pipeline rail (firma) ── */
.pipe{display:flex;gap:0;align-items:stretch;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  margin:0 0 18px;overflow-x:auto}
.pipe .st{flex:1;min-width:118px;padding:12px 14px;position:relative}
.pipe .st+.st{border-left:1px solid var(--line)}
.pipe .st+.st::before{content:'›';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  background:var(--panel);color:var(--muted);font-size:15px;line-height:1;padding:1px 0}
.pipe .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.pipe .v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;margin-top:2px}
.pipe .s{font-size:12px;color:var(--muted);margin-top:1px}
.pipe .v .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-left:6px;vertical-align:2px;background:var(--acc)}
.pipe .v .dot.warn{background:var(--amber)} .pipe .v .dot.err{background:var(--red)}

/* ── tabelle ── */
table{width:100%;border-collapse:collapse;background:var(--panel);font-size:14px}
.card table{box-shadow:none;border:0}
th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;
  padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:#FAFBF9}
td:first-child{font-weight:500}

/* ── form ── */
input,select,textarea{font:inherit;color:var(--ink);background:#fff;
  border:1px solid #CBD4CE;border-radius:8px;padding:9px 11px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
label{font-size:13px;color:var(--muted)}
button,.btn{font:inherit;font-weight:600;background:var(--acc);color:#fff;border:0;
  border-radius:8px;padding:9px 16px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--acc-ink)}
button:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
button.ghost,.btn.ghost{background:transparent;color:var(--acc-ink);border:1px solid #CBD4CE}
button.danger,.btn.danger{background:var(--red)}

/* ── badge stato ── */
.badge,[class^=badge-]{display:inline-block;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;letter-spacing:.03em}
.badge-ok{background:var(--acc-soft);color:var(--acc-ink)}
.badge-warn{background:var(--amber-soft);color:var(--amber)}
.badge-err{background:var(--red-soft);color:var(--red)}
.badge-info{background:var(--blue-soft);color:var(--blue)}
.badge-mut{background:#EDEFEA;color:var(--muted)}

pre{background:var(--rail);color:#D8E4DC;padding:12px 14px;border-radius:8px;
  overflow-x:auto;max-height:300px;overflow-y:auto}
.muted{color:var(--muted)} .right{text-align:right}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ── login ── */
.login-wrap{margin:auto;width:min(92vw,380px)}
.login-wrap .brand{text-align:center;margin-bottom:18px}
.login-wrap .brand b{font-family:'Sora',sans-serif;font-size:20px;color:var(--ink)}
.login-wrap .brand b::before{content:'◈ ';color:var(--acc)}
.login-wrap .brand span{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.login-wrap form{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:26px;box-shadow:var(--shadow)}
.login-wrap input,.login-wrap button{width:100%;margin-top:10px}

/* ── mobile ── */
@media (max-width:860px){
  body{display:block}
  .sidebar{width:100%;height:auto;position:static;display:flex;flex-wrap:wrap;
    gap:2px;padding:10px;align-items:center}
  .sidebar h2{width:100%;margin:2px 6px}
  .sidebar .tag,.sidebar .sec{display:none}
  .sidebar a{padding:7px 11px;font-size:13px}
  .main{padding:14px 12px 50px}
  .pipe .st{min-width:104px;padding:10px 10px}
  td,th{padding:7px 6px}
}
@media (prefers-reduced-motion:no-preference){
  .sidebar a,button,.btn{transition:background .13s ease}
}

/* ══════ v3: responsive completo ══════ */
.mnav-toggle{display:none}
.mnav-btn{display:none}
@media (max-width:860px){
  .sidebar{display:block;width:100%;height:auto;position:static;padding:10px 12px}
  .sidebar h2{display:inline-block;margin:4px 6px 4px 2px}
  .mnav-btn{display:inline-block;float:right;background:var(--rail-act);color:#fff;
    padding:7px 14px;border-radius:8px;font-size:15px;cursor:pointer;user-select:none;margin-top:1px}
  .sidebar .tag{display:none}
  .sidebar .sec{display:none}
  .sidebar a{display:none}
  .mnav-toggle:checked ~ a{display:block}
  .mnav-toggle:checked ~ .sec{display:block}
  .card{overflow-x:auto}
  .main{padding:14px 10px 50px}
}
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%}
  .card form > p{display:flex;flex-direction:column;gap:8px;align-items:stretch}
  h1{font-size:20px}
}

/* ══════ Analytics live board ══════ */
.liveboard{background:linear-gradient(135deg,#0E1A14 0%,#14281E 55%,#1B3A29 100%);color:#E7F0EA;
  border:1px solid #1E3A2C;border-radius:14px;padding:22px 24px 24px;margin:0 0 18px;box-shadow:var(--shadow)}
.liveboard h1{color:#fff;margin:0;font-size:22px}
.liveboard .sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8FB3A0;margin:4px 0 18px}
.livedot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#39D98A;
  margin-right:8px;animation:lpulse 1.6s infinite}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
.livegrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.livecell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:11px;padding:14px 16px}
.livecell .t{font-size:13px;color:#DFE9E3;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.livecell .n{font-family:'JetBrains Mono',monospace;font-size:38px;font-weight:600;color:#fff;line-height:1.05;transition:color .5s}
.livecell .n.up{color:#39D98A}
.livecell .s{font-size:12px;color:#A9C4B6;margin-top:4px}
.livecell.total{background:rgba(57,217,138,.10);border-color:rgba(57,217,138,.35)}
.spark{display:block}
.anrow td{vertical-align:middle}

/* ══════ Control Center (dashboard hero) ══════ */
.cc-hero{background:linear-gradient(135deg,#0E1A14 0%,#14281E 48%,#1B3A29 100%);
  border:1px solid #1E3A2C;border-radius:16px;padding:20px 22px;margin:0 0 18px;
  box-shadow:0 10px 30px rgba(14,26,20,.28);position:relative;overflow:hidden}
.cc-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(57,217,138,.14) 0%,transparent 70%);pointer-events:none}
.cc-grid{display:grid;gap:14px;grid-template-columns:1.35fr 1.2fr .9fr}
@media(max-width:900px){.cc-grid{grid-template-columns:1fr}}
.cc-cell{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:16px 18px;transition:transform .18s,border-color .18s}
.cc-cell:hover{transform:translateY(-2px);border-color:rgba(57,217,138,.35)}
.cc-cell .t{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8FB3A0;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cc-cell .n{font-family:'JetBrains Mono',monospace;font-size:44px;font-weight:700;line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#9FE8C4 100%);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cc-cell .s{font-size:12.5px;color:#A9C4B6;margin-top:8px;line-height:1.5}
.cc-cell .s strong{color:#E7F0EA}
.cc-live-cell{background:linear-gradient(160deg,rgba(57,217,138,.13),rgba(57,217,138,.04));
  border-color:rgba(57,217,138,.32)}
.cc-topsites{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cc-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(57,217,138,.12);
  border:1px solid rgba(57,217,138,.28);border-radius:999px;padding:3px 11px;
  font-size:12px;color:#CFF3DF;white-space:nowrap}
.cc-chip b{font-family:'JetBrains Mono',monospace;color:#39D98A}
.cc-chip .pos{color:#8FB3A0;font-size:11px}
.cc-art-title{color:#fff;font-size:14px;font-weight:600;line-height:1.35;display:block;margin-bottom:6px}
.cc-art-meta{font-size:12px;color:#A9C4B6;line-height:1.7}
.cc-art-meta b{color:#9FE8C4;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:12px}
.cc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#39D98A;animation:lpulse 1.6s infinite}