:root { --bg:#f6f7f9; --fg:#222; --muted:#777; --line:#e2e4e8; --acc:#3b5bdb; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background:var(--bg); color:var(--fg); font-size:14px; }
header { display:flex; align-items:center; gap:18px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; }
.brand { font-weight:700; font-size:18px; color:var(--acc); text-decoration:none; }
nav a { margin-right:14px; color:var(--fg); text-decoration:none; }
nav a:hover { color:var(--acc); }
header .date { margin-left:auto; color:var(--muted); }
header .who { color:var(--muted); font-size:12px; }
header .who a { margin-left:6px; color:var(--acc); }
main { max-width:1200px; margin:0 auto; padding:16px 20px; }
section { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:16px; }
h2 { font-size:15px; margin:0 0 10px; }
h3 { font-size:13px; margin:0 0 6px; color:var(--muted); }
.sec-head { display:flex; justify-content:space-between; align-items:center; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } }
.muted { color:var(--muted); }
.inline { display:inline; }
button { border:1px solid var(--line); background:#fff; border-radius:5px; padding:4px 10px; cursor:pointer; font-size:12px; }
button:hover { border-color:var(--acc); color:var(--acc); }
table { width:100%; border-collapse:collapse; }
td { padding:6px 6px; border-top:1px solid var(--line); vertical-align:top; }
.mails .imp { width:34px; font-weight:700; }
.mails .date { width:90px; color:var(--muted); white-space:nowrap; }
.mails .from { width:170px; overflow:hidden; text-overflow:ellipsis; }
.mails .act { width:150px; text-align:right; white-space:nowrap; }
.tag.thread { background:#eee; color:#555; }
.mails .summary { color:#555; font-size:12px; margin-top:2px; }
tr.imp5 .imp { color:#d6336c; } tr.imp4 .imp { color:#e8590c; } tr.imp3 .imp { color:#555; } tr.imp2 .imp, tr.imp1 .imp { color:#bbb; }
tr.done { opacity:.55; }
.tag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:10px; background:#eee; margin-left:6px; color:#555; }
.tag.reply { background:#ffe3e3; color:#c92a2a; }
.tag.action { background:#fff3bf; color:#8a6d00; }
.tag.schedule { background:#d0ebff; color:#1864ab; }
.tag.phishing, .tag.spam { background:#b00020; color:#fff; }
.tag.notification { background:#e7f5ff; color:#1971c2; }
nav a.warn { color:#b00020; }
nav small { color:#888; }
.mails .act { width:190px; }
.tasks .pri { width:36px; font-weight:700; }
.tasks .due { width:100px; color:var(--muted); }
.tasks .act { width:110px; text-align:right; white-space:nowrap; }
tr.p1 .pri { color:#d6336c; }
tr.overdue .due { color:#d6336c; font-weight:700; }
.filters { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.filters input, .filters select { padding:5px 8px; border:1px solid var(--line); border-radius:5px; }
.tabs a { margin-right:12px; color:var(--muted); text-decoration:none; }
.tabs a.on { color:var(--acc); font-weight:700; }
pre { white-space:pre-wrap; word-break:break-word; font-family:inherit; margin:0; }
pre.md, pre.draft, pre.body { background:#fafbfc; border:1px solid var(--line); border-radius:6px; padding:10px; }
.box { margin-top:12px; padding:0; border:none; }
.meta { color:var(--muted); }
.chat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; height:60vh; overflow-y:auto; }
.msg { margin:8px 0; display:flex; flex-direction:column; }
.msg.user { align-items:flex-end; }
.bubble { max-width:75%; padding:8px 12px; border-radius:12px; background:#eef1f6; white-space:pre-wrap; }
.msg.user .bubble { background:var(--acc); color:#fff; }
.msg small { color:var(--muted); font-size:10px; margin-top:2px; }
.chatform { display:flex; gap:8px; margin-top:10px; }
.chatform input { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.actions-done { background:#e6fcf5; border:1px solid #96f2d7; border-radius:6px; padding:8px 20px; margin:10px 0; }

/* accounts admin */
.card { border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.card h3 { width: 100%; margin: 0 0 4px; font-size: 1em; }
.card label { display: flex; flex-direction: column; font-size: .85em; color: #555; }
.error { color: #b00020; background: #fdecea; padding: 8px 12px; border-radius: 6px; }
.notice { color: #0b6b2f; background: #e6f6ec; padding: 8px 12px; border-radius: 6px; }
button.danger { background: #b00020; color: #fff; }
header .who form { display:inline; margin-left:6px; }
header .who button { font-size:11px; padding:2px 6px; }
body.login main { display:flex; justify-content:center; padding-top:10vh; }
.login-card { width:320px; display:block; }
.login-card label { display:block; margin:10px 0; }
.login-card input { width:100%; box-sizing:border-box; padding:6px; }
.login-card .error { color:#c33; }
form.rename input { border:1px solid transparent; background:transparent; padding:2px 4px; }
form.rename input:focus { border-color:#bbb; background:#fff; }
form.rename button { font-size:11px; padding:1px 5px; }
header .sync { font-size:12px; color:#666; margin-left:8px; }
.md { background:#fafbfc; border:1px solid var(--line); border-radius:6px; padding:10px 16px; line-height:1.55; }
.md h1 { font-size:18px; margin:4px 0 10px; }
.md h2 { font-size:15px; margin:14px 0 6px; border-bottom:1px solid var(--line); padding-bottom:2px; }
.md h3 { font-size:13px; margin:10px 0 4px; }
.md ul, .md ol { margin:4px 0; padding-left:22px; }
.md li { margin:2px 0; }
.md hr { border:0; border-top:1px solid var(--line); margin:10px 0; }
.md a.ref { font-family:monospace; background:#eef1f6; border-radius:3px; padding:0 3px; text-decoration:none; }