:root {
  --face: #d4d0c8;
  --face-hi: #ffffff;
  --face-lt: #e8e6e1;
  --face-lo: #808080;
  --face-dk: #404040;
  --text: #000000;
  --muted: #5f5f5f;
  --log-bg: #ffffff;
  --log-text: #000000;
  --sel: #0a246a;
  --sel-text: #ffffff;
  --cap-a: #0a246a;
  --cap-b: #a6caf0;
  --head-a: #2f5fa8;
  --head-b: #8fb6ea;
  --topic-bg: #e3ebf8;
  --ts: #4a4a4a;
  --sys: #008000;
  --err: #c00000;
  --act: #9c009c;
  --ntc: #7f2a00;
  --motd: #00507f;
  --quit: #00007f;
  --hl-bg: #fff6a8;
  --hit-bg: #c8e1ff;
  --link: #0000ee;
  --tip: #ffffe1;
  --tip-text: #000000;
  --ui: Tahoma, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --log-font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", Verdana, Tahoma, sans-serif;
  --mono: Consolas, "D2Coding", "Courier New", monospace;
  color-scheme: light;
}

html[data-theme="dark"] {
  --face: #2b2b2f;
  --face-hi: #55555c;
  --face-lt: #3a3a40;
  --face-lo: #1a1a1d;
  --face-dk: #0d0d0f;
  --text: #e8e8e8;
  --muted: #a0a0a8;
  --log-bg: #0e0f12;
  --log-text: #d9dbe0;
  --sel: #2c5aa0;
  --sel-text: #ffffff;
  --cap-a: #16233f;
  --cap-b: #36507e;
  --head-a: #1e3560;
  --head-b: #36507e;
  --topic-bg: #182131;
  --ts: #8b8f99;
  --sys: #69d26b;
  --err: #ff7070;
  --act: #e488e4;
  --ntc: #e6a46a;
  --motd: #7cc4ef;
  --quit: #8fa8ff;
  --hl-bg: #3d3600;
  --hit-bg: #1f3b63;
  --link: #8ab4ff;
  --tip: #2a2a1c;
  --tip-text: #f2f2d8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px/1.35 var(--ui);
  color: var(--text);
  background: var(--face);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a { color: var(--link); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px dotted var(--text); outline-offset: -3px; }

.win {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.caption {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 6px;
  color: #fff;
  font-weight: 700;
  background: var(--cap-a);
  background: linear-gradient(90deg, var(--cap-a), var(--cap-b));
  white-space: nowrap;
  overflow: hidden;
}
.caption #caption { overflow: hidden; text-overflow: ellipsis; }
.cap-icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: url("/favicon.svg") center / contain no-repeat;
}

.menubar { display: flex; flex-wrap: wrap; padding: 1px 2px; border-bottom: 1px solid var(--face-lo); }
.menubar > button {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 8px;
}
.menubar > button:hover, .menubar > button[aria-expanded="true"] {
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.menu-drop {
  position: fixed;
  z-index: 50;
  min-width: 190px;
  padding: 2px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  box-shadow: inset -1px -1px var(--face-lo), inset 1px 1px var(--face-hi), 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.menu-drop a, .menu-drop button {
  display: block;
  width: 100%;
  padding: 4px 22px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.menu-drop a:hover, .menu-drop button:hover, .menu-drop a:focus, .menu-drop button:focus {
  background: var(--sel);
  color: var(--sel-text);
  outline: none;
}
.menu-drop hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--face-lo); border-bottom: 1px solid var(--face-hi); }

.toolbar {
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 2px 4px;
  border-top: 1px solid var(--face-hi);
  border-bottom: 1px solid var(--face-lo);
  overflow-x: auto;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.tool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 46px;
  padding: 2px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
}
.tool:hover { border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi); }
.tool:active { border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }
.sep { width: 2px; margin: 2px 4px; border-left: 1px solid var(--face-lo); border-right: 1px solid var(--face-hi); }
.ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #fff;
  font: 700 12px/1 Verdana, Tahoma, sans-serif;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}
