:root { --bg:#f3f6fb; --panel:#fff; --ink:#18212f; --muted:#5f6b7d; --line:#dfe5ee; --brand:#0f3d7a; --brand2:#1f63c2; --soft:#e8f0fb;
  --bad:#b42318; --badsoft:#fdecea; --ok:#1f7a4d; --oksoft:#e3f4ea; --warn:#9a6200; --warnsoft:#fdf1dc;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif; font-size:14px; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); }
button, input, select, textarea { font:inherit; color:inherit; }
.boot { padding:3rem; text-align:center; color:var(--muted); }
.btn { border:1px solid var(--line); background:#fff; padding:.45rem .85rem; border-radius:8px; cursor:pointer; white-space:nowrap; }
.btn:hover { border-color:#b9c4d6; } .btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; } .btn.primary:hover { background:var(--brand2); }
.btn.danger { color:var(--bad); border-color:#f1c4bf; } .btn.ghost { border-color:transparent; background:transparent; } .btn.sm { padding:.25rem .55rem; font-size:.85rem; }
.btn:disabled { opacity:.55; cursor:default; }
input, select, textarea { border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; background:#fff; width:100%; }
textarea { resize:vertical; min-height:120px; }
label.f { display:block; margin-bottom:.7rem; } label.f > span { display:block; font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:.2rem; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; } .spacer { flex:1; } .muted { color:var(--muted); } .small { font-size:.85em; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem; }
.alert { padding:.6rem .8rem; border-radius:8px; margin:.5rem 0; } .alert.bad { background:var(--badsoft); color:#8a1c13; }
.alert.ok { background:var(--oksoft); color:#155a37; } .alert.info { background:var(--soft); color:var(--brand); } .alert.warn { background:var(--warnsoft); color:#6c4500; }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:99px; font-size:.75rem; font-weight:600; background:#eef1f6; }
.badge.ok { background:var(--oksoft); color:var(--ok); } .badge.bad { background:var(--badsoft); color:var(--bad); } .badge.warn { background:var(--warnsoft); color:var(--warn); }

.login { min-height:100vh; display:grid; place-items:center; padding:1rem; background:linear-gradient(160deg,#0b2a55,#0f3d7a 55%,#1f63c2); }
.login .card { width:100%; max-width:380px; } .login h1 { margin:0 0 .2rem; color:var(--brand); font-size:1.4rem; }

.shell { display:grid; grid-template-columns:230px 1fr; height:100vh; }
.side { background:#0d2547; color:#cfdaee; display:flex; flex-direction:column; overflow-y:auto; }
.side .logo { padding:1rem; font-weight:700; color:#fff; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.08); }
.side .compose { margin:.8rem; } .side nav a { display:flex; justify-content:space-between; padding:.55rem 1rem; color:inherit; text-decoration:none; cursor:pointer; }
.side nav a:hover { background:rgba(255,255,255,.07); } .side nav a.on { background:#1f63c2; color:#fff; }
.side .sect { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; padding:.9rem 1rem .3rem; }
.side .me { margin-top:auto; padding:.8rem 1rem; font-size:.85rem; border-top:1px solid rgba(255,255,255,.08); }
.cnt { background:#e8f0fb; color:var(--brand); border-radius:99px; font-size:.72rem; padding:0 .45rem; font-weight:700; }
.main { display:grid; grid-template-columns:380px 1fr; min-width:0; height:100vh; }
.main.single { grid-template-columns:1fr; overflow-y:auto; }
.list { border-right:1px solid var(--line); background:#fff; display:flex; flex-direction:column; min-width:0; }
.list .top { padding:.6rem; border-bottom:1px solid var(--line); display:flex; gap:.4rem; }
.list .items { overflow-y:auto; flex:1; }
.mi { padding:.65rem .8rem; border-bottom:1px solid var(--line); cursor:pointer; }
.mi:hover { background:#f7f9fc; } .mi.on { background:var(--soft); } .mi.unseen .who, .mi.unseen .sub { font-weight:700; }
.mi .who { display:flex; justify-content:space-between; gap:.5rem; } .mi .who span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mi .snip { color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.read { overflow-y:auto; padding:1.2rem; min-width:0; } .read h2 { margin:0 0 .4rem; font-size:1.25rem; }
.read .hdr { color:var(--muted); font-size:.88rem; margin-bottom:1rem; line-height:1.6; }
.read pre { white-space:pre-wrap; font-family:inherit; margin:0; } .read iframe { width:100%; border:0; min-height:420px; background:#fff; }
.att { display:inline-flex; gap:.4rem; align-items:center; border:1px solid var(--line); border-radius:8px; padding:.35rem .6rem; margin:.25rem .35rem 0 0; text-decoration:none; color:var(--ink); }
.empty { color:var(--muted); text-align:center; padding:3rem 1rem; }
.page { padding:1.2rem; max-width:1100px; } .page h1 { font-size:1.35rem; margin:0 0 1rem; }
table.t { width:100%; border-collapse:collapse; background:#fff; } .t th, .t td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.t th { font-size:.75rem; text-transform:uppercase; color:var(--muted); background:#fafbfd; } .tw { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; } .tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1rem; flex-wrap:wrap; }
.tabs button { border:0; background:none; padding:.55rem .85rem; border-bottom:2px solid transparent; cursor:pointer; color:var(--muted); } .tabs button.on { color:var(--brand); border-color:var(--brand); font-weight:600; }
code, .mono { font-family:Consolas,monospace; font-size:.85em; word-break:break-all; }
.mback { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow-y:auto; }
.mbox { background:#fff; border-radius:12px; width:100%; max-width:720px; } .mbox header { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.mbox header h2 { margin:0; font-size:1.1rem; } .mbox .body { padding:1rem; max-height:74vh; overflow-y:auto; } .mbox footer { padding:.8rem 1rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:.5rem; }
#toasts { position:fixed; right:1rem; bottom:1rem; z-index:99; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:#18212f; color:#fff; padding:.6rem .9rem; border-radius:8px; max-width:360px; } .toast.bad { background:var(--bad); } .toast.ok { background:var(--ok); }
.hamb, .back { display:none; }
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; } .side { position:fixed; z-index:40; width:250px; height:100vh; transform:translateX(-100%); transition:transform .2s; }
  .shell.open .side { transform:none; box-shadow:0 0 40px rgba(0,0,0,.3); } .hamb { display:inline-block; }
  .main { grid-template-columns:1fr; } .main.reading .list { display:none; } .main:not(.reading) .read { display:none; } .back { display:inline-block; }
  .grid2 { grid-template-columns:1fr; }
}