/* NORTHE Shell — Login, linke Sidebar, Kunden-Reiter, NORTHE-Ebene, Mobil/PWA.
   Farben laufen über --accent / --accent-rgb (Kunden-Theme), die Shell selbst nutzt --northe. */

:root{
  --northe:#8BE21B; --northe-rgb:139,226,27; --northe2:#84BC2E;
  /* NORTHE-Grünwelt: alles auf dieser Ebene nutzt nur diese Töne (plus Weiß/Grau, Rot nur für Fehler) */
  --g-lime:#C6F542; --g-lime-rgb:198,245,66; --g-mint:#3DE08A; --g-mint-rgb:61,224,138; --g-deep:#4F9A1F; --g-deep-rgb:79,154,31;
  --g-pale:#DDF7B8; --g-pale-rgb:221,247,184; --g-moss:#6E9C3A; --g-moss-rgb:110,156,58;
  --sbw:236px; --tbh:58px; --mbh:64px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
html,body{height:100%;}
body{overflow-x:hidden;}
/* display:flex/grid/inline-flex in Klassen würde das hidden-Attribut überstimmen — hier gilt hidden immer */
[hidden]{display:none !important;}
body[data-level="northe"]{background:
  radial-gradient(900px 500px at 85% -8%, rgba(var(--northe-rgb),.10), transparent 60%),
  radial-gradient(700px 500px at -8% 105%, rgba(var(--g-mint-rgb),.06), transparent 55%), var(--bg) !important;}
body[data-level="northe"] .amb.global{background:
  radial-gradient(50% 50% at 18% 22%, rgba(var(--northe-rgb),.07), transparent 60%),
  radial-gradient(50% 50% at 84% 78%, rgba(var(--g-mint-rgb),.05), transparent 60%);}
body[data-level="northe"] .amb.cc,body[data-level="northe"] .amb.settings{opacity:0 !important;}
body[data-level="northe"] .vignette{background:radial-gradient(135% 95% at 50% -5%, transparent 42%, rgba(0,0,0,.55) 100%);}
body[data-level="northe"] .kin:focus{border-color:rgba(var(--northe-rgb),.55);}
body[data-level="northe"] .card::before{background:radial-gradient(130% 95% at 26% -28%, rgba(var(--g-pale-rgb),.16), transparent 62%);}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;}
#login[hidden]{display:none;}
.login-card{width:min(420px,100%);padding:38px 34px 30px;text-align:center;}
.login-logo svg{height:44px;width:auto;color:var(--northe);filter:drop-shadow(0 0 22px rgba(var(--northe-rgb),.55));}
.login-sub{margin:14px 0 26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,243,248,.5);}
#loginForm{display:flex;flex-direction:column;gap:10px;}
#loginForm .kin{height:46px;font-size:15px;}
#loginForm .kbtn{height:46px;font-size:14px;margin-top:6px;}
#loginForm .kbtn.silver{background:linear-gradient(180deg,#fff,#C7C5D2);color:#111;border:none;font-weight:700;}
#loginForm .kbtn.passkey,.login-card .kbtn.passkey{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border-radius:12px;border:1px solid rgba(var(--northe-rgb),.5);
  background:linear-gradient(180deg,rgba(var(--northe-rgb),.22),rgba(var(--northe-rgb),.08));color:#fff;font-weight:700;font-size:14px;margin-bottom:14px;box-shadow:0 0 0 1px rgba(var(--northe-rgb),.15),0 0 22px rgba(var(--northe-rgb),.25);}
