:root{
  --text:#1d2738;--dim:#5a6b82;--faint:#8b99ad;--line:#dbe4f0;
  --acc:#3b6ef6;--acc2:#6b8afd;--ok:#12a673;--warn:#d98a1a;--danger:#e0556a;--violet:#7c5cff;
  --glass:rgba(255,255,255,.58);--glass2:rgba(255,255,255,.40);--brd:rgba(255,255,255,.70);
  --blur:saturate(1.4) blur(20px);--shadow:0 10px 34px rgba(38,66,120,.13);
  --bin:rgba(255,255,255,.80);--bout:rgba(59,110,246,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--r:16px;--r2:11px;--r3:9px;
}
[data-style="klar"]{--glass:#fff;--glass2:#f6f9fd;--brd:#e4ebf5;--blur:none;--shadow:0 1px 0 rgba(20,40,80,.05);--bin:#f3f7fc;--bout:#e8f0ff;}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 620px at 86% -6%,rgba(110,160,255,.30),transparent 60%),radial-gradient(1000px 640px at -6% 106%,rgba(180,140,255,.24),transparent 60%),radial-gradient(820px 520px at 50% 60%,rgba(120,225,205,.16),transparent 60%),#e9eff7;background-attachment:fixed;}
[data-style="klar"] body{background:#eef3fa}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font);font-size:13.5px;color:var(--text)}
::selection{background:rgba(59,110,246,.2)}
.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{border:1px solid var(--brd);background:var(--glass2);color:var(--text);padding:9px 14px;border-radius:10px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--acc);color:var(--acc)} .btn svg{width:15px;height:15px}
.btn.pri{background:linear-gradient(135deg,var(--acc),var(--violet));border-color:transparent;color:#fff} .btn.pri:hover{filter:brightness(1.05);color:#fff}
.btn.ok{background:linear-gradient(135deg,var(--ok),#0b8e63);border-color:transparent;color:#fff}.btn.ok:hover{color:#fff;filter:brightness(1.05)}
.btn.no{background:transparent;color:var(--danger);border-color:rgba(224,85,106,.45)}.btn.no:hover{background:rgba(224,85,106,.1);color:var(--danger)}
.btn.sm{padding:6px 10px;font-size:12px}
.in{width:100%;background:var(--glass2);border:1px solid var(--brd);border-radius:10px;padding:11px 13px;outline:none}
.in:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,110,246,.14)}
label.fl{display:block;font-size:11.5px;color:var(--dim);margin:0 0 5px;font-weight:600}
.field{margin-bottom:13px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.lcard{width:400px;max-width:100%;padding:30px}
.llogo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--acc),var(--violet));margin:0 auto 16px}
.login h1{font-size:21px;text-align:center;margin:0 0 4px}.login .sub{text-align:center;color:var(--dim);font-size:13px;margin:0 0 22px}
.oauth{display:flex;gap:9px}.oauth .btn{flex:1;justify-content:center}
.divider{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--brd)}
.gG{width:16px;height:16px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);display:inline-block}
.ms{display:inline-grid;grid-template-columns:7px 7px;gap:2px}.ms i{width:7px;height:7px;display:block}
.note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:16px}
.lerr{background:rgba(224,85,106,.12);border:1px solid rgba(224,85,106,.4);color:#a23044;border-radius:10px;padding:10px;font-size:12.5px;margin-bottom:12px;display:none}
.lerr.on{display:block}

/* shell */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.nav{padding:14px 12px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--brd);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.nbrand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
.nbrand .sig{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--acc),var(--violet))}
.nbrand b{font-size:15px}.nbrand span{font-size:10.5px;color:var(--dim);display:block}
.nitem{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--dim);font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none}
.nitem:hover{background:var(--glass2);color:var(--text)} .nitem.on{background:rgba(59,110,246,.12);color:var(--acc)}
.nitem svg{width:18px;height:18px}.nitem .nb{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--glass2);border:1px solid var(--brd);border-radius:20px;padding:1px 7px}
.nitem.on .nb{background:rgba(59,110,246,.16);border-color:transparent;color:var(--acc)}
.nspace{flex:1}
.nuser{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;border:1px solid var(--brd);background:var(--glass2)}
.nuser .av{width:30px;height:30px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--brd);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.top h2{margin:0;font-size:16px} .top .spacer{flex:1}
.tsearch{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--glass2);border:1px solid var(--brd);border-radius:11px;padding:0 12px}
.tsearch svg{width:15px;height:15px;color:var(--faint)}.tsearch input{flex:1;border:0;background:transparent;outline:none;padding:9px 0}
.seg{display:inline-flex;gap:3px;background:var(--glass2);border:1px solid var(--brd);border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;color:var(--dim);padding:6px 11px;border-radius:8px;font-weight:600;font-size:12.5px}
.seg button.on{background:#fff;color:var(--acc)}[data-style="klar"] .seg button.on{border:1px solid var(--line)}
.body{padding:16px;min-height:0}
.av{border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:0 0 auto}

/* inbox */
.inbox{display:grid;grid-template-columns:230px minmax(0,1fr) 312px;gap:14px;align-items:start}
@media(max-width:1180px){.inbox{grid-template-columns:220px minmax(0,1fr)}.ctxcol{display:none}}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.bk{padding:0}.bh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}.bh h3{margin:0;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);font-weight:700}.bh .mini{font-size:11px;color:var(--faint)}
.chan{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;margin:1px 8px;cursor:pointer}.chan:hover{background:var(--glass2)}
.cbx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;flex:0 0 auto}.chan.on .cbx{background:var(--acc);border-color:var(--acc)}.chan:not(.on) .cbx svg{display:none}.cbx svg{width:11px;height:11px}
.cico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--brd)}.cico svg{width:15px;height:15px;color:var(--dim)}.chan.on .cico svg{color:var(--acc)}
.chan .nm{flex:1;min-width:0}.chan .nm b{font-size:12.5px;display:block}.chan .nm span{font-size:10.5px;color:var(--faint)}
.bdg{font-family:var(--mono);font-size:10.5px;min-width:19px;height:18px;padding:0 6px;border-radius:20px;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--brd);color:var(--dim)}
.snd{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:10px;margin:1px 8px;cursor:pointer}.snd:hover{background:var(--glass2)}.snd.on{background:rgba(59,110,246,.12)}
.snd .sn{flex:1;min-width:0}.snd .sn b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snd .sn span{font-size:10px;color:var(--faint)}
.unread{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.chatwrap{display:flex;flex-direction:column;min-height:560px;max-height:calc(100vh - 150px)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px;border-bottom:1px solid var(--brd)}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--glass2);border:1px solid var(--brd);border-radius:20px;padding:4px 10px;color:var(--dim)}.fchip b{color:var(--text)}.fchip .x{cursor:pointer;width:15px;height:15px;display:grid;place-items:center;color:var(--faint)}.fchip .x:hover{color:var(--danger)}.fchip.reset{cursor:pointer;border-style:dashed}
.stream{flex:1;overflow:auto;padding:15px;display:flex;flex-direction:column;gap:13px}
.daysep{align-self:center;font-size:11px;color:var(--faint);background:var(--glass2);border:1px solid var(--brd);padding:3px 11px;border-radius:20px}
.msg{display:flex;gap:10px;max-width:84%}.msg.out{align-self:flex-end;flex-direction:row-reverse}
.msg .mav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;flex:0 0 auto;align-self:flex-start}.msg.out .mav{background:linear-gradient(135deg,var(--acc),var(--violet))}
.bubble{background:var(--bin);border:1px solid var(--brd);border-radius:16px 16px 16px 5px;padding:10px 13px}.bubble[data-open]{cursor:pointer}.bubble[data-open]:hover{border-color:rgba(59,110,246,.4)}
.msg.out .bubble{background:var(--bout);border-radius:16px 16px 5px 16px}
.mtop{display:flex;align-items:center;gap:8px;margin-bottom:3px}.mname{font-weight:700;font-size:12.5px;cursor:pointer}.mname:hover{color:var(--acc)}
.mch{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--faint)}.mch svg{width:11px;height:11px}.mtime{font-size:10.5px;color:var(--faint);margin-left:auto}
.mtext{font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.atag{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:10.5px;padding:2px 8px;border-radius:7px;border:1px dashed var(--brd);color:var(--dim);background:var(--glass2)}.tag.an{border-style:solid;border-color:rgba(124,92,255,.4);color:var(--violet);background:rgba(124,92,255,.08)}
.draft{align-self:flex-end;max-width:84%;background:var(--bout);border:1px dashed var(--acc);border-radius:16px;padding:11px 13px}
.draft .dl{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--acc);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}.draft .dt{font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.draft textarea.dtedit{display:block;width:100%;font-family:var(--font);font-size:12.5px;line-height:1.5;color:var(--text);background:rgba(255,255,255,.65);border:1px solid var(--brd);border-radius:9px;padding:8px 10px;min-height:84px;resize:vertical;outline:none;white-space:pre-wrap}.draft textarea.dtedit:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,110,246,.14)}
.draft .gt{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}.gnote{font-size:11px;color:var(--dim);flex:1;min-width:110px}
.composer{display:flex;gap:9px;align-items:center;padding:11px 13px;border-top:1px solid var(--brd)}.composer input{flex:1;background:var(--glass2);border:1px solid var(--brd);border-radius:12px;padding:12px 14px;outline:none;font-size:14px}.composer input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,110,246,.14)}
.send{width:44px;height:44px;border:0;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--acc),var(--violet))}.send svg{width:18px;height:18px}
/* scholars + feed + ctx */
.scholar{display:flex;align-items:center;gap:10px;padding:8px 10px}.sg{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:0 0 auto}.sg.s1{background:rgba(59,110,246,.12);color:var(--acc)}.sg.s2{background:rgba(217,138,26,.14);color:var(--warn)}.sg.s3{background:rgba(124,92,255,.13);color:var(--violet)}.scholar .si{flex:1}.scholar .si b{font-size:12.5px;display:block}.scholar .si span{font-size:10.5px;color:var(--faint)}.sdot{width:8px;height:8px;border-radius:50%;background:var(--faint)}.scholar.busy .sdot{background:var(--acc);animation:pulse 1.1s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.feed{max-height:188px;overflow:auto;padding:2px 14px 12px}.fitem{display:flex;gap:9px;padding:7px 0;font-size:12px;border-top:1px solid var(--brd);animation:sl .3s}.fitem:first-child{border-top:0}@keyframes sl{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.fitem .ft{font-family:var(--mono);font-size:10px;color:var(--faint);width:44px;flex:0 0 auto}.fdot{width:7px;height:7px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:var(--dim)}.fitem.t-kat .fdot{background:var(--warn)}.fitem.t-kom .fdot{background:var(--violet)}.fitem.t-ok .fdot{background:var(--ok)}.fitem.t-warn .fdot{background:var(--warn)}.fitem.t-in .fdot{background:var(--acc)}.fitem .fb{flex:1;color:var(--dim)}.fitem .fb b{color:var(--text)}
.ctx{padding:14px}.ctx .from{display:flex;align-items:center;gap:10px;margin-bottom:12px}.ctx .from b{font-size:13.5px}.ctx .from span{font-size:11px;color:var(--faint)}
.kbox{background:var(--glass2);border:1px solid var(--brd);border-radius:11px;padding:11px;margin-bottom:9px}.kbox .kt{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:6px}.kbox.k1 .kt{color:var(--acc)}.kbox.k2 .kt{color:var(--warn)}.kbox.k3 .kt{color:var(--violet)}.kbox p{margin:3px 0;font-size:12.5px;color:var(--dim)}.kbox b{color:var(--text)}
.bar{height:6px;border-radius:6px;background:var(--glass2);border:1px solid var(--brd);overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--violet))}
.donebox{display:flex;align-items:center;gap:9px;background:rgba(18,166,115,.1);border:1px solid rgba(18,166,115,.4);color:var(--ok);border-radius:10px;padding:11px;font-size:12.5px;font-weight:600}
.rejbox{display:flex;align-items:center;gap:9px;background:rgba(224,85,106,.08);border:1px solid rgba(224,85,106,.35);color:var(--danger);border-radius:10px;padding:11px;font-size:12.5px;font-weight:600}
.hint{color:var(--faint);font-size:12.5px;text-align:center;padding:22px 14px;line-height:1.6}
.foot{padding:9px 14px;border-top:1px solid var(--brd);font-size:10.5px;color:var(--faint);font-family:var(--mono)}

