:root {
  --bg: #f6f7f9; --fg: #0f172a; --muted: #64748b; --card: #ffffff; --line: #e2e8f0;
  --accent: #2563eb; --accent-fg: #fff; --danger: #dc2626; --locked: #f1f5f9;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b1120; --fg: #e2e8f0; --muted: #94a3b8; --card: #111827; --line: #1f2937;
          --accent: #3b82f6; --locked: #1e293b; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
       padding-bottom: env(safe-area-inset-bottom); }
.bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
       padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.bar h1 { font-size: 18px; margin: 0; }
.bar-actions { display: flex; align-items: center; gap: 6px; }
.status { font-size: 13px; color: var(--muted); }
.icon-btn { font-size: 20px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn:active { background: var(--line); }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.card h2 { margin-top: 0; }
.card h3 { margin: 22px 0 4px; font-size: 15px; }
.hint { color: var(--muted); font-size: 14px; margin: 4px 0 8px; }
code { font-size: 13px; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
input, textarea { width: 100%; font: 13px/1.4 ui-monospace, Menlo, monospace; padding: 10px; border-radius: 10px;
                  border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.row input { flex: 1; width: auto; min-width: 0; }
button { font: inherit; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.danger { color: var(--danger); border-color: var(--danger); }
button.link { border: 0; background: none; padding: 4px 0; color: var(--accent); }
.danger-title { color: var(--danger); }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.msg-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.from { font-weight: 600; overflow-wrap: anywhere; }
.when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.text { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.meta { margin-top: 6px; color: var(--muted); font-size: 12px; }
.msg .del { font-size: 13px; color: var(--muted); }
.msg.locked { background: var(--locked); }
.msg.locked .text { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); max-height: 3.5em; overflow: hidden; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }
label { display: block; font-size: 14px; margin: 12px 0 4px; color: var(--muted); }
#form-pair input { font: 16px/1.4 -apple-system, system-ui, sans-serif; }
#form-pair button { margin-top: 16px; width: 100%; }