/* webmail — Design im searchwiki-Look. Dunkel, cleanes Hacker-Grün. */
:root{
  --bg:#0a0d0a; --bg-2:#0c110b; --panel:#111710; --panel-2:#151d13;
  --line:#1e281a; --line-2:#2b3a24;
  --ink:#e9f1e4; --mute:#8fa085; --dim:#5f705a;
  --acc:#a2dc02; --acc-2:#c2ff3a; --acc-glow:rgba(162,220,2,.16);
  --red:#ff8a8a; --red-glow:rgba(255,107,107,.10); --red-line:rgba(255,107,107,.4);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:13px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-size:15px}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc-2)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15}
::selection{background:var(--acc);color:#081007}
button{font-family:inherit}

/* ── Grundgerüst: Sidebar + Hauptbereich ── */
.shell{display:flex;min-height:100vh}
.side{width:250px;background:var(--bg-2);border-right:1px solid var(--line);padding:20px 14px;
  flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.side .brand{font-family:var(--display);font-weight:700;font-size:20px;margin:2px 8px 4px}
.side .brand b{color:var(--acc)}
.side .sig{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 8px 16px}
.compose-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);border:1px solid var(--acc);
  color:#081007;border-radius:10px;padding:11px 14px;font-weight:700;font-size:14.5px;margin-bottom:14px}
.compose-btn:hover{background:var(--acc-2);color:#081007}
.folders{display:flex;flex-direction:column;gap:2px}
.folders a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--mute);font-size:14px}
.folders a .ic{width:18px;text-align:center;filter:grayscale(.3) opacity(.9)}
.folders a .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folders a .ct{font-family:var(--mono);font-size:11px;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:1px 8px;min-width:24px;text-align:center}
.folders a:hover{background:var(--panel);color:var(--ink)}
.folders a.on{background:var(--acc-glow);color:var(--acc-2);border-left:2px solid var(--acc)}
.folders a.on .ct{color:var(--acc);border-color:rgba(162,220,2,.4);background:var(--acc-glow)}
.side .sep{flex:1}
.side .acct{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.side .acct .me{font-family:var(--mono);font-size:12px;color:var(--mute);word-break:break-all;margin:0 8px 8px}
.side .acct .quota{margin:0 8px 10px}
.side .acct .quota .bar{height:6px;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.side .acct .quota .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.side .acct .quota .txt{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:5px}
.side .acct a.logout{display:block;color:var(--red);font-size:13px;padding:6px 8px}
.side .acct a.logout:hover{color:#ffb4b4}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{padding:16px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;
  background:radial-gradient(600px 200px at 0% -60px,var(--acc-glow),transparent 70%)}
.topbar h1{font-size:20px;flex-shrink:0}
.topbar .spacer{flex:1}
.searchform{display:flex;gap:8px;align-items:center}
.searchform input{background:var(--panel);border:1px solid var(--line-2);color:var(--ink);border-radius:9px;
  padding:8px 13px;font:inherit;font-size:13.5px;width:230px}
.searchform input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.content{padding:0;flex:1}

/* Meldungen */
.note{border-radius:9px;padding:12px 16px;font-size:14px;border:1px solid;margin:16px 26px}
.note.ok{border-color:rgba(162,220,2,.4);background:var(--acc-glow);color:#d6f59a}
.note.error{border-color:var(--red-line);background:var(--red-glow);color:#ffb4b4}

/* ── Nachrichtenliste ── */
.msglist{display:flex;flex-direction:column}
.msgrow{display:flex;align-items:center;gap:14px;padding:13px 26px;border-bottom:1px solid var(--line);
  color:var(--ink);position:relative;transition:background .12s}
.msgrow:hover{background:var(--panel)}
.msgrow.unseen{background:linear-gradient(90deg,var(--acc-glow),transparent 40%)}
.msgrow.unseen::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--acc)}
.msgrow .who{width:200px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mute)}
.msgrow.unseen .who{color:var(--ink);font-weight:600}
.msgrow .subj{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgrow.unseen .subj{font-weight:600}
.msgrow .subj .att{color:var(--dim);margin-left:6px}
.msgrow .meta{flex-shrink:0;display:flex;align-items:center;gap:12px}
.msgrow .sz{font-family:var(--mono);font-size:11px;color:var(--dim);width:64px;text-align:right}
.msgrow .dt{font-family:var(--mono);font-size:12px;color:var(--mute);width:88px;text-align:right}
.empty{padding:60px 26px;text-align:center;color:var(--mute);font-family:var(--mono);font-size:13px}
.empty .big{font-size:30px;display:block;margin-bottom:12px;opacity:.5}

/* Seitennavigation */
.pager{display:flex;justify-content:center;align-items:center;gap:14px;padding:20px;font-family:var(--mono);font-size:13px;color:var(--mute)}
.pager a{border:1px solid var(--line-2);background:var(--panel);border-radius:8px;padding:6px 14px;color:var(--ink)}
.pager a:hover{border-color:var(--acc)}
.pager .disabled{opacity:.35;pointer-events:none}

/* ── Einzelne Nachricht ── */
.msgview{padding:22px 26px;max-width:920px}
.msgview .back{font-family:var(--mono);font-size:12.5px;color:var(--mute);display:inline-block;margin-bottom:16px}
.msgview .back:hover{color:var(--acc)}
.msghead{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px}
.msghead h2{font-size:21px;margin-bottom:14px;word-break:break-word}
.msghead .line{display:flex;gap:10px;font-size:13.5px;margin:5px 0;flex-wrap:wrap}
.msghead .line .k{color:var(--dim);font-family:var(--mono);font-size:12px;width:56px;flex-shrink:0}
.msghead .line .v{color:var(--ink);word-break:break-word}
.msghead .line .v .em{color:var(--mute)}
.msghead .date{font-family:var(--mono);font-size:12px;color:var(--mute)}
.msgactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.attbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.attchip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 13px;font-size:13px;color:var(--ink)}
.attchip:hover{border-color:var(--acc)}
.attchip .fn{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attchip .fs{font-family:var(--mono);font-size:11px;color:var(--dim)}

.msgbody{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:4px}
.msgbody iframe{width:100%;border:0;border-radius:10px;background:#fff;min-height:200px;display:block}
.msgbody .plain{padding:20px 22px;white-space:pre-wrap;word-break:break-word;font-size:14.5px;color:#d3e0cc;line-height:1.6}
.msgbody .plain a{color:var(--acc)}
.imgnote{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 14px;margin:4px;
  font-size:12.5px;color:var(--mute);display:flex;align-items:center;justify-content:space-between;gap:12px}
.imgnote a{font-weight:600}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;border-radius:9px;
  padding:9px 15px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--acc);color:var(--ink)}
.btn-primary{background:var(--acc);border-color:var(--acc);color:#081007}
.btn-primary:hover{background:var(--acc-2);color:#081007}
.btn-danger{color:var(--red);border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-glow);border-color:var(--red)}
.btn-sm{padding:7px 12px;font-size:12.5px}

/* ── Verfassen ── */
.compose{padding:22px 26px;max-width:820px}
.compose h1{font-size:22px;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--mute);margin-bottom:6px;font-family:var(--mono);letter-spacing:.04em}
.field .input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
  border-radius:9px;padding:11px 14px;font:inherit;font-size:14.5px}
.field .input:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.field textarea{resize:vertical;min-height:280px;font-family:var(--sans);line-height:1.6}
.field .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compose .actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.compose .actions .spacer{flex:1}
.filehint{font-size:12px;color:var(--dim);font-family:var(--mono)}
.togglecc{background:none;border:0;color:var(--acc);font-size:12.5px;cursor:pointer;padding:0;margin-bottom:14px;font-family:var(--mono)}
.togglecc:hover{color:var(--acc-2)}

/* ── Login ── */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background-image:radial-gradient(560px 280px at 50% 0%,var(--acc-glow),transparent 70%)}
.loginwrap .box{width:100%;max-width:370px}
.loginwrap .brand{font-family:var(--display);font-weight:700;font-size:26px;text-align:center;margin-bottom:5px}
.loginwrap .brand b{color:var(--acc)}
.loginwrap .sig{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-align:center;margin-bottom:26px}
.loginwrap .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.loginwrap .label{display:block;font-size:13px;color:var(--mute);margin:14px 0 6px}
.loginwrap .label:first-child{margin-top:0}
.loginwrap .input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:9px;padding:12px 14px;font:inherit;font-size:15px}
.loginwrap .input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.loginwrap .go{width:100%;margin-top:20px;background:var(--acc);border:1px solid var(--acc);color:#081007;
  border-radius:9px;padding:13px;font:inherit;font-weight:700;cursor:pointer}
.loginwrap .go:hover{background:var(--acc-2)}
.loginwrap .err{border:1px solid var(--red-line);background:var(--red-glow);color:#ffb4b4;
  border-radius:9px;padding:11px 14px;font-size:14px;margin-bottom:16px}

/* Mobil */
@media(max-width:820px){
  .shell{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex-direction:column}
  .msgrow .who{width:130px}
  .msgrow .sz{display:none}
  .searchform input{width:150px}
  .field .row2{grid-template-columns:1fr}
}