/* tables / cards */
.card{padding:16px}.card h3{margin:0 0 12px;font-size:15px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--brd)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--brd)}.tbl tr{cursor:pointer}.tbl tbody tr:hover{background:var(--glass2)}
.pill{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;display:inline-block}
.p-freigabe{background:rgba(217,138,26,.14);color:var(--warn)}.p-erledigt{background:rgba(18,166,115,.13);color:var(--ok)}.p-offen{background:rgba(59,110,246,.12);color:var(--acc)}.p-abgelehnt{background:rgba(224,85,106,.12);color:var(--danger)}
.prio-hoch{color:var(--danger);font-weight:700}.prio-mittel{color:var(--warn)}.prio-niedrig{color:var(--dim)}
.grid{display:grid;gap:12px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
.kpi{background:var(--glass2);border:1px solid var(--brd);border-radius:12px;padding:13px}.kpi .n{font-size:22px;font-weight:800;font-family:var(--mono)}.kpi .l{font-size:11px;color:var(--dim);margin-top:3px}
.ccard{padding:14px;display:flex;gap:12px;align-items:flex-start;cursor:pointer}.ccard:hover{border-color:var(--acc)}.ccard .av{width:42px;height:42px;font-size:15px}
.doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--brd)}.doc:hover{background:var(--glass2)}.doc .di{width:34px;height:34px;border-radius:9px;background:var(--glass2);border:1px solid var(--brd);display:grid;place-items:center;color:var(--acc)}.doc .di svg{width:17px;height:17px}

