/* ZfPanel, in the look of zombfort.de (WoltLab's blue style, Barlow). Dark by default; light is the website's own
   colors. theme.js sets data-theme on <html> before the page is drawn, the button top right switches. */

/* Barlow by Jeremy Tribby, SIL Open Font License 1.1 (the files zombfort.de uses) */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/barlow-light.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/barlow-regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/barlow-medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/barlow-semibold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/barlow-bold.woff2") format("woff2"); }

:root {
  --radius: 2px;
  --boundary: 1400px;
  --sans: "Barlow", Helvetica, Verdana, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --header-text: #fff;
}

/* zombfort.de */
:root[data-theme="light"] {
  color-scheme: light;
  --nav: #065c94;
  --nav-hover: #044873;
  --masthead: #0b78bf;
  --crumbs: #eceff1;
  --crumbs-text: #7d8287;
  --footer: #044873;
  --footer-text: #d9dcde;

  --bg: #fafafa;
  --card: #fff;
  --card-alt: #ecf1f7;
  --sunken: #f2f4f6;
  --soft: #eceff1;
  --line: #e0e0e0;
  --line-strong: #cfd8dc;
  --text: #444;
  --text-2: #5c6166;
  --muted: #7d8287;
  --faint: #a3a9ae;
  --heading: #044873;
  --accent: #0b78bf;
  --accent-hover: #044873;
  --accent-text: #0b7abf;
  --on-accent: #fff;
  --button: #cfd8dc;
  --button-text: #212121;
  --button-hover: #78909c;
  --button-hover-text: #fff;
  --input-bg: #fff;
  --input-focus-bg: #f1f6fb;
  --mc-bg: #24282c;

  --red: #cc0001;
  --green: #3c763d;
  --yellow: #946200;
  --orange: #d43600;
  --blue: #0b78bf;
  --purple: #7b3fbf;
  --teal: #00838f;
  --pink: #c2185b;
  --shadow: 0 2px 10px rgba(0, 0, 0, .16);
  --backdrop: rgba(44, 62, 80, .55);
}

/* the same blues, at night */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --nav: #0a253b;
  --nav-hover: #061a2b;
  --masthead: #0c3654;
  --crumbs: #161d24;
  --crumbs-text: #7f8b97;
  --footer: #0a1f31;
  --footer-text: #8fa3b5;

  --bg: #12171c;
  --card: #192129;
  --card-alt: #1c2733;
  --sunken: #0d1115;
  --soft: #222c36;
  --line: #28323c;
  --line-strong: #36434f;
  --text: #cfd7de;
  --text-2: #aab5bf;
  --muted: #8794a0;
  --faint: #5f6b77;
  --heading: #6db5ea;
  --accent: #0b78bf;
  --accent-hover: #1a8ad6;
  --accent-text: #5aaee9;
  --on-accent: #fff;
  --button: #26313b;
  --button-text: #dde4ea;
  --button-hover: #34424f;
  --button-hover-text: #fff;
  --input-bg: #0f1419;
  --input-focus-bg: #111b24;
  --mc-bg: #0c0c12;

  --red: #f26d6d;
  --green: #6ccf7e;
  --yellow: #e5c05c;
  --orange: #f29b5e;
  --blue: #5aaee9;
  --purple: #b794f6;
  --teal: #4fd1c5;
  --pink: #f48fb1;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --backdrop: rgba(5, 10, 15, .7);
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--line-strong) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.48 var(--sans);
}

h1, h2, h3 { margin: 0 0 .6em; color: var(--heading); }
h1 { font-size: 1.75rem; font-weight: 300; line-height: 1.15; }
h2 { font-size: 1.25rem; font-weight: 400; line-height: 1.28; }
h3 { font-size: .82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
p { margin: .4em 0; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--soft); padding: .1em .4em; border-radius: var(--radius); }
.muted { color: var(--muted); }
.small { font-size: .87em; }
[hidden] { display: none !important; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* ---- page header (nav bar, logo, breadcrumbs) and footer, like zombfort.de ---- */
.boundary { width: 100%; max-width: var(--boundary); margin: 0 auto; padding: 0 24px; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--nav); color: var(--header-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.topbar-inner { display: flex; align-items: stretch; height: 50px; }
.tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; height: 50px; padding: 0 15px;
  background: none; border: 0; border-radius: 0; color: var(--header-text);
  font: inherit; font-weight: 400; cursor: pointer;
}
.tabs button:hover, .tabs button.active { background: var(--nav-hover); color: var(--header-text); }
.tabs button.active { box-shadow: inset 0 -3px 0 var(--accent-text); }
.nav-label { display: none; align-items: center; height: 50px; padding: 0 15px; background: var(--nav-hover); }
#tabs[hidden] ~ .nav-label { display: flex; }
.theme-toggle {
  margin-left: auto; flex: none; width: 50px; height: 50px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 0; color: var(--header-text);
}
.theme-toggle:hover { background: var(--nav-hover); color: var(--header-text); }
.theme-toggle svg { width: 20px; height: 20px; }
[data-theme="light"] .theme-toggle .icon-sun, :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }

