:root {
  color-scheme: light dark;
  --accent: #ea580c;
  --line: color-mix(in srgb, currentColor 15%, transparent);
  --soft: color-mix(in srgb, currentColor 6%, transparent);
  --muted: color-mix(in srgb, currentColor 60%, transparent);
}
* { box-sizing: border-box }
body {
  font: 15px/1.5 system-ui, -apple-system, Inter, sans-serif;
  margin: 0;
  padding: calc(env(safe-area-inset-top) + 1rem) 1rem calc(env(safe-area-inset-bottom) + 5rem);
  background: Canvas;
}
main { max-width: 40rem; margin: 0 auto }
h1 { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: .5rem }
h1 img { width: 1.5rem; height: 1.5rem; border-radius: .35rem }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem }
p { margin: .4rem 0 }
a { color: var(--accent) }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft);
       padding: .1rem .3rem; border-radius: .3rem; overflow-wrap: anywhere }
pre { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft);
      padding: .75rem; border-radius: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0 }
.muted { color: var(--muted) }
small { color: var(--muted) }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem }
nav { display: flex; gap: .25rem; margin: 0 0 1rem; overflow-x: auto }
nav button { border: 0; background: none; padding: .45rem .75rem; border-radius: 999px; color: var(--muted) }
nav button[aria-current="page"] { background: var(--soft); color: inherit; font-weight: 600 }

input, select, button, textarea {
  font: inherit; color: inherit; padding: .5rem .65rem;
  border: 1px solid var(--line); border-radius: .5rem; background: transparent;
}
input, select { min-width: 0 }
button { cursor: pointer }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600 }
button.danger { color: #dc2626 }
button:disabled { opacity: .5; cursor: default }

.card { border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; margin: 0 0 1rem }
.banner { background: color-mix(in srgb, var(--accent) 12%, transparent);
          border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
.stack { display: grid; gap: .6rem }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
.grow { flex: 1 }
.code { font: 600 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em }

ul.list { list-style: none; padding: 0; margin: 0 }
ul.list > li { padding: .9rem 0; border-top: 1px solid var(--line) }
ul.list > li:first-child { border-top: 0 }

.msg .meta { display: flex; justify-content: space-between; gap: .5rem; font-size: 13px; color: var(--muted) }
.msg .topic { font-weight: 600; color: inherit }
.msg strong { display: block; margin-top: .15rem }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere }
.msg.unread .topic::before { content: ""; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--accent); margin-right: .4rem; vertical-align: .1em }
.msg.highlight { background: var(--soft); border-radius: .5rem; padding-inline: .6rem; margin-inline: -.6rem }
.msg details { margin-top: .4rem; font-size: 14px }
.msg details ul { list-style: none; padding: 0 0 0 .75rem; border-left: 2px solid var(--line); margin: .4rem 0 0 }
.msg details li { padding: .25rem 0 }
.badge { font-size: 12px; padding: .1rem .45rem; border-radius: 999px; background: var(--soft) }
.badge.ok { color: #16a34a }
.badge.bad { color: #dc2626 }

.topic-form .emoji { width: 3.2rem; text-align: center }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem }
fieldset label { display: flex; gap: .35rem; align-items: center }

#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 1rem);
         transform: translateX(-50%); background: CanvasText; color: Canvas;
         padding: .6rem 1rem; border-radius: .6rem; max-width: calc(100% - 2rem); font-size: 14px }