.ico-tree { background: #3a6ea5; } .ico-tree::before { content: "S"; }
.ico-home { background: #2e8b57; } .ico-home::before { content: "L"; }
.ico-chat { background: #1f6fd1; } .ico-chat::before { content: "#"; }
.ico-mail { background: #c0392b; } .ico-mail::before { content: "@"; }
.ico-user { background: #7d5ba6; } .ico-user::before { content: "U"; }
.ico-list { background: #d68910; } .ico-list::before { content: "≡"; }
.ico-join { background: #148f77; } .ico-join::before { content: "+"; }
.ico-nick { background: #5d6d7e; } .ico-nick::before { content: "N"; }
.ico-theme { background: #2c3e50; } .ico-theme::before { content: "◐"; }
.ico-help { background: #2471a3; border-radius: 50%; } .ico-help::before { content: "?"; }

.switchbar {
  display: flex;
  gap: 2px;
  padding: 3px 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--face-hi);
}
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 180px;
  padding: 3px 10px 2px;
  border: 1px solid;
  border-bottom: 0;
  border-color: var(--face-hi) var(--face-dk) transparent var(--face-hi);
  border-radius: 3px 3px 0 0;
  background: var(--face);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.tab span { overflow: hidden; text-overflow: ellipsis; }
.tab.on { background: var(--log-bg); color: var(--log-text); font-weight: 700; box-shadow: 0 1px 0 var(--log-bg); }
.tab.activity span { color: #7f0000; }
.tab.unread span { color: #c00000; font-weight: 700; }
.tab.mention span { color: #ff0000; font-weight: 700; text-decoration: underline; }
html[data-theme="dark"] .tab.activity span { color: #d29a6a; }
html[data-theme="dark"] .tab.unread span, html[data-theme="dark"] .tab.mention span { color: #ff8080; }
.count { font-size: 10px; padding: 0 4px; border-radius: 6px; background: #c00000; color: #fff; }

.body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 190px;
  gap: 3px;
  padding: 3px;
}
.win.hide-side .body { grid-template-columns: minmax(0, 1fr) 190px; }
.win.hide-side .side { display: none; }
.win.no-nicks .body, .win.hide-nicks .body { grid-template-columns: 200px minmax(0, 1fr); }
.win.hide-side.no-nicks .body, .win.hide-side.hide-nicks .body { grid-template-columns: minmax(0, 1fr); }
.win.hide-nicks .nicks { display: none !important; }

.side, .nicks, .main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.panel-head {
  padding: 2px 6px;
  color: #fff;
  font-weight: 700;
  background: var(--head-a);
  background: linear-gradient(180deg, var(--head-b), var(--head-a));
  border: 1px solid var(--face-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree, .nick-list, .view, .topic, .entry {
  background: var(--log-bg);
  color: var(--log-text);
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--face-dk);
}
.tree, .nick-list { flex: 1; min-height: 0; overflow: auto; padding: 2px 0; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.tree .tree-root { padding-left: 2px; }
.tree li { margin: 0; }
.tree .srv, .tree .grp { display: block; padding: 1px 4px; font-weight: 700; }
.tree .srv::before { content: "▣ "; color: #2f5fa8; }
.tree .grp::before { content: "▸ "; color: var(--muted); }
.tree a { display: block; padding: 1px 4px; color: var(--log-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree a:hover { text-decoration: underline; }
.tree a.on { background: var(--sel); color: var(--sel-text); }
.tree a.unread { color: #c00000; font-weight: 700; }
.tree a.mention { color: #ff0000; font-weight: 700; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
#nick-keys { grid-template-columns: repeat(3, 1fr); }

.sys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 2px 10px;
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset -1px -1px var(--face-lo), inset 1px 1px var(--face-lt);
  background: var(--face);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.sys:active, .sys.on {
  border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);
  box-shadow: inset 1px 1px var(--face-lo);
}
.sys.default { outline: 1px solid var(--face-dk); outline-offset: 0; }
.sys:disabled { color: var(--face-lo); text-shadow: 1px 1px var(--face-hi); cursor: default; }

.topic {
  padding: 2px 6px;
  background: var(--topic-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 2px 0 6px;
  font: 14px/1.45 var(--log-font);
  overscroll-behavior: contain;
}
.log:focus { outline: none; }
.line { margin: 0; padding: 0 6px; white-space: pre-wrap; }
.line.hl { background: var(--hl-bg); }
.line.hit { background: var(--hit-bg); }
.ts { color: var(--ts); margin-right: 4px; font-variant-numeric: tabular-nums; }
.no {
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.no:hover { color: var(--link); text-decoration: underline; }
.nk { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 700; }
.nk:hover { text-decoration: underline; }
.act, .act .tx { color: var(--act); }
.ntc .tx { color: var(--ntc); }
.ev, .line.srv { color: var(--sys); }
.ev-quit { color: var(--quit); }
.ev-kick, .line.err { color: var(--err); }
.line.motd { color: var(--motd); }
.line.whois, .line.help { color: var(--log-text); }
.line.inv { color: #b05a00; }
.line.out { color: var(--muted); }
.own .tx { color: var(--log-text); }
.ref { padding: 0 1px; border: 0; background: transparent; color: var(--link); font: inherit; text-decoration: underline; }
.older {
  display: block;
  margin: 2px auto 4px;
  border: 0;
  background: transparent;
  color: var(--link);
  font: 12px var(--ui);
  text-decoration: underline;
}

.entry { display: flex; padding: 0; }
.input {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: var(--log-text);
  font: 14px var(--log-font);
}
.input:focus { outline: none; }
.statusbar {
  padding: 2px 6px;
  border-top: 1px solid var(--face-hi);
  box-shadow: inset 0 1px var(--face-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nick {
  display: flex;
  width: 100%;
  gap: 2px;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  font: 13px/1.45 var(--log-font);
  text-align: left;
  white-space: nowrap;
}
.nick .pfx { width: 10px; flex: none; color: var(--log-text); font-weight: 700; }
.nick.off { opacity: 0.55; }
.nick.away { font-style: italic; }
.nick.on { background: var(--sel); color: var(--sel-text) !important; }
.nick.on .pfx { color: var(--sel-text); }

.nc0 { color: #00007f; } .nc1 { color: #009300; } .nc2 { color: #c00000; } .nc3 { color: #7f0000; }
.nc4 { color: #9c009c; } .nc5 { color: #ad1457; } .nc6 { color: #008080; } .nc7 { color: #5d4037; }
.nc8 { color: #a0008f; } .nc9 { color: #6b6b00; } .nc10 { color: #3a3a9a; } .nc11 { color: #007a3d; }
html[data-theme="dark"] .nc0 { color: #8ea2ff; } html[data-theme="dark"] .nc1 { color: #63d86a; }
html[data-theme="dark"] .nc2 { color: #ff7b7b; } html[data-theme="dark"] .nc3 { color: #e0a070; }
html[data-theme="dark"] .nc4 { color: #e488e4; } html[data-theme="dark"] .nc5 { color: #f48fb1; }
html[data-theme="dark"] .nc6 { color: #4fd6d6; } html[data-theme="dark"] .nc7 { color: #bcaaa4; }
html[data-theme="dark"] .nc8 { color: #f08fd8; } html[data-theme="dark"] .nc9 { color: #d6d65a; }
html[data-theme="dark"] .nc10 { color: #b0b0ff; } html[data-theme="dark"] .nc11 { color: #5fe0a0; }

.r-owner { color: #e06000; } .r-admin { color: #0b5ed7; }
html[data-theme="dark"] .r-owner { color: #ff9a3d; } html[data-theme="dark"] .r-admin { color: #5aa9ff; }
.nick.r-owner, .nick.r-admin { font-weight: 700; }
.nick.r-owner .pfx, .nick.r-admin .pfx { color: inherit; }

.fb { font-weight: 700; } .fi { font-style: italic; } .fu { text-decoration: underline; }
.fs { text-decoration: line-through; } .fm { font-family: var(--mono); }
.fr { background: var(--log-text); color: var(--log-bg); }
.k0 { color: #ffffff; } .k1 { color: #000000; } .k2 { color: #00007f; } .k3 { color: #009300; }
.k4 { color: #ff0000; } .k5 { color: #7f0000; } .k6 { color: #9c009c; } .k7 { color: #fc7f00; }
.k8 { color: #ffff00; } .k9 { color: #00fc00; } .k10 { color: #009393; } .k11 { color: #00ffff; }
.k12 { color: #0000fc; } .k13 { color: #ff00ff; } .k14 { color: #7f7f7f; } .k15 { color: #d2d2d2; }
html[data-theme="dark"] .k1 { color: #cfcfcf; } html[data-theme="dark"] .k2 { color: #7f95ff; }
html[data-theme="dark"] .k5 { color: #d97a7a; } html[data-theme="dark"] .k6 { color: #d66ad6; }
html[data-theme="dark"] .k10 { color: #3cc6c6; } html[data-theme="dark"] .k12 { color: #6b9bff; }
html[data-theme="dark"] .k14 { color: #a8a8a8; }
.kb0 { background: #ffffff; } .kb1 { background: #000000; } .kb2 { background: #00007f; } .kb3 { background: #009300; }
.kb4 { background: #ff0000; } .kb5 { background: #7f0000; } .kb6 { background: #9c009c; } .kb7 { background: #fc7f00; }
.kb8 { background: #ffff00; } .kb9 { background: #00fc00; } .kb10 { background: #009393; } .kb11 { background: #00ffff; }
.kb12 { background: #0000fc; } .kb13 { background: #ff00ff; } .kb14 { background: #7f7f7f; } .kb15 { background: #d2d2d2; }

.page { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; font-size: 13px; }
.page .log { flex: none; overflow: visible; padding: 0; }
.page-log { margin-bottom: 6px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.page-actions .addr { margin-left: auto; font-weight: 700; }
.compose { margin: 6px 0; }
.compose input, .compose textarea, .dlg input, .dlg textarea, .group input {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px var(--face-dk);
  background: var(--log-bg);
  color: var(--log-text);
  border-radius: 0;
}
.compose textarea, .dlg textarea { resize: vertical; min-height: 60px; font: 13px/1.45 var(--log-font); }
.compose .group > * + *, .group > * + * { margin-top: 4px; }
.group { margin: 6px 0; padding: 6px 8px 8px; border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }
.group legend { padding: 0 4px; }
.group p { margin: 4px 0; }
.qr {
  display: block;
  margin: 8px auto;
  width: 188px;
  height: 188px;
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.board-log { border-top: 1px solid var(--face-lo); padding-top: 4px; }
.post { padding: 4px 6px 6px; border-bottom: 1px dotted var(--face-lo); background: var(--log-bg); }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.post-title { color: var(--log-text); }
.post-body { margin: 2px 0 0 16px; white-space: pre-wrap; color: var(--log-text); font: 14px/1.5 var(--log-font); }

.dlg {
  width: min(460px, 100%);
  margin: 18px auto;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  box-shadow: inset -1px -1px var(--face-lo), inset 1px 1px var(--face-hi), 3px 3px 0 rgba(0, 0, 0, 0.18);
}
.dlg.wide { width: min(620px, 100%); }
.dlg-title {
  margin: 2px;
  padding: 3px 6px;
  color: #fff;
  font-weight: 700;
  background: var(--cap-a);
  background: linear-gradient(90deg, var(--cap-a), var(--cap-b));
}
.dlg-body { padding: 8px 10px 10px; }
.dlg-body p { margin: 4px 0 8px; }
.dlg-form { display: grid; gap: 6px; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.field { display: grid; gap: 2px; }
.field small, .hint { color: var(--muted); font-size: 11px; margin: 0; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.rules { margin: 0; padding-left: 18px; color: var(--muted); }
.rules li.ok { color: var(--sys); }
.rules li.ok::marker { content: "✓ "; }
.props { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.props dt { color: var(--muted); }
.props dd { margin: 0; overflow-wrap: anywhere; }
.addr-preview { font: 700 18px var(--log-font); overflow-wrap: anywhere; }
.addr-preview b { color: var(--link); }

.grid-wrap { min-height: 0; overflow: auto; background: var(--log-bg); border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }
.grid { width: 100%; border-collapse: collapse; background: var(--log-bg); color: var(--log-text); }
.grid th {
  position: sticky;
  top: 0;
  padding: 2px 6px;
  text-align: left;
  font-weight: 400;
  background: var(--face);
  color: var(--text);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.grid td { padding: 2px 6px; border-bottom: 1px solid var(--face-lt); vertical-align: top; }
.grid td.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.grid tbody tr { cursor: default; }
.grid tbody tr:hover { background: var(--hit-bg); }
.grid tr.on, .grid tr.on:hover { background: var(--sel); color: var(--sel-text); }
.grid tr.unread td { font-weight: 700; }
.list-tools { padding: 4px 6px; color: var(--muted); font: 12px var(--ui); }
.view > .log .grid { font: 13px var(--log-font); }
.mail-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; min-height: 260px; }
.mail-split .grid-wrap { max-height: 46vh; }
.reader { background: var(--log-bg); border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); padding: 4px 0 !important; max-height: 46vh; overflow: auto !important; }
.reader-title { margin: 6px 6px 2px; font-size: 16px; }
.reader-body { margin: 0 6px; white-space: pre-wrap; }

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 24px));
  margin: 0;
  padding: 6px 10px;
  background: var(--tip);
  color: var(--tip-text);
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.toast[data-kind="bad"] { border-color: #c00000; color: #c00000; }
html[data-theme="dark"] .toast[data-kind="bad"] { color: #ff8a8a; border-color: #ff8a8a; }

@media (max-width: 900px) {
  .body, .win.hide-side .body, .win.no-nicks .body, .win.hide-nicks .body,
  .win.hide-side.no-nicks .body, .win.hide-side.hide-nicks .body { grid-template-columns: minmax(0, 1fr); position: relative; }
  .side, .nicks {
    position: absolute;
    z-index: 20;
    top: 3px;
    bottom: 3px;
    width: min(260px, 80vw);
    padding: 3px;
    background: var(--face);
    box-shadow: 3px 0 0 rgba(0, 0, 0, 0.25);
    display: none !important;
  }
  .side { left: 3px; }
  .nicks { right: 3px; }
  .win.show-side .side, .win.show-nicks .nicks:not([hidden]) { display: flex !important; }
  .tool .tl { display: none; }
  .tool { min-width: 32px; }
  .menubar > button { padding: 4px 8px; }
  .mail-split { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .input, .compose input, .compose textarea, .dlg input, .dlg textarea, .group input { font-size: 16px; }
  .sys { min-height: 32px; }
  .tab { padding: 6px 12px 5px; }
  .nick { padding: 4px 8px; }
  .tree a { padding: 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .caption, .dlg-title, .panel-head { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}