:root{--bg:#f4f6f8;--panel:#fff;--text:#1d2329;--muted:#66717c;--line:#dde3e8;--accent:#0b6bcb;--accent-text:#fff;
--unread:#e9f2fc;--danger:#c42b1c;--ok:#107c10}
@media (prefers-color-scheme:dark){:root{--bg:#15191d;--panel:#1d2329;--text:#e6e9ec;--muted:#98a2ad;--line:#2e363e;
--accent:#4c9be8;--accent-text:#0b1520;--unread:#1f2c3a;--danger:#ff6b5e;--ok:#5fd35f}}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
header .brand{font-weight:700;font-size:17px;color:var(--text)}header .sp{flex:1}header .who{color:var(--muted);font-size:13px}
.wrap{display:flex;min-height:calc(100vh - 52px)}
nav{width:220px;flex:none;padding:12px;border-right:1px solid var(--line);background:var(--panel)}
nav a.f{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:6px;color:var(--text)}
nav a.f.cur{background:var(--unread);font-weight:600}nav a.f:hover{text-decoration:none;background:var(--unread)}
nav .cnt{color:var(--accent);font-weight:600}
main{flex:1;min-width:0;padding:16px}
.btn,button{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
color:var(--text);font:inherit;cursor:pointer}.btn:hover,button:hover{text-decoration:none;border-color:var(--accent)}
.btn.primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.block{display:block;text-align:center;margin-bottom:12px}
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{width:100%;padding:8px 10px;
border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);font:inherit}
textarea{min-height:320px;resize:vertical}select{width:auto}
table.list{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
table.list td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr.unread td{background:var(--unread);font-weight:600}table.list td.chk{width:28px}
table.list td.date{white-space:nowrap;color:var(--muted);text-align:right;width:130px}
table.list td.who{width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
table.list a{color:var(--text);display:block}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.toolbar .sp{flex:1}
.toolbar input[type=search]{width:240px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px}
.meta{display:grid;grid-template-columns:70px 1fr;gap:2px 10px;color:var(--muted);font-size:14px}.meta b{color:var(--text);font-weight:600}
h1{font-size:20px;margin:0 0 10px}pre.body{white-space:pre-wrap;word-wrap:break-word;font:inherit;margin:0}
iframe.body{width:100%;height:70vh;border:0;background:#fff;border-radius:6px}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:12px;background:var(--unread)}.flash.err{color:var(--danger)}
.form-row{margin-bottom:10px}.form-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:3px}
.login{max-width:380px;margin:10vh auto;padding:28px}.login h1{text-align:center}
.pager{margin-top:12px;display:flex;gap:8px;justify-content:flex-end;color:var(--muted)}
.att a{display:inline-block;margin:4px 8px 0 0;padding:4px 10px;border:1px solid var(--line);border-radius:14px}
.muted{color:var(--muted)}
@media (max-width:760px){.wrap{flex-direction:column}nav{width:auto;border-right:0;border-bottom:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:4px}nav .btn.block{margin:0 8px 0 0}table.list td.who{max-width:120px}
table.list td.date{display:none}table.list td{padding:8px 6px}header .who{display:none}.toolbar input[type=search]{width:100%}}