.login-card .kbtn.passkey svg{width:18px;height:18px;}
.login-card .kbtn.passkey[hidden]{display:none;}
.login-or{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,248,.4);}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1);}
.login-or[hidden]{display:none;}
#loginForm .kin[hidden]{display:none;}
.seclist{display:flex;flex-direction:column;gap:8px;}
.secrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,0,0,.2);font-size:13px;}
.secrow .sn{flex:1;color:#fff;font-weight:600;}
.secrow .sd{font-size:11px;color:rgba(244,243,248,.45);}
.secrow .sx{cursor:pointer;color:rgba(244,243,248,.4);border:none;background:none;font-size:14px;}
.secrow .sx:hover{color:#F0726A;}
.rcodes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.06em;margin:10px 0;}
.rcodes span{padding:8px 12px;border:1px solid rgba(var(--northe-rgb),.35);border-radius:9px;background:rgba(var(--northe-rgb),.06);color:#fff;text-align:center;}
.qrbox{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.qrbox img{width:168px;height:168px;border-radius:12px;background:#fff;padding:6px;}
.seclog{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;max-height:260px;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.3);padding:8px 0;}
.seclog div{padding:3px 12px;display:flex;gap:10px;color:rgba(244,243,248,.7);}
.seclog .t{color:rgba(244,243,248,.35);flex-shrink:0;}
.seclog .ok{color:var(--g-mint);} .seclog .no{color:#F0726A;}
.gate{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(1,1,3,.85);backdrop-filter:blur(10px);}
.gate[hidden]{display:none;}   /* display:flex würde sonst das hidden-Attribut überstimmen */
.gate .card{width:min(560px,100%);padding:30px 30px 24px;}
.gate .kbtn.passkey{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;border-radius:12px;border:1px solid rgba(var(--northe-rgb),.5);
  background:linear-gradient(180deg,rgba(var(--northe-rgb),.22),rgba(var(--northe-rgb),.08));color:#fff;font-weight:700;font-size:14px;padding:0 16px;
  box-shadow:0 0 0 1px rgba(var(--northe-rgb),.15),0 0 22px rgba(var(--northe-rgb),.25);}
.gate .kbtn.passkey svg{width:18px;height:18px;flex-shrink:0;}
.gate .kbtn.passkey:disabled{opacity:.4;}
.login-err{min-height:18px;font-size:12.5px;color:#F0726A;margin-top:4px;}

/* ---------- Shell-Layout ---------- */
#shell{position:relative;z-index:2;display:flex;min-height:100vh;}
#shell[hidden]{display:none;}
#sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;width:var(--sbw);flex-shrink:0;display:flex;flex-direction:column;
  padding:22px 14px 16px;border-right:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));backdrop-filter:blur(18px);}
#main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* Marke oben in der Sidebar */
.sb-brand{padding:4px 8px 18px;}
.sb-northe svg{height:26px;width:auto;color:var(--northe);filter:drop-shadow(0 0 14px rgba(var(--northe-rgb),.45));display:block;}
body[data-level="client"] .sb-northe svg{height:16px;opacity:.55;filter:none;}
.sb-client{display:flex;align-items:center;gap:11px;margin-top:14px;}
.sb-client[hidden]{display:none;}
.sb-avatar{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25),0 0 18px rgba(var(--accent-rgb),.25);}
.sb-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.sb-cname{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.15;}
.sb-cname small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,248,.42);font-weight:600;margin-top:3px;}

/* Navigation (die .mtab-Buttons aus der alten Kopfleiste, jetzt vertikal) */
.sb-nav{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;}
.sb-group{display:none;flex-direction:column;gap:3px;}
body[data-level="northe"] .sb-group[data-level="northe"],body[data-level="client"] .sb-group[data-level="client"]{display:flex;}
.sb-nav .mtab{width:100%;justify-content:flex-start;gap:11px;padding:11px 13px;border-radius:12px;border:1px solid transparent;font-size:13.5px;
  color:rgba(244,243,248,.55);background:transparent;}