.masthead { background: var(--masthead); color: var(--header-text); }
.masthead-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; padding-bottom: 24px; }
.logo { display: flex; align-items: center; gap: 14px; }
.logo img { display: block; height: 64px; width: auto; }
.logo-sub { font-size: 2.3rem; font-weight: 300; line-height: 1; color: rgba(255, 255, 255, .78); letter-spacing: .02em; padding-top: 4px; }
.session { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: rgba(255, 255, 255, .9); }
.session-player { margin-right: 6px; }
.session-player::before { content: "●"; color: #7ee08f; margin-right: 6px; font-size: .8em; }
.session button.ghost { color: var(--header-text); border: 1px solid rgba(255, 255, 255, .35); }
.session button.ghost:hover { background: rgba(255, 255, 255, .15); color: var(--header-text); }
.session .busy { color: #ffdb7e; }

.crumbs { background: var(--crumbs); color: var(--crumbs-text); font-size: .87rem; }
.crumbs .boundary { padding-top: 10px; padding-bottom: 10px; }
.crumbs .sep, #crumb:not(:empty)::before, #crumb-page:not(:empty)::before { color: var(--faint); margin: 0 8px; }
#crumb:not(:empty)::before, #crumb-page:not(:empty)::before { content: "›"; }
#crumb, #crumb-page { color: var(--text); }

.page-footer { background: var(--footer); color: var(--footer-text); text-align: center; font-size: .87rem; padding: 18px 0; margin-top: 24px; }
.page-footer a { color: var(--header-text); }

/* ---- layout ---- */
main { flex: 1 0 auto; width: 100%; padding: 24px; max-width: var(--boundary); margin: 0 auto; }
.screen.center { display: grid; place-items: center; min-height: 52vh; }
.split { display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: start; }
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 74px; max-height: calc(100vh - 94px); }
.detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  /* minmax(0, …): long names and wide tables must not make the page wider than the phone; they scroll in their card */
  .split { grid-template-columns: minmax(0, 1fr); }
  .detail .card, #screen-announcements .card, #screen-accounts .card, #screen-audit .card { overflow-x: auto; }
  .sidebar { position: static; max-height: none; }
  .boundary { padding: 0 16px; }
  main { padding: 16px; }
  .masthead-inner { padding-top: 16px; padding-bottom: 16px; }
  .logo img { height: 40px; }
  .logo-sub { font-size: 1.45rem; padding-top: 2px; }
  .session { margin-left: 0; width: 100%; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.sidebar .card { background: var(--card-alt); border-color: transparent; }
.card.narrow { max-width: 460px; width: 100%; text-align: center; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.empty { color: var(--muted); padding: 40px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* ---- inputs ---- */
input, select {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
  font: inherit;
}
input:hover, select:hover { border-color: var(--accent); }
input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--input-focus-bg); box-shadow: 0 0 0 1px var(--accent); }
input[type=color] { padding: 2px; width: 42px; height: 36px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label { display: block; color: var(--muted); font-size: .87rem; margin-bottom: 4px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }
.row > input, .row > select { flex: 1 1 0; width: auto; }
.row > input[type=color] { flex: none; width: 42px; }
.row > button { flex: none; }
.weight { max-width: 100px; }
.field { margin-bottom: 14px; }
.hint { color: var(--muted); font-size: .83rem; margin-top: 4px; }

button {
  font: inherit; font-weight: 400;
  border-radius: var(--radius); padding: 7px 16px;
  border: 1px solid transparent;
  background: var(--button); color: var(--button-text);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
button:hover { background: var(--button-hover); color: var(--button-hover-text); }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { background: var(--button); color: var(--button-text); }
button.primary { background: var(--accent); color: var(--on-accent); }
button.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
button.primary:disabled:hover { background: var(--accent); }
button.danger { color: var(--red); }
button.danger:hover { background: var(--red); color: #fff; }
button.ghost { background: none; color: var(--muted); }
button.ghost:hover { background: var(--soft); color: var(--text); }
button.icon { padding: 4px 8px; line-height: 1; }
.create { display: flex; flex-direction: column; gap: 10px; }
.create h2 { margin: 0; }

/* ---- lists ---- */
.list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 2px; }
.list-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid transparent;
  padding: 9px 12px;
}
.list-item:hover { background: var(--card-alt); color: var(--text); }
.list-item.selected { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.list-item .name { font-weight: 600; }
.badge {
  display: inline-block; min-width: 2.6em; text-align: center;
  font-family: var(--mono); font-size: .76rem;
  background: var(--soft); color: var(--text-2);
  border-radius: var(--radius); padding: 2px 6px;
}
.list-item .preview { margin-left: auto; font-size: .85rem; padding: 2px 8px; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }

/* ---- Minecraft-style preview (chat stays dark, like in the game) ---- */
.preview {
  font-family: var(--mono);
  background: var(--mc-bg);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 10px 14px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
  white-space: pre;
  overflow-x: auto;
}
.preview.big { font-size: 1.15rem; padding: 14px 18px; }

/* ---- detail parts ---- */
.title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.title h1 { margin: 0; }
.title .spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }

.swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.swatch {
  width: 24px; height: 24px; padding: 0; border-radius: var(--radius);
  border: 2px solid transparent; outline: 1px solid var(--line-strong);
}
.swatch.selected { border-color: var(--text); }
.swatch.none { background: repeating-linear-gradient(45deg, var(--soft) 0 4px, var(--card) 4px 8px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--soft); border-radius: var(--radius);
  padding: 3px 4px 3px 10px; font-size: .9rem;
}
.chip .expires { color: var(--yellow); font-size: .8em; }
.chip .permanent { color: var(--muted); font-size: .8em; }
.chip button { padding: 0 7px; border: 0; background: none; color: var(--muted); }
.chip button:hover { background: var(--line-strong); color: var(--red); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: .83rem; padding: 6px 8px; border-bottom: 1px solid var(--accent); }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.node { font-family: var(--mono); font-size: .88rem; word-break: break-all; }
td.actions { text-align: right; width: 1%; white-space: nowrap; }
.value {
  font-family: var(--mono); font-size: .8rem; border-radius: var(--radius); padding: 2px 10px; border: 0;
}
.value.true { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.value.false { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.value.true:hover, .value.false:hover { background: var(--button-hover); color: var(--button-hover-text); }
.server { color: var(--blue); font-family: var(--mono); font-size: .8rem; }
.expires { color: var(--yellow); font-size: .85rem; }
.add-row { display: grid; grid-template-columns: 1fr 110px 140px 130px auto; gap: 8px; margin-top: 12px; }
@media (max-width: 1100px) { .add-row { grid-template-columns: 1fr 1fr; } }

/* ---- waiting screen ---- */
.code {
  font-family: var(--mono); font-size: 2.6rem; font-weight: 700; letter-spacing: .25em;
  color: var(--accent-text); margin: 18px 0; padding: 12px; border-radius: var(--radius);
  background: var(--sunken); border: 1px solid var(--line);
}

/* ---- audit ---- */
.audit { display: flex; flex-direction: column; }
.audit-entry { display: grid; grid-template-columns: 150px 130px 1fr; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.audit-entry:last-child { border-bottom: 0; }
.audit-entry .time { color: var(--muted); font-family: var(--mono); font-size: .82rem; }
.audit-entry .who { color: var(--text-2); font-weight: 500; }
.audit-entry .via { font-size: .74rem; color: var(--muted); margin-left: 6px; font-weight: 400; }
@media (max-width: 860px) { .audit-entry { grid-template-columns: 1fr; gap: 2px; } }

/* ---- toasts ---- */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.toast {
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--green);
  padding: 10px 16px; border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 420px; animation: toast-in .15s ease-out;
}
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.spaced { margin-top: 12px; }

/* ==== panel ==================================================================================== */

.busy { color: var(--orange); font-size: .87rem; }
.busy::before { content: "◌"; display: inline-block; margin-right: 6px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- plugin list ---- */
.toolbar { display: flex; flex-direction: column; gap: 10px; }
.toolbar .row > button { flex: 1 1 0; }
.filters { display: flex; gap: 4px; }
.filters button { flex: 1; padding: 5px 8px; font-size: .87rem; background: var(--card); border-color: var(--line); color: var(--text-2); }
.filters button:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-hover-text); }
.filters button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: var(--text); }
label.check input { width: auto; }
.list-item .avatar { flex: none; }
.list-item .text { display: flex; flex-direction: column; min-width: 0; }
.list-item .text .sub { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .flags { margin-left: auto; display: flex; gap: 4px; flex: none; }

.avatar {
  width: 32px; height: 32px; border-radius: var(--radius); object-fit: cover;
  display: grid; place-items: center; font-weight: 600; color: var(--on-accent); background: var(--accent);
}
.avatar.big { width: 56px; height: 56px; font-size: 1.5rem; }
img.avatar { image-rendering: pixelated; background: none; }

.flag { font-size: .74rem; font-weight: 600; border-radius: var(--radius); padding: 1px 8px; }
.flag.update { background: color-mix(in srgb, var(--yellow) 20%, transparent); color: var(--yellow); }
.flag.restart { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.flag.failed { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.flag.unknown { background: var(--soft); color: var(--muted); }

/* ---- plugin detail ---- */
.plugin-head { display: flex; gap: 16px; align-items: flex-start; }
.plugin-head .info { flex: 1; min-width: 0; }
.plugin-head h1 { margin: 0 0 4px; }
.source-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.source-line a { color: var(--accent-text); }

.state { font-size: .8rem; font-weight: 600; border-radius: var(--radius); padding: 2px 8px; white-space: nowrap; }
.state.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.state.restart { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.state.failed { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.state.disabled, .state.unknown { background: var(--soft); color: var(--muted); }
.state.template { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.update { color: var(--yellow); white-space: nowrap; }
td.file { font-family: var(--mono); font-size: .8rem; color: var(--muted); word-break: break-all; }
td.version { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }

.channel { font-size: .74rem; font-weight: 600; border-radius: var(--radius); padding: 1px 7px; text-transform: uppercase; letter-spacing: .04em; }
.channel.release { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.channel.beta { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.channel.alpha { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.mc { font-size: .74rem; border-radius: var(--radius); padding: 1px 7px; background: var(--soft); color: var(--muted); }
.mc.yes { color: var(--blue); }

.releases { display: flex; flex-direction: column; }
.release { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.release:last-child { border-bottom: 0; }
.release .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.release .top .version { font-family: var(--mono); font-weight: 600; }
.release .top .date { color: var(--muted); font-size: .84rem; }
.release .top .spacer { flex: 1; }
.release details { margin-top: 6px; }
.release summary { cursor: pointer; color: var(--muted); font-size: .87rem; }
.changelog { white-space: pre-wrap; font-size: .87rem; color: var(--text-2); background: var(--sunken); border-radius: var(--radius); padding: 10px; max-height: 320px; overflow: auto; margin-top: 6px; }

.history-entry { display: flex; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.history-entry:last-child { border-bottom: 0; }
.history-entry .what { flex: 1; min-width: 0; word-break: break-word; }
.history-entry .when { color: var(--muted); font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
.history-entry.undone .what { color: var(--muted); text-decoration: line-through; }
.notice { border-radius: var(--radius); padding: 10px 12px; border-left: 4px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); }
.notice.error { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.notice.ok { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }

/* ---- servers ---- */
.network-maintenance { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.network-maintenance h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.network-maintenance .nm-text { flex: 1 1 320px; min-width: 0; word-break: break-word; }
.network-maintenance.on { border-left: 4px solid var(--red); }
.network-maintenance.planned { border-left: 4px solid var(--yellow); }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.server-card h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.server-card .players { color: var(--text-2); margin: 6px 0 12px; min-height: 1.5em; word-break: break-word; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--faint); }
.dot.active { background: var(--green); }
.dot.failed { background: var(--red); }
.dot.activating, .dot.deactivating { background: var(--orange); }
.dot.template { background: var(--blue); }

/* ---- dialogs ---- */
dialog {
  border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 0;
  background: var(--card); color: var(--text); box-shadow: var(--shadow);
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
dialog::backdrop { background: var(--backdrop); }
dialog:focus, dialog:focus-visible { outline: none; }
#dialog-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-head h2 { margin: 0; font-size: 1.35rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.server-choice { display: flex; flex-direction: column; gap: 6px; }
.server-choice label.check { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.server-choice label.check:hover { background: var(--card-alt); }
.server-choice .what { color: var(--muted); font-size: .82rem; margin-left: auto; font-family: var(--mono); text-align: right; }
.joblog {
  font-family: var(--mono); font-size: .8rem; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; max-height: 240px; overflow: auto; white-space: pre-wrap; color: var(--text-2);
}
.report { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.report .title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.report ul { margin: 0; padding-left: 20px; }
.report li { font-size: .87rem; word-break: break-word; }
.report .problems { font-family: var(--mono); font-size: .78rem; color: var(--muted); max-height: 180px; overflow: auto; }
.search-results { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.search-results .list-item .text .sub { white-space: normal; }
input[type=file] { padding: 6px; }

/* ---- minigames ---- */
dialog.wide { width: min(1100px, calc(100vw - 32px)); }
textarea.editor {
  width: 100%; min-height: 55vh; resize: vertical;
  background: var(--sunken); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px;
  font: .85rem/1.5 var(--mono); tab-size: 2; white-space: pre; overflow: auto;
}
textarea.editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea.editor.itemlist { min-height: 9em; }
.filter-result { margin-top: 10px; }
.filter-result p { margin: 6px 0; overflow-wrap: anywhere; }
.joblog.log { max-height: 65vh; margin: 0; }
#game-live { gap: 16px; }
.pos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1; }
.pos input { min-width: 0; font-family: var(--mono); font-size: .85rem; padding: 6px 8px; }
.poslist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.poslist .index { width: 2ch; text-align: right; }
.groups { display: flex; flex-direction: column; gap: 10px; }
.group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.field.wide { grid-column: 1 / -1; }
.dialog-actions .spacer { flex: 1; }

/* ---- loot editor ---- */
#dialog-body h3 { margin: 6px 0 0; font-size: 1.05rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--heading); }
#dialog-body h3 + .hint { margin-top: 0; }
table.loot td { vertical-align: top; }
table.loot th:first-child { width: 34%; }
table.loot input { padding: 5px 8px; }
input.num { width: 70px; flex: none; }
.loot-list { display: flex; flex-direction: column; gap: 4px; }
.loot-line { display: flex; gap: 6px; align-items: center; }
.loot-line > input:not(.num) { flex: 1 1 auto; min-width: 0; }
.loot-line > input.num { flex: none; }
td.chance { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); padding-top: 13px; }
table.loot td.actions { padding-top: 10px; }
table.loot td.once { padding-top: 12px; text-align: center; }
button.small-button { font-size: .82rem; padding: 2px 8px; margin-top: 4px; }
input.invalid { border-color: var(--red); color: var(--red); }
table.kit th:first-child { width: auto; }
table.kit td.slot { white-space: nowrap; padding-top: 13px; }
tr.off td { opacity: .6; }
td.nowrap { white-space: nowrap; }
.shop-group { display: flex; flex-direction: column; gap: 12px; }
h2.shop-group-head { margin: 10px 0 0; }
h3.shop-category-head { margin: 0; font-size: 1.15rem; font-weight: 400; color: var(--heading); text-transform: none; letter-spacing: 0; }

/* ---- login ---- */
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 8px; }
.login-form .notice { margin: 0; }
.or { color: var(--muted); font-size: .87rem; margin-top: 16px; }

/* ---- moderation ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.stat-value { font-size: 2rem; font-weight: 300; color: var(--heading); line-height: 1.2; }
.stat-label { color: var(--muted); font-size: .87rem; }
.ptype { font-size: .77rem; font-weight: 600; border-radius: var(--radius); padding: 2px 8px; white-space: nowrap; }
.ptype.BAN, .ptype.IPBAN { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.ptype.MUTE { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.ptype.KICK { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.ptype.WARN { background: var(--soft); color: var(--text-2); }
button.link { background: none; border: 0; padding: 0; color: var(--accent-text); font-weight: 500; white-space: normal; text-align: left; overflow-wrap: anywhere; }
button.link:hover { text-decoration: underline; background: none; color: var(--accent-text); }
td.reason { word-break: break-word; min-width: 9em; }
td.who { max-width: 14em; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
td.when { white-space: nowrap; color: var(--muted); font-size: .87rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar > input, .filter-bar > select { width: auto; flex: 1 1 140px; }
.filter-bar > input[type=date] { flex: 0 1 150px; }
.filter-bar > label.check { flex: none; }
.button-group { display: flex; flex-wrap: wrap; gap: 6px; }
button.toggle { padding: 4px 12px; font-size: .87rem; background: var(--card); border-color: var(--line); color: var(--text-2); }
button.toggle:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-hover-text); }
button.toggle.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.log { display: flex; flex-direction: column; }
.log-entry { display: grid; grid-template-columns: 140px 92px 130px 96px 1fr; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); align-items: baseline; }
.log-entry.no-name { grid-template-columns: 140px 92px 96px 1fr; }
.log-entry:last-child { border-bottom: 0; }
.log-entry .time { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.log-entry .text { word-break: break-word; white-space: pre-wrap; }
.log-entry .text.cmd { font-family: var(--mono); font-size: .85rem; }
.log-entry .to { color: var(--accent-text); }
.log-entry .meta { color: var(--muted); font-family: var(--mono); font-size: .8rem; margin-left: 8px; }
.check-name { font-weight: 600; }
.player-cell { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  .log-entry, .log-entry.no-name { grid-template-columns: 1fr; gap: 0; }
  .grid2 { grid-template-columns: 1fr; }
}
.player-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 8px 0 0; font-size: .92rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; word-break: break-all; }
.note { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; }
.note + .note { margin-top: 8px; }
.note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.note-head .spacer { flex: 1; }
.note-text { white-space: pre-wrap; word-break: break-word; }
textarea.note-input {
  width: 100%; min-height: 4.5em; resize: vertical; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; font: inherit;
}
textarea.note-input:focus { outline: none; border-color: var(--accent); background: var(--input-focus-bg); box-shadow: 0 0 0 1px var(--accent); }
.online-head { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px; }
.qr-box { display: flex; justify-content: center; }
.qr { width: 220px; height: 220px; image-rendering: pixelated; border-radius: var(--radius); }
.secret { font-family: var(--mono); word-break: break-all; text-align: center; color: var(--text-2); margin: 0; }
.linkbox { font-family: var(--mono); font-size: .85rem; word-break: break-all; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; user-select: all; }

/* ---- permissions ---- */
#perm-group-create .row > button { flex: none; }
#perm-group-create .weight { flex: 0 0 76px; }
input.perm-filter { max-width: 260px; padding: 5px 10px; }

/* ---- announcements ---- */
.preview.wrap { white-space: pre-wrap; overflow-wrap: anywhere; padding: 6px 10px; }
textarea.editor.short { min-height: 4.5em; }
td.ann-index { color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
td.ann-click { font-family: var(--mono); font-size: .8rem; color: var(--muted); word-break: break-all; max-width: 260px; }
.ann-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
#screen-announcements .card + .card { margin-top: 16px; }

/* ---- wiki ---- */
.list-item .text .sub.wrap { white-space: normal; }
mark { background: color-mix(in srgb, var(--yellow) 35%, transparent); color: inherit; border-radius: var(--radius); padding: 0 1px; }
.wiki-page { padding: 24px 28px; display: flow-root; }
.wiki-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wiki-titles { flex: 1; min-width: 0; }
.wiki-titles h1 { margin: 0; overflow-wrap: anywhere; }
.wiki-category { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.wiki-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wiki-meta { color: var(--muted); font-size: .85rem; margin: 6px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wiki-toc { float: right; width: 250px; margin: 0 0 16px 28px; padding: 12px 16px; background: var(--card-alt); border-radius: var(--radius); font-size: .92rem; }
.wiki-toc-title { font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.wiki-toc a { display: block; padding: 2px 0; }
.wiki-toc a.sub { padding-left: 14px; font-size: .88rem; }
@media (max-width: 1100px) { .wiki-toc { float: none; width: auto; margin: 0 0 16px; } }

/* break-word, not anywhere: tables keep whole words in narrow columns */
.wiki-content { font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.wiki-content > :first-child { margin-top: 0; }
.wiki-content h2, .wiki-content h3, .wiki-content h4 { scroll-margin-top: 70px; color: var(--heading); text-transform: none; letter-spacing: 0; }
/* next to the contents box instead of under it */
.wiki-content h2, .wiki-content .wiki-alert, .wiki-content blockquote, .wiki-content pre.wiki-code { display: flow-root; }
.wiki-content h2 { font-size: 1.45rem; font-weight: 400; margin: 1.3em 0 .5em; padding-bottom: 4px; border-bottom: 1px solid var(--accent); }
.wiki-content h3 { font-size: 1.2rem; font-weight: 500; margin: 1.2em 0 .4em; }
.wiki-content h4 { font-size: 1.05rem; font-weight: 600; margin: 1em 0 .3em; }
.wiki-content p { margin: .7em 0; }
.wiki-content ul, .wiki-content ol { margin: .6em 0; padding-left: 1.6em; }
.wiki-content li { margin: .2em 0; }
.wiki-content li > ul, .wiki-content li > ol { margin: .2em 0; }
.wiki-content li.task { list-style: none; margin-left: -1.4em; }
.wiki-content li.task input { width: auto; margin: 0 8px 0 0; vertical-align: -2px; }
.wiki-content li.task.done { color: var(--muted); }
.wiki-content blockquote { margin: .8em 0; padding: 2px 14px; border-left: 3px solid var(--line-strong); color: var(--text-2); }
.wiki-content hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.wiki-content pre.wiki-code { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: .8em 0; overflow-x: auto; font: .88rem/1.55 var(--mono); }
.wiki-content pre code { background: none; padding: 0; font-size: inherit; }
.wiki-content table.wiki-table { width: auto; min-width: 50%; margin: .8em 0; }
.wiki-content table.wiki-table th, .wiki-content table.wiki-table td { border: 1px solid var(--line); padding: 6px 12px; vertical-align: top; }
.wiki-content table.wiki-table th { background: var(--card-alt); color: var(--heading); font-size: .92rem; }
.wiki-content .align-center { text-align: center; }
.wiki-content .align-right { text-align: right; }
.wiki-content .table-scroll { margin: .8em 0; }
.wiki-content .table-scroll table.wiki-table { margin: 0; }
.wiki-img-link { display: inline-block; max-width: 100%; }
.wiki-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.wiki-link.missing { color: var(--red); text-decoration: none; border-bottom: 1px dashed currentColor; }
.wiki-alert { margin: .9em 0; padding: 10px 14px; border-left: 4px solid var(--blue); border-radius: var(--radius); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.wiki-alert.ok { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.wiki-alert.warn { border-left-color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.wiki-alert-title { font-weight: 600; color: var(--blue); }
.wiki-alert.ok .wiki-alert-title { color: var(--green); }
.wiki-alert.warn .wiki-alert-title { color: var(--orange); }
.wiki-alert > p:first-of-type { margin-top: .2em; }
.wiki-alert > :last-child { margin-bottom: 0; }

.wiki-editing { display: flex; flex-direction: column; gap: 12px; }
.wiki-edit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiki-edit-head h2 { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wiki-edit-fields { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.wiki-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--card-alt); border-radius: var(--radius); }
.wiki-toolbar button { padding: 3px 10px; font-size: .87rem; color: var(--text-2); }
.wiki-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wiki-edit-text { display: flex; flex-direction: column; }
textarea.editor.wiki-editor { flex: 1; min-height: 62vh; white-space: pre-wrap; overflow-wrap: anywhere; }
.wiki-preview-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; max-height: 75vh; overflow: auto; }
.wiki-preview-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 1100px) {
  .wiki-edit-grid, .wiki-edit-fields { grid-template-columns: minmax(0, 1fr); }
  textarea.editor.wiki-editor { min-height: 40vh; }
}

.diff { font: .85rem/1.5 var(--mono); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.diff-line { display: flex; white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 10px; }
.diff-sign { flex: none; width: 2.5ch; text-align: center; color: var(--muted); user-select: none; }
.diff-line.add { background: color-mix(in srgb, var(--green) 14%, transparent); }
.diff-line.add .diff-sign { color: var(--green); }
.diff-line.del { background: color-mix(in srgb, var(--red) 14%, transparent); }
.diff-line.del .diff-sign { color: var(--red); }
.diff-line.ctx { color: var(--text-2); }
.diff-gap { color: var(--faint); text-align: center; background: var(--sunken); font-size: .8rem; }
td.wiki-delta { font: .85rem var(--mono); font-variant-numeric: tabular-nums; }
td.wiki-delta.plus { color: var(--green); }
td.wiki-delta.minus { color: var(--red); }

/* ---- claims ---- */
.claim-status { font-size: .85rem; border-radius: var(--radius); padding: 2px 8px; background: var(--soft); }
.claim-status.open { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.claim-status.approved { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.claim-status.denied { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.claim-status.free { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
#claims-list td .player-cell + .player-cell, #claims-spawn td .player-cell + .player-cell { margin-left: 10px; }
td.nowrap { white-space: nowrap; }
.shop-group { display: flex; flex-direction: column; gap: 12px; }
h2.shop-group-head { margin: 10px 0 0; }
h3.shop-category-head { margin: 0; font-size: 1.15rem; font-weight: 400; color: var(--heading); text-transform: none; letter-spacing: 0; }
.claims-filter { max-width: 260px; }

/* ---- texts (the messages of our plugins) ---- */
.badge.changed { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); font-family: var(--sans); }
.text-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.text-filter input { flex: 1 1 260px; width: auto; }
.text-filter .filters { flex: 0 1 340px; }
.text-list { display: flex; flex-direction: column; gap: 12px; }
.text-entry { padding: 14px 16px; transition: box-shadow .3s; }
.text-entry.flash { box-shadow: 0 0 0 2px var(--accent-text); }
.text-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.text-head .spacer { flex: 1; }
.text-head .small-button { margin-top: 0; }
.text-key { font-size: .9rem; background: none; padding: 0; color: var(--heading); word-break: break-all; }
.text-placeholders { color: var(--muted); font-size: .82rem; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.text-placeholders .ph { font-family: var(--mono); font-size: .78rem; background: var(--soft); color: var(--text-2); border-radius: var(--radius); padding: 0 5px; }
.text-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .text-sides { grid-template-columns: minmax(0, 1fr); } }
.text-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.text-lang { display: flex; gap: 8px; align-items: baseline; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.text-lang .changed-mark { color: var(--yellow); text-transform: none; letter-spacing: 0; font-weight: 400; }
.text-side textarea {
  width: 100%; resize: vertical; min-height: 0;
  font: .85rem/1.45 var(--mono); padding: 7px 10px;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.text-side textarea:focus { outline: none; border-color: var(--accent); background: var(--input-focus-bg); box-shadow: 0 0 0 1px var(--accent); }
.text-side textarea.dirty { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.text-preview {
  font: .95rem/1.45 var(--mono); background: var(--mc-bg); color: #ffffff; border-radius: var(--radius);
  padding: 8px 12px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); white-space: pre-wrap; overflow-wrap: anywhere;
}
.text-preview.discord { font-family: var(--sans); background: #313338; color: #dbdee1; text-shadow: none; }
.text-preview .ph { outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: 1px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.text-preview .interactive { border-bottom: 1px dotted currentColor; cursor: help; }
.text-preview .obfuscated { filter: blur(1.5px); }
.text-warnings { margin: 0; padding-left: 18px; color: var(--yellow); font-size: .83rem; }
.text-warnings:empty { display: none; }
.text-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.text-actions:not(:has(button:not([hidden]))) { display: none; }
.text-actions .small-button { margin-top: 0; }
.text-original summary { color: var(--muted); font-size: .82rem; cursor: pointer; }
.text-original pre, .text-history-text pre {
  margin: 4px 0 0; font: .82rem/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--sunken); border-radius: var(--radius); padding: 6px 10px; color: var(--text-2);
}
.text-history-list { display: flex; flex-direction: column; gap: 12px; max-height: 65vh; overflow-y: auto; margin-top: 12px; }
.text-history-entry { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.text-history-entry:first-child { border-top: 0; padding-top: 0; }
.text-history-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.text-history-text pre { align-self: stretch; }

/* ---- to-do board ---- */
.todo-bar { flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; }
.todo-bar input[type=search] { flex: 0 1 320px; width: auto; }
.todo-bar label.check { flex: none; }
.todo-bar .spacer { flex: 1; }
.todo-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.todo-column {
  flex: 1 0 270px; max-width: 460px; display: flex; flex-direction: column; gap: 8px;
  background: var(--card-alt); border-radius: var(--radius); padding: 10px;
}
.todo-column-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.todo-column-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-column-head .badge { min-width: 2em; }
.todo-cards { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.todo-none { margin: 0; padding: 12px; text-align: center; color: var(--faint); font-size: .87rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.todo-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius);
  padding: 9px 11px; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.todo-card:hover { border-color: var(--line-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.todo-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.todo-card.taken { border-left-color: var(--green); }
.todo-card.mine { border-left-color: var(--accent-text); }
.todo-card.dragging { opacity: .35; }
.todo-card img { pointer-events: none; }
.todo-title { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.todo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--muted); }
.todo-meta:empty { display: none; }
.todo-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.todo-meta-item.complete { color: var(--green); }
.todo-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.todo-due { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius); padding: 1px 6px; margin-left: -6px; }
.todo-due.overdue { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.todo-due.today { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 16%, transparent); }
.todo-due.soon { color: var(--yellow); }
.todo-due.done { color: var(--green); }
.todo-workers { display: inline-flex; align-items: center; margin-left: auto; }
.todo-workers .avatar { width: 22px; height: 22px; font-size: .7rem; border: 2px solid var(--card); }
.todo-workers .avatar + .avatar { margin-left: -6px; }
.todo-more { font-size: .75rem; margin-left: 4px; }
.todo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-tag { font-size: .74rem; font-weight: 600; border-radius: var(--radius); padding: 1px 7px; line-height: 1.5; }
.todo-tag.t0 { color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); }
.todo-tag.t1 { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.todo-tag.t2 { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 16%, transparent); }
.todo-tag.t3 { color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent); }
.todo-tag.t4 { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }
.todo-tag.t5 { color: var(--purple); background: color-mix(in srgb, var(--purple) 16%, transparent); }
.todo-tag.t6 { color: var(--teal); background: color-mix(in srgb, var(--teal) 16%, transparent); }
.todo-tag.t7 { color: var(--pink); background: color-mix(in srgb, var(--pink) 16%, transparent); }
.todo-drop { height: 4px; border-radius: 2px; background: var(--accent-text); }
.todo-add { text-align: left; }
.todo-add-form { display: flex; flex-direction: column; gap: 8px; }
.todo-add-input, textarea.editor.todo-comment-input, textarea.editor.todo-editor {
  width: 100%; resize: vertical; font: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 10px;
}
.todo-add-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.todo-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.todo-dialog-head h2 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.todo-dialog-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.todo-dialog-actions { display: flex; gap: 8px; flex: none; }
.todo-dialog-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.todo-dialog-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.todo-dialog-side { display: flex; flex-direction: column; gap: 16px; }
.todo-dialog-side h3 { margin-bottom: 6px; }
.todo-dialog-side select { margin-bottom: 6px; }
.todo-order button { flex: 1 1 0; }
.todo-worker-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.todo-dialog-side > section > button, .todo-dialog-side > button { width: 100%; }
.todo-facts { display: flex; flex-direction: column; gap: 2px; }
.todo-text li.task input:not(:disabled) { cursor: pointer; }
.todo-comment-box h3 { margin-bottom: 8px; }
.todo-comments { display: flex; flex-direction: column; gap: 10px; }
.todo-comments:not(:empty) { margin-bottom: 12px; }
.todo-comment { background: var(--sunken); border-radius: var(--radius); padding: 8px 12px; }
.todo-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.todo-comment-head .avatar { width: 20px; height: 20px; font-size: .7rem; }
.todo-comment-head button { margin-left: auto; }
.todo-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-comment-new { display: flex; flex-direction: column; gap: 8px; }
.todo-comment-new .row { justify-content: flex-end; }
.todo-edit { display: flex; flex-direction: column; gap: 12px; }
.todo-edit .field { margin: 0; }
.todo-title-input { font-size: 1.1rem; }
.todo-edit-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.todo-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
textarea.editor.todo-editor { min-height: 300px; height: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea.editor.todo-comment-input { min-height: 3.6em; white-space: pre-wrap; }
.todo-edit-grid .wiki-preview-box { max-height: 420px; min-height: 300px; }
.todo-archive-list { display: flex; flex-direction: column; }
.todo-archived { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.todo-archived:last-child { border-bottom: 0; }
.todo-archived-text { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .todo-dialog-grid, .todo-edit-grid, .todo-edit-fields { grid-template-columns: minmax(0, 1fr); }
  .todo-dialog-head { flex-wrap: wrap; }
  .todo-bar input[type=search] { flex: 1 1 100%; }
  .todo-column { flex-basis: 260px; }
}

/* ---- mail (the mailbox) ---- */
.tabs .tab-count { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-text);
  color: #fff; font-size: .72rem; line-height: 18px; text-align: center; vertical-align: 1px; }
.mail-item { align-items: stretch; }
.mail-item .text { flex: 1; gap: 1px; }
.mail-line { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; min-width: 0; }
.mail-who, .mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-who { font-weight: 500; }
.mail-when { flex: none; color: var(--muted); font-size: .8rem; }
.mail-flags { flex: none; display: flex; gap: 4px; font-size: .8rem; color: var(--muted); }
.mail-item.unseen { border-left-color: var(--accent-text); }
.mail-item.unseen .mail-who, .mail-item.unseen .mail-subject { font-weight: 700; color: var(--heading); }
.mail-card { display: flex; flex-direction: column; gap: 14px; }
.mail-subject-head { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.mail-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; margin: 0; font-size: .92rem; }
.mail-meta dt { color: var(--muted); }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-actions, .mail-view-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-actions .spacer, .mail-view-bar .spacer { flex: 1; }
.mail-view-bar { margin-bottom: -6px; }
.mail-files { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-file { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sunken); color: var(--text); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.mail-file:hover { border-color: var(--accent); }
.mail-frame { width: 100%; height: 70vh; min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.mail-compose label { margin-bottom: -6px; }
.mail-compose-text { width: 100%; min-height: 280px; resize: vertical; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 9px 10px; font: inherit; line-height: 1.5; }
.mail-compose-text:hover { border-color: var(--accent); }
.mail-compose-text:focus { outline: none; border-color: var(--accent); background: var(--input-focus-bg); box-shadow: 0 0 0 1px var(--accent); }
.wide-button { width: 100%; margin-bottom: 8px; }