:root{--crimson:#c8102e;--crimson-dark:#8e0b21;--obsidian:#0f1115;--obsidian-2:#171a21;--obsidian-3:#20242d;--platinum:#e5e4e2;--platinum-2:#b8b7b5;--muted:#8a8f99;--ok:#2fb344;--warn:#e0a21a;--bad:#e5484d;--fs:18px;--radius:14px}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--obsidian);color:var(--platinum);font:var(--fs)/1.45 system-ui,"Segoe UI",Roboto,sans-serif}
body.light{--obsidian:#f5f4f2;--obsidian-2:#ffffff;--obsidian-3:#e9e8e5;--platinum:#1a1c22;--platinum-2:#444;--muted:#666}
a{color:#ff5c73}button,input,select,textarea{font:inherit;color:inherit}
button{background:var(--obsidian-3);border:1px solid #2e3340;border-radius:10px;padding:.55em 1em;cursor:pointer;min-height:44px}button:hover{border-color:var(--platinum-2)}button.primary{background:var(--crimson);border-color:var(--crimson);color:#fff;font-weight:600}button.primary:hover{background:var(--crimson-dark)}button.danger{border-color:var(--bad);color:var(--bad)}button.small{min-height:34px;padding:.3em .7em;font-size:.9em}button:disabled{opacity:.5;cursor:default}
input,select,textarea{background:var(--obsidian-2);border:1px solid #2e3340;border-radius:10px;padding:.55em .8em;min-height:44px;width:100%}textarea{min-height:160px;resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid var(--crimson);outline-offset:1px}
label{display:block;margin:.6em 0 .25em;color:var(--platinum-2);font-size:.9em}
.boot{padding:3em;text-align:center;color:var(--muted)}
#app{display:flex;flex-direction:column;height:100vh;overflow:auto}
header.top{display:flex;align-items:center;gap:1em;padding:.6em 1em;background:var(--obsidian-2);border-bottom:2px solid var(--crimson);position:sticky;top:0;z-index:5}
header.top .brand{font-weight:800;font-size:1.25em;letter-spacing:.02em}header.top .brand b{color:var(--crimson)}header.top .ver{color:var(--muted);font-size:.75em;margin-left:.4em}
header.top nav{display:flex;gap:.3em;flex-wrap:wrap}header.top nav a{color:var(--platinum);text-decoration:none;padding:.45em .8em;border-radius:10px}header.top nav a.active,header.top nav a:hover{background:var(--obsidian-3)}header.top nav a .badge{background:var(--crimson);color:#fff;border-radius:999px;padding:0 .5em;font-size:.75em;margin-left:.3em}
header.top .spacer{flex:1}header.top .who{color:var(--platinum-2);font-size:.9em}
main{flex:1;display:flex;min-height:0}
.sidebar{width:260px;flex:none;padding:1em;border-right:1px solid #2e3340;background:var(--obsidian-2);overflow:auto}.sidebar .folder{display:flex;justify-content:space-between;align-items:center;padding:.6em .8em;border-radius:10px;cursor:pointer;margin:.15em 0}.sidebar .folder:hover,.sidebar .folder.active{background:var(--obsidian-3)}.sidebar .folder .n{color:var(--muted);font-size:.85em}.sidebar h4{margin:1.2em 0 .4em;color:var(--muted);font-size:.8em;text-transform:uppercase;letter-spacing:.08em}
.content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.list{flex:none;max-height:45vh;overflow:auto;border-bottom:1px solid #2e3340}.list.full{max-height:none;flex:1;border-bottom:0}
.row{display:grid;grid-template-columns:28px 1fr auto;gap:.6em;padding:.75em 1em;border-bottom:1px solid #22262f;cursor:pointer;align-items:center}.row:hover{background:var(--obsidian-2)}.row.unread .subj,.row.unread .from{font-weight:700;color:var(--platinum)}.row.sel{background:var(--obsidian-3)}.row .from{color:var(--platinum-2)}.row .subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .snip{color:var(--muted);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .date{color:var(--muted);font-size:.8em;white-space:nowrap}.row .tag{display:inline-block;font-size:.72em;padding:0 .5em;border-radius:6px;background:var(--obsidian-3);margin-right:.3em;color:var(--platinum-2)}.row .tag.danger{background:var(--bad);color:#fff}.row .star{color:var(--warn)}
.reader{flex:1;overflow:auto;padding:1.2em}
.card{background:var(--obsidian-2);border:1px solid #2e3340;border-radius:var(--radius);padding:1.2em;margin:0 0 1em}.card h2,.card h3{margin:0 0 .5em}.card.warn{border-color:var(--warn)}.card.bad{border-color:var(--bad)}.card.ok{border-color:var(--ok)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1em}.big{font-size:2em;font-weight:800;margin:.1em 0}.muted{color:var(--muted)}.small{font-size:.85em}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.toolbar{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;padding:.6em 1em;border-bottom:1px solid #2e3340;background:var(--obsidian-2)}.toolbar input[type=search]{max-width:420px}
.msg-head{border-bottom:1px solid #2e3340;padding-bottom:.8em;margin-bottom:.8em}.msg-head h2{margin:0 0 .3em;font-size:1.4em}.msg-head .meta{color:var(--platinum-2);font-size:.9em}.msg-body{line-height:1.55;word-break:break-word}.msg-body pre{white-space:pre-wrap;font:inherit}
iframe.html{width:100%;border:0;background:#fff;border-radius:10px;min-height:300px}
.banner{padding:.7em 1em;border-radius:10px;margin:.6em 0;background:var(--obsidian-3)}.banner.warn{background:#4a3410;color:#ffd37a}.banner.bad{background:#4b1518;color:#ffb3b6}.banner.ok{background:#153f1e;color:#b7f0c2}
.att{display:inline-flex;gap:.5em;align-items:center;padding:.5em .8em;border:1px solid #2e3340;border-radius:10px;margin:.3em .3em 0 0;background:var(--obsidian-3)}
.page{flex:1;overflow:auto;padding:1.2em;max-width:1100px;width:100%}
.center{max-width:560px;margin:4em auto;padding:1em}.center .logo{font-size:2.6em;font-weight:900;text-align:center;margin-bottom:.4em}.center .logo b{color:var(--crimson)}.center .logover{font-size:.4em;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-top:.15em}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:.4em;font-family:ui-monospace,Consolas,monospace;font-size:1.15em}.codes div{padding:.4em .6em;background:var(--obsidian-3);border-radius:8px;text-align:center}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:1em}.modal{background:var(--obsidian-2);border:1px solid #2e3340;border-radius:var(--radius);padding:1.2em;width:min(900px,100%);max-height:92vh;overflow:auto}
.compose .row2{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.chips{display:flex;flex-wrap:wrap;gap:.3em}.chip{background:var(--obsidian-3);border-radius:999px;padding:.15em .7em;font-size:.85em}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.5em .6em;border-bottom:1px solid #22262f;vertical-align:top}th{color:var(--muted);font-weight:600;font-size:.85em}
.toast{position:fixed;left:50%;bottom:1.5em;transform:translateX(-50%);background:var(--obsidian-3);border:1px solid var(--platinum-2);padding:.8em 1.2em;border-radius:12px;z-index:30;display:flex;gap:1em;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal .d{min-height:96px;background:var(--obsidian-2);border:1px solid #2e3340;border-radius:8px;padding:.3em;font-size:.85em}.cal .d.today{border-color:var(--crimson)}.cal .d .n{color:var(--muted)}.cal .ev{background:var(--obsidian-3);border-left:4px solid var(--crimson);border-radius:4px;padding:.1em .4em;margin:.2em 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal .d.other{opacity:.45}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3em 1em}.kv div:nth-child(odd){color:var(--muted)}
.bar{height:10px;background:var(--obsidian-3);border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--crimson)}
.notif{padding:.6em .8em;border-bottom:1px solid #22262f}.notif.unread{background:var(--obsidian-3)}
.sr{position:absolute;left:-9999px}
@media (max-width:900px){.sidebar{display:none}main{flex-direction:column}.list{max-height:none}.reader{padding:.8em}header.top .who{display:none}.compose .row2{grid-template-columns:1fr}.cal .d{min-height:60px}}