/* The dashboard's look. Everything reads its colors and sizes from these tokens. */
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url(../vendor/fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url(../vendor/fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url(../vendor/fonts/roboto-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(../vendor/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(../vendor/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(../vendor/fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #2f353a;
  --panel: #3a4149;
  --panel-head: #343b41;
  --panel-deep: #2a3036;
  --line: #23282c;
  --input: #515b65;
  --input-hover: #5a6570;
  --text: #e4e7ea;
  --text-soft: #b6bfc7;
  --text-dim: #8d98a2;
  --accent: #00a2f8;
  --accent-deep: #0088d1;
  --ok: #4dbd74;
  --ok-deep: #3da564;
  --warn: #ffc107;
  --bad: #f86c6b;
  --bad-deep: #e45655;
  --sidebar-width: 200px;
  --header-height: 55px;
  --radius: 4px;
  --font: Roboto, "Segoe UI", system-ui, sans-serif;
  --heading: Poppins, Roboto, "Segoe UI", system-ui, sans-serif;
  --mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-family: var(--heading); font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 12px; }
code { font-family: var(--mono); color: #f8a6c9; background: var(--panel-deep); padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.icon { display: inline-block; vertical-align: -2px; flex: none; }
.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); }
.small { font-size: 12px; }
.right { margin-left: auto; }
.spread { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.hidden, [hidden] { display: none !important; }

/* ---- page frame ---- */
.top {
  position: fixed; inset: 0 0 auto 0; height: var(--header-height); z-index: 30;
  display: flex; align-items: center; gap: 4px; padding-right: 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { width: var(--sidebar-width); padding-left: 16px; display: flex; align-items: center; gap: 8px; color: var(--text); font: 600 16px var(--heading); }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.top-btn { background: none; border: 0; color: var(--text-soft); padding: 6px 8px; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.top-btn:hover { color: #fff; text-decoration: none; }
.top-spacer { flex: 1; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-deep); object-fit: cover; flex: none; }
.avatar.square { border-radius: 8px; }
.avatar-letter { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text); }
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; max-height: 420px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgb(0 0 0 / 40%); padding: 4px 0;
}
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--input); text-decoration: none; }
.side {
  position: fixed; top: var(--header-height); bottom: 0; left: 0; width: var(--sidebar-width); z-index: 20; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line); padding-bottom: 12px;
}
.side-group { margin-top: 4px; }
.side-title {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; background: none; border: 0; cursor: pointer;
  color: #fff; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .4px; text-align: left;
}
.side-link { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: var(--text); border-left: 3px solid transparent; overflow-wrap: anywhere; }
.side-find { padding: 10px 12px 0; }
.side-find input { min-height: 32px; }
.side-link .icon { color: var(--text-dim); }
.side-link:hover { background: var(--input); color: #fff; text-decoration: none; }
.side-link.on { background: var(--panel-deep); border-left-color: var(--accent); color: #fff; }
.side-link.on .icon { color: var(--accent); }
.main { margin: var(--header-height) 0 0 var(--sidebar-width); padding: 18px; min-height: calc(100vh - var(--header-height)); }
.side-hidden .side { display: none; }
.side-hidden .main { margin-left: 0; }
.page-title { font-size: 20px; margin-bottom: 12px; }
@media (max-width: 800px) {
  .side { box-shadow: 4px 0 14px rgb(0 0 0 / 40%); }
  .main { margin-left: 0; padding: 12px; }
  .brand { width: auto; }
  .top-link { display: none; }
}

/* ---- layout ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; align-items: start; }
.grid .col { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 560px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--panel-head); border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0; }
.card-head .right { display: flex; align-items: center; gap: 8px; }
.card-body { padding: 20px; }
.card-foot { padding: 12px 20px; background: var(--panel-head); border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-radius: 0 0 3px 3px; }
.card + .card { margin-top: 18px; }
.grid .card + .card, .col .card + .card { margin-top: 0; }

/* ---- forms ---- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label, .label { display: block; margin-bottom: 6px; font-weight: 500; }
.help { color: var(--text-soft); font-size: 13px; margin-top: 4px; }
.error { color: var(--bad); font-size: 13px; margin-top: 4px; }
.counter { color: var(--text-dim); font-size: 12px; margin-top: 2px; font-weight: 700; }
.counter.over { color: var(--bad); }
input[type=text], input[type=number], input[type=url], input[type=search], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 35px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--input); color: var(--text); font: inherit; outline: none;
}
input:focus, select:focus, textarea:focus, .ms-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(0 162 248 / 25%); }
input::placeholder, textarea::placeholder { color: #aab3bb; }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
textarea { min-height: 90px; resize: vertical; }
.input-group { display: flex; }
.input-group input { border-radius: var(--radius) 0 0 var(--radius); min-width: 0; }
.input-group .addon { display: inline-flex; align-items: center; padding: 0 12px; background: var(--panel-deep); border: 1px solid var(--line); border-left: 0; white-space: nowrap; }
.input-group .addon:last-child, .input-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.input-group .btn { border-left: 0; }
.input-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.checklist { border: 1px solid var(--line); border-radius: var(--radius); }
.checklist .check { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.checklist .check:last-child { border-bottom: 0; }
.switch-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.switch-row + .help { margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--panel-deep); border: 1px solid var(--line); transition: background .12s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .12s; }
.switch input:checked + span { background: #63c2de; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid transparent; border-radius: var(--radius); background: var(--input); color: #fff; font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.primary { background: var(--accent); }
.btn.success { background: var(--ok); }
.btn.danger { background: var(--bad); }
.btn.outline { background: none; border-color: var(--accent); color: var(--accent); }
.btn.outline.danger { border-color: var(--bad); color: var(--bad); background: none; }
.btn.outline.success { border-color: var(--ok); color: var(--ok); background: none; }
.btn.ghost { background: none; color: var(--text-soft); }
.btn.ghost.danger { color: var(--bad); }
.btn.block { width: 100%; }
.btn.small { min-height: 28px; padding: 3px 9px; font-size: 13px; }
.icon-btn { background: none; border: 0; padding: 4px; color: var(--text-soft); cursor: pointer; border-radius: var(--radius); display: inline-flex; }
.icon-btn:hover { color: #fff; background: var(--input); }
.icon-btn.danger:hover { color: var(--bad); }
.rr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.rr-tools { gap: 2px; flex-wrap: nowrap; }
@media (max-width: 560px) { .rr-row { grid-template-columns: auto minmax(0, 1fr); } .rr-tools { grid-column: 1 / -1; justify-content: flex-end; } }
.save-bar {
  position: fixed; bottom: 16px; left: calc(var(--sidebar-width) + 24px); right: 24px; z-index: 25; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--panel-deep); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}
.side-hidden .save-bar { left: 24px; }
@media (max-width: 800px) { .save-bar { left: 12px; right: 12px; } }

/* ---- pickers ---- */
.ms { position: relative; }
.ms-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 40px; padding: 4px 30px 4px 8px; background: var(--input); border: 1px solid var(--line); border-radius: 5px; cursor: text; }
.ms-box input { flex: 1; min-width: 60px; min-height: 28px; padding: 0 4px; border: 0; background: none; box-shadow: none !important; }
.ms-caret { position: absolute; right: 8px; top: 12px; color: var(--text-soft); pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px; background: var(--panel-deep); border: 1px solid var(--line); max-width: 100%; }
.chip button { background: none; border: 0; color: var(--text-soft); padding: 0; cursor: pointer; display: inline-flex; }
.chip button:hover { color: var(--bad); }
.chip .dot, .ms-option .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #99aab5; }
.ms-single { padding: 2px 4px; display: inline-flex; align-items: center; gap: 6px; }
.ms-list { position: absolute; z-index: 50; top: calc(100% + 2px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgb(0 0 0 / 45%); }
.ms-group { padding: 6px 10px 2px; color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ms-option { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; }
.ms-option:hover, .ms-option.active { background: var(--accent-deep); color: #fff; }
.ms-option.on { background: var(--panel-deep); }
.ms-empty { padding: 10px 12px; color: var(--text-dim); }

/* ---- tables ---- */
.table-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.table-tools select { width: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--panel-head); font-weight: 700; white-space: nowrap; }
th.sortable { user-select: none; }
.th-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { text-decoration: underline; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgb(255 255 255 / 3%); }
td input, th input { min-height: 30px; }
.table-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pager { display: flex; gap: 2px; margin-left: auto; }
.pager button { min-width: 32px; height: 32px; background: var(--panel-head); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.pager button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager button:disabled { opacity: .45; cursor: default; }
.truncate { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--input); color: #fff; font-size: 12px; font-weight: 700; }
.badge.blue { background: var(--accent-deep); }
.badge.green { background: var(--ok-deep); }
.badge.red { background: var(--bad-deep); }
.badge.gold { background: #b98a1d; }
.badge.outline { background: none; border: 1px solid var(--line); color: var(--text-soft); }

/* ---- tabs ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { padding: 8px 14px; background: none; border: 1px solid transparent; border-bottom: 0; color: var(--text-soft); cursor: pointer; font: inherit; border-radius: 4px 4px 0 0; }
.tab:hover { color: #fff; }
.tab.on { background: var(--panel-deep); border-color: var(--line); color: #fff; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.tile { background: var(--panel-head); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--radius); padding: 14px; }
.tile.off { border-top-color: var(--bad); opacity: .75; }
.tile h3 { margin: 0; font-size: 18px; }
.tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--warn); vertical-align: 2px; }

/* ---- modal ---- */
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 55%); overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; }
.modal { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / 55%); }
.modal.large { max-width: 980px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 18px; flex: 1; }
.modal-body { padding: 16px; }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.modal-foot .right { display: flex; gap: 8px; }

/* ---- toast ---- */
.toasts { position: fixed; top: 66px; right: 16px; z-index: 90; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { padding: 10px 14px; border-radius: var(--radius); background: var(--panel-deep); border-left: 4px solid var(--accent); box-shadow: 0 6px 18px rgb(0 0 0 / 45%); overflow-wrap: anywhere; }
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }

/* ---- notices ---- */
.notice { padding: 10px 14px; border-radius: var(--radius); border-left: 4px solid var(--accent); background: var(--panel-deep); margin-bottom: 14px; }
.notice.warn { border-left-color: var(--warn); }
.notice.bad { border-left-color: var(--bad); }
.notice.ok { border-left-color: var(--ok); }
.loading { padding: 30px; text-align: center; color: var(--text-dim); }
.empty { padding: 26px; text-align: center; color: var(--text-dim); }

/* ---- embed editor ---- */
.embed-edit { border: 1px solid var(--line); border-left: 4px solid var(--panel-deep); border-radius: var(--radius); padding: 14px; background: var(--panel-head); margin-bottom: 12px; }
.embed-edit .grid-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; margin-bottom: 10px; }
.embed-edit .grid-title { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; margin-bottom: 4px; }
.embed-edit .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.embed-edit .grid-foot { display: grid; grid-template-columns: 3fr 2fr 3fr; gap: 10px; margin-bottom: 4px; }
.field-edit { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 8px 0; background: var(--panel); }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.color-input { width: 40px; height: 35px; padding: 2px; border: 1px solid var(--line); background: var(--input); border-radius: var(--radius); cursor: pointer; }
.emoji-pop { position: absolute; z-index: 70; width: 340px; max-width: 90vw; height: 340px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 22px rgb(0 0 0 / 55%); }
.emoji-pop input { border-radius: 6px 6px 0 0; }
.emoji-scroll { overflow-y: auto; flex: 1; padding: 6px 8px; }
.emoji-group { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-dim); margin: 8px 0 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn { background: none; border: 0; padding: 3px; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 4px; color: inherit; }
.emoji-btn:hover { background: var(--input); }
.emoji-btn img { width: 22px; height: 22px; object-fit: contain; }

/* ---- preview that looks like Discord ---- */
.dc { background: #313338; color: #dbdee1; border-radius: var(--radius); padding: 14px 16px; font: 15px/1.375 "gg sans", "Noto Sans", Roboto, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
.dc-msg { display: flex; gap: 14px; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #1e1f22; }
.dc-body { min-width: 0; flex: 1; }
.dc-name { font-weight: 500; color: #f2f3f5; }
.dc-tag { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.dc-time { margin-left: 6px; color: #949ba4; font-size: 12px; }
.dc-text { white-space: pre-wrap; }
.dc-embed { position: relative; display: grid; max-width: 520px; margin-top: 6px; padding: 8px 16px 16px 12px; background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px; }
.dc-embed.thumbed { padding-right: 96px; }
.dc-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 500; color: #f2f3f5; }
.dc-author img { width: 24px; height: 24px; border-radius: 50%; }
.dc-title { margin-top: 8px; font-size: 16px; font-weight: 600; color: #f2f3f5; }
.dc-title a { color: #00a8fc; }
.dc-desc { margin-top: 8px; font-size: 14px; line-height: 1.3; white-space: pre-wrap; }
.dc-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 8px; }
.dc-field { font-size: 14px; line-height: 1.3; min-width: 0; }
.dc-field > b { display: block; color: #f2f3f5; margin-bottom: 2px; font-weight: 600; }
.dc-thumb { position: absolute; top: 16px; right: 16px; width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
.dc-image { margin-top: 16px; max-width: 100%; max-height: 300px; border-radius: 4px; }
.dc-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #b5bac1; }
.dc-foot img { width: 20px; height: 20px; border-radius: 50%; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: #4e5058; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 500; }
.dc-mention { background: rgb(88 101 242 / 30%); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-code { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 7px; display: block; font: 13px/1.25 var(--mono); white-space: pre-wrap; }
.dc-inline-code { background: #1e1f22; border-radius: 3px; padding: 0 2px; font: 85% var(--mono); }
.dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; margin: 2px 0; }
.dc-spoiler { background: #1e1f22; border-radius: 3px; color: #1e1f22; cursor: pointer; }
.dc-spoiler:hover { color: #dbdee1; }
.dc-h1 { font-size: 22px; font-weight: 700; margin: 8px 0 4px; }
.dc-h2 { font-size: 19px; font-weight: 700; margin: 8px 0 4px; }
.dc-h3 { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
.dc-small { font-size: 12px; color: #949ba4; }
.dc-emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }

/* ---- public pages ---- */
.public { max-width: 880px; margin: 0 auto; padding: 40px 20px; }
.hero { text-align: center; padding: 48px 0 24px; }
.hero img { width: 120px; height: 120px; }
.hero h1 { font-size: 38px; margin-top: 16px; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.server-tile { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.server-tile:hover { border-color: var(--accent); text-decoration: none; }

/* ---- logging pages ---- */
.log-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; }
.log-switches .field { margin-bottom: 12px; }
.log-chips { margin-bottom: 8px; max-height: 220px; overflow-y: auto; }
.log-chip-avatar { width: 18px; height: 18px; }
.log-table .log-col-when { width: 150px; }
.log-table .log-col-event { width: 190px; }
.log-table .log-col-person { width: 170px; }
.log-table .log-col-channel { width: 170px; }
.log-filters th { font-weight: 400; white-space: normal; }
.log-filters input[type=date] { margin-bottom: 4px; padding: 3px 6px; font-size: 12px; }
.log-filters .ms-box { min-height: 32px; padding: 2px 26px 2px 6px; }
.log-filters .ms-caret { top: 8px; }
.log-filters .field { margin-bottom: 0; }
.log-filter-chip { max-width: 150px; }
.log-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.log-person-list { min-width: 200px; }
.log-person { overflow-wrap: anywhere; }
.log-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; overflow-wrap: anywhere; }
.log-link:hover { text-decoration: underline; }
.log-dc { padding: 0; background: none; }
.log-dc .dc-embed { margin-top: 0; }
.log-detail-btn { margin-top: 6px; }
.log-detail { margin: 0; max-height: 60vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.4 var(--mono); background: var(--panel-deep); padding: 12px; border-radius: var(--radius); }

/* ---- moderation, cases and automod ---- */
.card-body hr, .modal-body hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.link-btn:hover { text-decoration: underline; }
.case-search { width: 340px; max-width: 100%; }
tr.case-voided td { opacity: .6; }
tr.case-voided td:last-child { opacity: 1; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 220px; overflow-y: auto; margin-bottom: 6px; }
.word-kind { width: auto; flex: none; border-radius: 0; border-left: 0; }

/* ---- posted messages ---- */
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.embed-edit textarea { field-sizing: content; max-height: 60vh; }
.grid .col.tall { align-self: stretch; }
.sticky-col { position: sticky; top: calc(var(--header-height) + 12px); align-self: start; display: grid; gap: 18px; max-height: calc(100vh - var(--header-height) - 24px); overflow-y: auto; }
.pick-list { border: 1px solid var(--line); border-radius: var(--radius); max-height: 520px; overflow-y: auto; }
.pick-row { display: flex; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; align-items: flex-start; }
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover, .pick-row.on { background: var(--panel-head); }
.pick-row input { width: 16px; height: 16px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.history.wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 800px) { .history, .history.wide { grid-template-columns: minmax(0, 1fr); } }
.job-item { display: flex; align-items: flex-start; gap: 10px; }
.ok-text { color: var(--ok); }
.bad-text { color: var(--bad); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.stat-tile b { display: block; font: 700 22px/1.3 var(--heading); }
.input-group .addon.first { border-left: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--text-dim); }
.input-group .addon.first + input { border-radius: 0; }
.input-group .addon.first + input:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* ---- levels, personalize, alerts ---- */
input[type=password] { width: 100%; min-height: 35px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input); color: var(--text); font: inherit; outline: none; }
.input-group .addon-start { border-left: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group .addon-start + input { border-radius: 0 var(--radius) var(--radius) 0; }
.reward-add { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 10px; align-items: start; }
@media (max-width: 560px) { .reward-add { grid-template-columns: minmax(0, 1fr); } }
.rank-preview { display: block; width: 100%; max-width: 620px; aspect-ratio: 934 / 282; border-radius: 8px; margin-bottom: 6px; background: var(--panel-deep); }
.color-input.wide { display: block; width: 100%; }
.board-search { margin-bottom: 14px; }
.board-search .input-group { width: 420px; max-width: 100%; }
.twitch-btn { background: #6441a5; }
.youtube-btn { background: #c4302b; }
.profile-page { max-width: 880px; }
.profile-rules { margin: 8px 0 0; padding-left: 20px; }
.profile-banner { position: relative; height: 200px; background: #232428 center / cover no-repeat; }
.profile-edit { position: absolute; top: 10px; right: 10px; background: rgb(0 0 0 / 65%); }
.profile-body { padding: 0 20px 20px; }
.profile-avatar { position: relative; display: block; width: 120px; height: 120px; margin-top: -60px; margin-bottom: 10px; padding: 0; border: 6px solid var(--panel); border-radius: 50%; background: var(--panel-deep); cursor: pointer; }
.profile-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar-edit { position: absolute; right: 0; bottom: 0; display: inline-flex; padding: 5px; border-radius: 50%; background: var(--panel-deep); color: #fff; }
.profile-name { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 20px; }
.profile-actions { flex-direction: column; align-items: stretch; }

/* ---- backup ---- */
.backup-job { padding: 12px 16px; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.progress { height: 8px; margin-top: 8px; background: var(--panel-deep); border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.progress span.waiting { opacity: .45; }
.backup-changes { display: grid; gap: 8px; margin-top: 8px; overflow-wrap: anywhere; }

/* ---- reports and voice ---- */
.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.report-fact { overflow-wrap: anywhere; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-deep); border-radius: var(--radius); padding: 10px 12px; }
.report-files { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.report-case { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.report-case .field { flex: 1 1 260px; margin-bottom: 0; }
.report-tile { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.report-tile:hover, .report-tile.on { border-color: var(--accent); }
.access-grant { align-items: flex-end; margin-bottom: 16px; }
.access-grant .grow { flex: 1 1 280px; }
.access-grant .field { margin-bottom: 0; }
.setup-wrap { max-width: 760px; margin: 0 auto; }

/* ---- sign-in notice, hex boxes, pictures that wait for a click ---- */
.session-banner {
  position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 35; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--panel-deep); border-bottom: 2px solid var(--warn);
}
.session-banner span { flex: 1 1 260px; }
.hex-input { width: 100px !important; min-width: 0; font-family: var(--mono); }
.hex-input.bad { border-color: var(--bad); }
.dc-remote { display: inline-block; margin-top: 8px; padding: 6px 10px; border: 1px dashed #4e5058; border-radius: 4px; background: none; color: #b5bac1; font: inherit; font-size: 13px; text-align: left; }
button.dc-remote { cursor: pointer; }
button.dc-remote:hover { color: #fff; border-color: #949ba4; }

/* ---- phones: nothing is wider than the screen ---- */
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .modal-back { padding: 12px 8px; }
  .btn { white-space: normal; }
  .embed-edit .grid-3, .embed-edit .grid-title, .embed-edit .grid-2, .embed-edit .grid-foot { grid-template-columns: minmax(0, 1fr); }
  .input-row { grid-auto-flow: row; grid-auto-columns: auto; }
  .emoji-pop { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; height: min(340px, 60vh); }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); }
  .table-tools, .table-foot { min-width: 0; }
}