:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f0f2f5; --border:#dfe3e8;
  --text:#1a1d21; --text-dim:#5c6470; --text-faint:#8b939f;
  --accent:#4f7cff; --accent-fg:#fff; --accent-soft:#eaf0ff;
  --danger:#d9403c; --danger-soft:#fdecec; --ok:#1f9254; --ok-soft:#e7f6ed;
  --warn:#b7791f; --warn-soft:#fdf3e0;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1116; --surface:#161b22; --surface-2:#1c222b; --border:#2a313c;
    --text:#e6edf3; --text-dim:#9aa5b1; --text-faint:#6e7681;
    --accent:#5b86ff; --accent-fg:#fff; --accent-soft:#1a2340;
    --danger:#f4736f; --danger-soft:#2c1a1a; --ok:#3fb950; --ok-soft:#132a1b;
    --warn:#d29922; --warn-soft:#2b2113;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5em;line-height:1.25;font-weight:650}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:0 0 1em}
code,kbd{font-family:var(--mono);font-size:.875em}
hr{border:0;border-top:1px solid var(--border);margin:1.5rem 0}

/* ---- layout ---- */
.main{max-width:1080px;margin:0 auto;padding:1.75rem 1.25rem 4rem}
.main--wide{max-width:1400px}
.is-anon .main{max-width:420px;padding-top:9vh}

/* ---- nav ---- */
.nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.nav__inner{max-width:1400px;margin:0 auto;padding:0 1.25rem;height:56px;display:flex;align-items:center;gap:1.5rem}
.nav__brand{display:flex;align-items:center;gap:.5rem;font-weight:680;color:var(--text)}
.nav__brand:hover{text-decoration:none}
.nav__links{display:flex;gap:.25rem;flex:1;overflow-x:auto}
.nav__link{padding:.4rem .7rem;border-radius:var(--radius-sm);color:var(--text-dim);font-weight:530;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.nav__link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav__link.is-active{background:var(--accent-soft);color:var(--accent)}
.nav__badge{background:var(--accent);color:var(--accent-fg);border-radius:99px;font-size:.7rem;padding:.05rem .38rem;font-weight:650;line-height:1.5}
.nav__user{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--text-dim)}
.nav__name{font-weight:560;color:var(--text)}
@media (max-width:720px){
  .nav__inner{height:auto;flex-wrap:wrap;padding:.6rem 1rem;gap:.6rem}
  .nav__links{order:3;width:100%}
  .nav__user{margin-left:auto}
}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card__head{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.card__head h1,.card__head h2{margin:0}
.card__body{padding:1.25rem}
.card__body--flush{padding:0}

/* ---- forms ---- */
.field{margin-bottom:1rem}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:.35rem;letter-spacing:.01em}
.input,.select,.textarea{
  width:100%;padding:.6rem .75rem;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;
}
.textarea{min-height:200px;resize:vertical;font-family:inherit}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.hint{font-size:.78rem;color:var(--text-faint);margin-top:.35rem}
.row{display:flex;gap:.75rem;flex-wrap:wrap}
.row>*{flex:1;min-width:170px}
.inline{display:inline}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .95rem;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:580;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn:active{filter:brightness(.95)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--block{width:100%}
.btn--sm{padding:.35rem .6rem;font-size:.8rem}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text-dim)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text);filter:none}
.btn--danger{background:var(--danger)}
.btn--quiet{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn--quiet:hover{filter:none;background:var(--border)}

/* ---- flash / alerts ---- */
.flash{padding:.7rem .9rem;border-radius:var(--radius-sm);margin-bottom:1.25rem;font-size:.9rem;border:1px solid transparent}
.flash--error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.flash--ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.flash--info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ---- tables ---- */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding:.6rem 1rem;border-bottom:1px solid var(--border);font-weight:650}
.table td{padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table__actions{display:flex;gap:.4rem;justify-content:flex-end}
.table-wrap{overflow-x:auto}

/* ---- message list ---- */
.msg-list{list-style:none;margin:0;padding:0}
.msg{display:block;padding:.8rem 1.25rem;border-bottom:1px solid var(--border);color:var(--text)}
.msg:hover{background:var(--surface-2);text-decoration:none}
.msg:last-child{border-bottom:0}
.msg__top{display:flex;align-items:baseline;gap:.75rem}
.msg__from{font-weight:560;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg__date{font-size:.78rem;color:var(--text-faint);white-space:nowrap}
.msg__subject{margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg__snippet{font-size:.85rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.1rem}
.msg__to{font-size:.75rem;color:var(--text-faint);font-family:var(--mono);margin-top:.25rem}
.msg.is-unread{background:linear-gradient(90deg,var(--accent-soft) 0 3px,transparent 3px)}
.msg.is-unread .msg__from,.msg.is-unread .msg__subject{font-weight:680}

/* ---- misc ---- */
.tag{display:inline-block;padding:.1rem .45rem;border-radius:5px;font-size:.72rem;font-weight:600;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border)}
.tag--ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag--off{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.tag--warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.mono{font-family:var(--mono);font-size:.85rem}
.dim{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.empty{padding:3.5rem 1.5rem;text-align:center;color:var(--text-faint)}
.empty h3{color:var(--text-dim)}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.copy{cursor:pointer;user-select:all;font-family:var(--mono);font-size:.85rem}
.copy:hover{color:var(--accent)}
.pager{display:flex;gap:.5rem;justify-content:center;padding:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.875rem}
.kv dt{color:var(--text-faint)}
.kv dd{margin:0;word-break:break-word}

/* ---- message reader ---- */
.reader__head{padding:1.25rem;border-bottom:1px solid var(--border)}
.reader__subject{font-size:1.25rem;font-weight:650;margin:0 0 .6rem}
.reader__body{padding:1.25rem}
.reader__frame{width:100%;border:0;min-height:420px;background:#fff;border-radius:var(--radius-sm)}
.reader__text{white-space:pre-wrap;word-wrap:break-word;font-family:var(--mono);font-size:.85rem;line-height:1.6;margin:0}
.att{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.4rem}
.att__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- auth pages ---- */
.auth__logo{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.5rem;font-size:1.25rem;font-weight:680}
.auth__foot{text-align:center;margin-top:1.25rem;font-size:.875rem;color:var(--text-dim)}