/* settings */
.settings{display:grid;grid-template-columns:212px 1fr;gap:14px;align-items:start}@media(max-width:900px){.settings{grid-template-columns:1fr}}
.stab{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--dim);font-weight:600;font-size:13px;cursor:pointer}.stab:hover{background:var(--glass2);color:var(--text)}.stab.on{background:rgba(59,110,246,.12);color:var(--acc)}.stab svg{width:16px;height:16px}
.chrow{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--brd);border-radius:12px;margin-bottom:10px;background:var(--glass2)}
.chrow .cico{width:36px;height:36px}.chrow .ci{flex:1}.chrow .ci b{font-size:13.5px;display:block}.chrow .ci span{font-size:11.5px;color:var(--faint)}
.dot2{width:9px;height:9px;border-radius:50%}.dot2.on{background:var(--ok)}.dot2.off{background:var(--faint)}
.toggle{width:42px;height:24px;border-radius:20px;background:var(--line);border:0;position:relative;transition:.15s;flex:0 0 auto}.toggle.on{background:var(--acc)}.toggle i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}.toggle.on i{left:21px}
.sigprev{border:1px solid var(--brd);border-radius:12px;padding:16px;background:#fff}
.mailprev{border:1px solid var(--brd);border-radius:12px;overflow:hidden;background:#fff}.mailprev .mh{padding:14px 16px;color:#fff}.mailprev .mb{padding:16px;font-size:13px;color:#243}
.snippet{width:100%;font-family:var(--mono);font-size:12px;background:#0e1626;color:#cfe;border:0;border-radius:10px;padding:12px;min-height:78px;resize:vertical}
.ruletbl .pill{cursor:default}
.sub{font-size:12px;color:var(--dim)}
.divh{height:1px;background:var(--brd);margin:16px 0}

/* modal + toast */
.overlay{position:fixed;inset:0;background:rgba(20,35,65,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:60;padding:20px;animation:fade .2s}@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:480px;max-width:100%;max-height:88vh;overflow:auto;padding:20px}
.modal h3{margin:0 0 4px;font-size:17px}.modal .ms{margin-bottom:14px}
.mtabs{display:flex;gap:4px;background:var(--glass2);border:1px solid var(--brd);border-radius:11px;padding:3px;margin-bottom:14px}.mtabs button{flex:1;border:0;background:transparent;color:var(--dim);padding:8px;border-radius:8px;font-weight:600;font-size:12.5px}.mtabs button.on{background:#fff;color:var(--acc)}
.qr{width:150px;height:150px;margin:6px auto;border-radius:10px;background:
  linear-gradient(90deg,#0e1626 50%,transparent 0),linear-gradient(#0e1626 50%,transparent 0);background-size:13px 13px;border:6px solid #fff;box-shadow:0 0 0 1px var(--brd)}
.warn{background:rgba(217,138,26,.12);border:1px solid rgba(217,138,26,.4);color:#7a5510;border-radius:10px;padding:11px;font-size:12.5px;margin-top:10px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#11203a;color:#eaf1ff;padding:11px 16px;border-radius:11px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:80;animation:tin .25s;display:flex;align-items:center;gap:8px}@keyframes tin{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}