.sb-nav .mtab svg{width:17px;height:17px;}
.sb-nav .mtab:hover{color:rgba(244,243,248,.9);background:rgba(255,255,255,.04);}
.sb-nav .mtab.on{color:#fff;background:rgba(var(--igc),.12);border-color:rgba(var(--igc),.42);box-shadow:0 0 0 1px rgba(var(--igc),.18),0 0 18px rgba(var(--igc),.22);}
.sb-nav .mtab.ntab{--igc:var(--northe-rgb);}
.sb-nav .mtab.creative.on,.sb-nav .mtab.studio.on{box-shadow:0 0 18px rgba(139,92,246,.3);}
/* die Tab-Ignite-Animation der alten Kopfleiste wirkt vertikal zu grob */
.sb-nav .mtab.ignite{animation:none;}
.sb-nav .mtab.ignite::after,.sb-nav .mtab.ignite::before{display:none;}

.sb-foot{padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;}
.sb-back{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:rgba(244,243,248,.7);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.sb-back[hidden]{display:none;}
.sb-back svg{width:15px;height:15px;}
.sb-back:hover{color:#fff;border-color:rgba(var(--northe-rgb),.4);}
.sb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 0 10px;}
.sb-uname{font-size:12px;color:rgba(244,243,248,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-out{width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;color:rgba(244,243,248,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sb-out svg{width:15px;height:15px;}
.sb-out:hover{color:#fff;border-color:rgba(255,255,255,.14);}

/* ---------- Topbar mit Kunden-Reitern ---------- */
#topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:var(--tbh);padding:0 22px 0 16px;
  border-bottom:1px solid rgba(255,255,255,.07);background:rgba(1,1,3,.55);backdrop-filter:blur(16px);}
.tb-menu{display:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.tb-menu svg{width:18px;height:18px;}
.ctabs{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;}
.ctabs::-webkit-scrollbar{display:none;}
.ctab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:rgba(244,243,248,.6);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .18s;}
.ctab .cav{width:26px;height:26px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.ctab .cav img{width:100%;height:100%;object-fit:cover;display:block;}
.ctab .cav svg{width:14px;height:14px;}
.ctab:hover{color:#fff;border-color:rgba(255,255,255,.22);}
.ctab.on{color:#fff;border-color:rgba(var(--ct-rgb,var(--accent-rgb)),.55);background:rgba(var(--ct-rgb,var(--accent-rgb)),.12);box-shadow:0 0 0 1px rgba(var(--ct-rgb,var(--accent-rgb)),.2),0 0 16px rgba(var(--ct-rgb,var(--accent-rgb)),.28);}
/* NORTHE = übergeordnete Ebene, keine Kunden-Pille: Wortmarke, danach Trenner + Label „Kunden" */
.tb-home{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 4px;border:none;background:transparent;color:rgba(244,243,248,.55);font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.16em;cursor:pointer;border-radius:10px;flex-shrink:0;transition:color .18s;}
.tb-home .tb-mark{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(var(--northe-rgb),.12);border:1px solid rgba(var(--northe-rgb),.35);color:var(--northe);transition:box-shadow .2s,background .2s;}
.tb-home .tb-mark svg{width:17px;height:17px;}
.tb-home:hover{color:#fff;}
.tb-home.on{color:var(--northe);}
.tb-home.on .tb-mark{background:rgba(var(--northe-rgb),.2);box-shadow:0 0 0 1px rgba(var(--northe-rgb),.35),0 0 20px rgba(var(--northe-rgb),.45);}
.tb-sep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 8px 0 4px;flex-shrink:0;}
.tb-label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,243,248,.35);margin-right:6px;flex-shrink:0;}
.ctab.add{width:36px;padding:0;justify-content:center;font-size:18px;font-weight:400;color:rgba(244,243,248,.5);}
.ctab.add:hover{color:var(--northe);border-color:rgba(var(--northe-rgb),.5);}
.tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* Inhalt: nur die passende Ebene ist sichtbar */
.content.nlevel,.content.clevel{display:none;width:100%;}
body[data-level="northe"] .content.nlevel,body[data-level="client"] .content.clevel{display:block;}

/* ---------- NORTHE-Ebene ---------- */
.nhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 2px 22px;flex-wrap:wrap;}
.nhead h1{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0;color:#fff;}
.nhead p{margin:6px 0 0;font-size:13px;color:rgba(244,243,248,.5);}
.nbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;border:1px solid rgba(var(--northe-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--northe-rgb),.2),rgba(var(--northe-rgb),.08));color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 0 0 1px rgba(var(--northe-rgb),.15),0 0 20px rgba(var(--northe-rgb),.22);transition:all .16s;}
.nbtn:hover{box-shadow:0 0 0 1px rgba(var(--northe-rgb),.3),0 0 28px rgba(var(--northe-rgb),.4);}
.nbtn.ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);box-shadow:none;color:rgba(244,243,248,.75);}
.nbtn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.nbtn svg{width:15px;height:15px;}
.nbtn:disabled{opacity:.45;cursor:default;}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.ccard{padding:18px 18px 16px;cursor:pointer;transition:transform .16s,box-shadow .2s,border-color .16s;--ct-rgb:var(--northe-rgb);}
.ccard:hover{transform:translateY(-2px);border-color:rgba(var(--ct-rgb),.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(var(--ct-rgb),.18);}
.ccard .ctop{display:flex;align-items:center;gap:13px;}
.ccard .cav{width:48px;height:48px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff;
  box-shadow:0 0 0 1px rgba(var(--ct-rgb),.3),0 0 18px rgba(var(--ct-rgb),.25);}
.ccard .cav img{width:100%;height:100%;object-fit:cover;display:block;}
.ccard .cn{font-size:16px;font-weight:700;color:#fff;}
.ccard .cs{font-size:11px;color:rgba(244,243,248,.45);margin-top:3px;}
.ccard .cstats{display:flex;gap:18px;margin-top:16px;}
.ccard .cst b{display:block;font-size:22px;font-weight:800;line-height:1;}
.ccard .cst span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,248,.42);display:block;margin-top:5px;}
.ccard .cst.open b{color:var(--g-lime);text-shadow:0 0 16px rgba(var(--g-lime-rgb),.45);}
.ccard .cst.done b{color:var(--g-mint);text-shadow:0 0 16px rgba(var(--g-mint-rgb),.45);}
.ccard .cst.rev b{color:var(--northe);text-shadow:0 0 16px rgba(var(--northe-rgb),.45);}
.ccard .cdot{position:absolute;right:16px;top:16px;width:8px;height:8px;border-radius:50%;background:rgba(var(--ct-rgb),.9);box-shadow:0 0 10px rgba(var(--ct-rgb),.8);}
.ccard.new{border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:132px;color:rgba(244,243,248,.5);font-weight:600;gap:8px;}
.ccard.new:hover{color:var(--northe);border-color:rgba(var(--northe-rgb),.5);}
.ccard .cwarn{margin-top:12px;font-size:11px;color:var(--g-pale);opacity:.75;display:flex;gap:6px;align-items:center;}

.nstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px;}
.nstat .card{padding:16px 18px;}
.nstat .lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,248,.45);}
.nstat .v{font-size:28px;font-weight:800;margin-top:6px;color:#fff;line-height:1;}
.nstat .v.g{color:var(--northe);text-shadow:0 0 18px rgba(var(--northe-rgb),.5);}
.nstat .v.o{color:var(--g-lime);text-shadow:0 0 18px rgba(var(--g-lime-rgb),.5);}
.nstat .sub{font-size:11.5px;color:rgba(244,243,248,.45);margin-top:6px;}

/* Formulare der NORTHE-Ebene */
.nform{display:flex;flex-direction:column;gap:12px;}
.nform label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,248,.5);display:block;margin-bottom:6px;}
.nform .kin,.nform select.kin{width:100%;height:42px;}
.nform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.nform .hint{font-size:11.5px;color:rgba(244,243,248,.45);line-height:1.5;}
.nform .ok{color:var(--g-mint);} .nform .warn{color:var(--g-lime);} .nform .err{color:#F0726A;}
.nsec{margin-bottom:22px;}
.nsec>.card{padding:20px 22px;}
.nsec h2{font-size:15px;font-weight:700;margin:0 0 4px;color:#fff;display:flex;align-items:center;gap:8px;}
.nsec h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--northe);box-shadow:0 0 10px rgba(var(--northe-rgb),.8);}
.nsec .sub{font-size:12px;color:rgba(244,243,248,.45);margin-bottom:14px;}
.nsec .status{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(244,243,248,.6);}
.nsec .status.on{color:var(--green);border-color:rgba(61,224,138,.4);background:rgba(61,224,138,.08);}
.nsec .status.off{color:var(--g-pale);opacity:.7;border-color:rgba(var(--g-moss-rgb),.5);background:rgba(var(--g-moss-rgb),.1);}

/* Wizard / Sheet (Modal) */
.sheet{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:26px 26px 22px;}
.wiz-steps{display:flex;gap:6px;margin-bottom:20px;}
.wiz-steps span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);}
.wiz-steps span.on{background:var(--northe);box-shadow:0 0 10px rgba(var(--northe-rgb),.7);}
.wiz h2{font-size:20px;font-weight:800;margin:0 0 4px;color:#fff;}
.wiz .sub{font-size:13px;color:rgba(244,243,248,.5);margin-bottom:18px;}
.wiz-foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px;}
.drop{border:1.5px dashed rgba(255,255,255,.18);border-radius:16px;padding:26px;text-align:center;color:rgba(244,243,248,.55);cursor:pointer;transition:all .16s;background:rgba(255,255,255,.02);}
.drop:hover,.drop.over{border-color:rgba(var(--northe-rgb),.6);color:#fff;background:rgba(var(--northe-rgb),.05);}
.drop input{display:none;}
.logoprev{display:flex;align-items:center;gap:18px;margin-top:14px;}
.logoprev .lp{width:88px;height:88px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logoprev .lp img{width:100%;height:100%;object-fit:cover;}
.pal{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pal i{width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.14);display:block;box-shadow:0 0 12px rgba(0,0,0,.4);}
.pal i.main{outline:2px solid #fff;outline-offset:2px;}
.pal .pl{font-size:11px;color:rgba(244,243,248,.5);width:100%;}
.srctabs{display:flex;gap:6px;margin:0 0 10px;}
.srct{height:34px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(244,243,248,.6);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.srct.on{color:#fff;border-color:rgba(var(--northe-rgb),.5);background:rgba(var(--northe-rgb),.1);box-shadow:0 0 14px rgba(var(--northe-rgb),.2);}
.chatlist{max-height:340px;overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(0,0,0,.25);margin-top:10px;}
.chatrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;font-size:13.5px;}
.chatrow:last-child{border-bottom:none;}
.chatrow:hover{background:rgba(255,255,255,.03);}
.chatrow input{width:17px;height:17px;accent-color:var(--northe);}
.chatrow .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;}
.chatrow .ck{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,248,.4);}
.chatrow .cc{font-size:10px;color:var(--northe);}
.chatsel{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.chatsel span{font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid rgba(var(--northe-rgb),.4);background:rgba(var(--northe-rgb),.08);color:#fff;display:inline-flex;gap:6px;align-items:center;}
.chatsel span b{cursor:pointer;color:rgba(244,243,248,.5);font-weight:400;}
.chatsel span b:hover{color:#fff;}

/* Kunden-Bereich innerhalb der Settings eines Kunden */
#clientSettings .card{padding:20px 22px;}
.csec{margin-bottom:22px;}
.csec-h{display:flex;align-items:baseline;gap:10px;margin:0 4px 10px;flex-wrap:wrap;}
.csec-h h2{font-size:15px;font-weight:700;margin:0;color:#fff;}
.csec-h .dot{width:8px;height:8px;border-radius:50%;align-self:center;}
.csec-sub{font-size:12px;color:rgba(244,243,248,.45);}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.srctile{display:flex;flex-direction:column;gap:12px;}
.srctile .srct-h{display:flex;align-items:center;gap:12px;}
.srctile .srct-h b{display:block;font-size:15px;color:#fff;}
.srctile .srct-h small{display:block;font-size:11.5px;color:rgba(244,243,248,.5);margin-top:2px;}
.srctile .srct-h .status{margin-left:auto;}
.srclogo{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;}
.srclogo svg{width:24px;height:24px;}
.srctile.wa .srclogo{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4);color:#25D366;box-shadow:0 0 18px rgba(37,211,102,.2);}
.srctile.tg .srclogo{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.4);color:var(--accent);box-shadow:0 0 18px rgba(var(--accent-rgb),.2);}
.srctile.od .srclogo{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;}
.srclogo.inl{width:30px;height:30px;border-radius:9px;display:inline-flex;vertical-align:middle;margin-right:4px;}
.srclogo.inl svg{width:17px;height:17px;}
.srctile .chatsel{min-height:30px;}
.srctile .chatsel span{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.08);}
.srctile.wa .chatsel span{border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.08);}
.chatsel span.none{opacity:.5;border-color:transparent;background:none;}
.srctile .nbtn{align-self:flex-start;border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));box-shadow:0 0 0 1px rgba(var(--accent-rgb),.15),0 0 20px rgba(var(--accent-rgb),.2);}
.srctile.wa .nbtn{border-color:rgba(37,211,102,.5);background:linear-gradient(180deg,rgba(37,211,102,.2),rgba(37,211,102,.07));box-shadow:0 0 0 1px rgba(37,211,102,.15),0 0 20px rgba(37,211,102,.2);}
.srctile .status.on{color:var(--green);border-color:rgba(61,224,138,.4);background:rgba(61,224,138,.08);}
.srctile .status{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(244,243,248,.6);}
.srctile .status.off{color:rgba(244,243,248,.5);}
/* Kunden-Settings nutzen die Kundenfarbe für Buttons/Chips (im Kunden gilt dessen Theme) */
#clientSettings .nbtn:not(.ghost){border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));box-shadow:0 0 0 1px rgba(var(--accent-rgb),.15),0 0 20px rgba(var(--accent-rgb),.2);}
#clientSettings .drop:hover{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.05);}
#clientSettings .chatrow input{accent-color:var(--accent);}

/* ---------- Live-Terminal ---------- */
.term{display:flex;flex-direction:column;height:calc(100vh - var(--tbh) - 150px);min-height:420px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(var(--northe-rgb),.25);background:linear-gradient(180deg,rgba(6,8,6,.92),rgba(1,2,1,.96));box-shadow:0 0 0 1px rgba(var(--northe-rgb),.08),0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);flex-wrap:wrap;}
.term-bar .dots{display:flex;gap:6px;margin-right:6px;}
.term-bar .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);}
.term-bar .dots i:nth-child(1){background:rgba(var(--g-deep-rgb),.9);} .term-bar .dots i:nth-child(2){background:var(--g-mint);} .term-bar .dots i:nth-child(3){background:var(--northe);box-shadow:0 0 8px rgba(var(--northe-rgb),.8);}
.term-bar .ttl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:rgba(244,243,248,.6);letter-spacing:.04em;margin-right:auto;}
.term-bar .ttl b{color:var(--northe);}
.tf{height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(244,243,248,.55);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer;}
.tf.on{color:#fff;border-color:rgba(var(--tf-rgb,var(--northe-rgb)),.6);background:rgba(var(--tf-rgb,var(--northe-rgb)),.12);box-shadow:0 0 12px rgba(var(--tf-rgb,var(--northe-rgb)),.25);}
.term-body{flex:1;overflow:auto;padding:12px 0 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;scroll-behavior:smooth;}
.tl{display:grid;grid-template-columns:78px 70px 92px 1fr;gap:12px;padding:3px 16px;color:rgba(244,243,248,.82);align-items:baseline;animation:tlin .25s ease;}
@keyframes tlin{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.tl:hover{background:rgba(255,255,255,.03);}
.tl .t{color:rgba(244,243,248,.35);font-variant-numeric:tabular-nums;}
.tl .k{font-weight:800;letter-spacing:.06em;font-size:10.5px;text-transform:uppercase;color:rgb(var(--k-rgb));text-shadow:0 0 10px rgba(var(--k-rgb),.6);}
.tl .c{color:rgba(244,243,248,.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.tl .m{word-break:break-word;}
.tl .m small{color:rgba(244,243,248,.4);margin-left:8px;}
.tl.warn .m{color:var(--g-lime);} .tl.error .m{color:#F0726A;}
.tl[data-k="bridge"]{--k-rgb:var(--g-mint-rgb);} .tl[data-k="scan"]{--k-rgb:var(--northe-rgb);} .tl[data-k="voice"]{--k-rgb:var(--g-pale-rgb);} .tl[data-k="ai"]{--k-rgb:var(--g-lime-rgb);}
.tl[data-k="task"]{--k-rgb:var(--g-mint-rgb);} .tl[data-k="telegram"]{--k-rgb:var(--g-deep-rgb);} .tl[data-k="media"]{--k-rgb:var(--g-moss-rgb);} .tl[data-k="auth"]{--k-rgb:var(--g-pale-rgb);}
.tl[data-k="system"]{--k-rgb:199,197,210;} .tl[data-k="http"]{--k-rgb:120,130,120;} .tl[data-k="brain"]{--k-rgb:var(--northe-rgb);}
.term-foot{display:flex;align-items:center;gap:14px;padding:8px 16px;border-top:1px solid rgba(255,255,255,.07);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:rgba(244,243,248,.45);}
.term-foot .cur{display:inline-block;width:8px;height:14px;background:var(--northe);box-shadow:0 0 10px rgba(var(--northe-rgb),.9);animation:blink 1s steps(2) infinite;vertical-align:middle;}
@keyframes blink{to{opacity:0;}}
.term-foot .live{color:var(--northe);} .term-foot .paused{color:var(--g-lime);}
.tstats{display:flex;gap:14px;margin-left:auto;}
.tstats b{color:#fff;}
@media (max-width:900px){.tl{grid-template-columns:62px 1fr;grid-template-areas:"t m" "k c";}.tl .t{grid-area:t;}.tl .m{grid-area:m;}.tl .k{grid-area:k;}.tl .c{grid-area:c;}.term{height:calc(100vh - var(--tbh) - var(--mbh) - 120px);}}

/* ---------- Mobil ---------- */
#mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:12;display:none;height:calc(var(--mbh) + var(--safe-b));padding:6px 6px var(--safe-b);
  background:rgba(1,1,3,.86);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.09);}
#mobilebar[hidden]{display:none;}
.mb-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:transparent;color:rgba(244,243,248,.5);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.02em;border-radius:12px;padding:6px 2px;cursor:pointer;}
.mb-btn svg{width:21px;height:21px;}
.mb-btn.on{color:#fff;}
.mb-btn.on svg{filter:drop-shadow(0 0 8px rgba(var(--igc,var(--accent-rgb)),.9));color:rgb(var(--igc,var(--accent-rgb)));}
.mb-btn.ntab{--igc:var(--northe-rgb);}

@media (max-width:900px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-104%);transition:transform .22s ease;box-shadow:0 0 60px rgba(0,0,0,.7);background:rgba(4,4,8,.97);width:min(300px,84vw);padding-top:calc(22px + var(--safe-t));}
  body.sb-open #sidebar{transform:none;}
  #sbBackdrop{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.55);display:none;}
  body.sb-open #sbBackdrop{display:block;}
  .tb-menu{display:flex;}
  #topbar{height:calc(var(--tbh) + var(--safe-t));padding-top:var(--safe-t);padding-left:12px;padding-right:12px;}
  #mobilebar{display:flex;}
  .content{padding-bottom:calc(var(--mbh) + var(--safe-b) + 28px) !important;}
  .tb-right .langsel{display:none;}
  .sheet{width:calc(100vw - 16px);max-height:calc(100vh - 16px);padding:20px 16px 18px;border-radius:18px;}
  .nform .row{grid-template-columns:1fr;}
  .nhead h1{font-size:22px;}
  .cgrid{grid-template-columns:1fr 1fr;}
  .ccard{padding:14px;}
  .ccard .cav{width:40px;height:40px;border-radius:12px;font-size:14px;}
  .ccard .cn{font-size:14px;}
  .ccard .cstats{gap:14px;margin-top:12px;}
  .ccard .cst b{font-size:18px;}
  /* Klick-Ziele */
  .mtab{min-height:44px;}
  .kbtn,.nbtn,.addbtn{min-height:44px;}
}
@media (max-width:560px){
  .cgrid{grid-template-columns:1fr;}
}