:root { --bg: #ffffff; --fg: #1d1f23; --muted: #5f6672; --line: #dfe2e7; --accent: #1f6feb; --card: #f6f7f9; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #15171a; --fg: #e7e9ec; --muted: #9aa2ad; --line: #2c3036; --accent: #4c8dff; --card: #1d2024; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0 0 16px; }
h2 { font-size: 1.2rem; margin: 28px 0 8px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; margin: 0 6px 6px 0; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
.muted { color: var(--muted); }
canvas.phone { display: block; max-width: 100%; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; }
pre { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; max-width: 1040px; }
@media (max-width: 760px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; padding: 0; margin: 0; }
.steps > li { border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px 10px; margin-bottom: 12px; }
.steps > li.done { border-color: var(--accent); }
.steps h2 { font-size: 1.05rem; margin: 10px 0 8px; }
input, select { font: inherit; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); max-width: 100%; }
input[type=radio] { padding: 0; }
input[type=number] { width: 5em; }
fieldset { border: 0; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.status { font-weight: 600; padding: 8px 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.status.busy { border-color: var(--accent); }
.status.ok { border-color: #2ea043; }
.status.warn { border-color: #d29922; }
.ask { border: 2px solid #d29922; border-radius: 8px; padding: 4px 14px 12px; margin: 12px 0; }
.small { font-size: 13px; }
.view canvas.phone { width: 100%; max-height: none; }
a { color: var(--accent); }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0 16px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc code { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 14px; }
.doc li { margin: 4px 0; }
.doc img.shot { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
pre.cmds { max-height: 260px; overflow-y: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); font-size: 15px; }
.topnav a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.topnav a:hover { color: var(--fg); }
.topnav a[aria-current=page] { color: var(--fg); font-weight: 600; }
.topnav a.brand { color: var(--fg); font-weight: 700; letter-spacing: .04em; margin-right: 6px; }
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.hubcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 4px 18px 16px; color: var(--fg); text-decoration: none; background: var(--bg); }
.hubcard:hover, .hubcard:focus-visible { border-color: var(--accent); }
.hubcard h2 { margin: 14px 0 6px; }
.hubcard p { flex: 1; margin: 0 0 12px; }
.hubcard .go { color: var(--accent); font-weight: 600; }
/* Codes page: one block per message, a Copy button on every line that ends in a share code */
.cl-entry { border: 1px solid var(--line); border-radius: 8px; padding: 2px 14px 10px; margin-bottom: 14px; }
.cl-msg { margin: 8px 0 12px; }
.cl-head { margin: 8px 0 4px; font-size: 1rem; }
h4.cl-head { font-size: .95rem; color: var(--muted); }
.cl-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 5px 0;
  border-top: 1px solid var(--line); }
.cl-label { min-width: 0; overflow-wrap: anywhere; }
.cl-note { grid-column: 1 / -1; grid-row: 2; }
.cl-code { font: 600 15px ui-monospace, Menlo, Consolas, monospace; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; user-select: all; }
.cl-note { font-size: 13px; }
.cl-copy { margin: 0; padding: 6px 12px; font-size: 14px; min-height: 36px; }
.cl-more { grid-column: 1 / -1; }
.cl-more summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.cl-more p { margin: 4px 0; }
.cl-xi { overflow-x: auto; }
.cl-xi table { border-collapse: collapse; font-size: 13px; margin: 4px 0 6px; }
.cl-xi th, .cl-xi td { padding: 2px 6px 2px 0; text-align: left; white-space: nowrap; }
.cl-xi th { color: var(--muted); font-weight: 600; }
.cl-xi td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-xi tr.oop td { color: #d29922; }
.cl-group { margin: 6px 0 4px; }
.cl-group-sum { cursor: pointer; font-weight: 700; font-size: 1rem; padding: 4px 0; list-style: revert; }
.cl-group-sum::-webkit-details-marker { margin-right: 6px; }
.cl-group .cl-msg { margin: 2px 0 4px; }
.cl-group .cl-head { margin: 6px 0 1px; font-size: .9rem; }
.cl-group h4.cl-head { font-size: .85rem; }
.cl-group .cl-row { padding: 2px 0; gap: 2px 6px; }
.cl-group .cl-copy { padding: 3px 8px; font-size: 13px; min-height: 28px; }
.cl-group .cl-code { font-size: 13px; padding: 0 4px; }
.cl-group .cl-text { font-size: .85rem; }
.cl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cl-filter input { flex: 1 1 12em; min-width: 0; font-size: 16px; }
/* Card DB page */
.db-wrap { max-width: 1100px; }
.db-filters { display: grid; gap: 12px; margin-bottom: 10px; }
.db-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); }
.db-filters label, .db-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.db-filters select, .db-filters input:not([type=checkbox]) { width: 100%; font-size: 16px; font-weight: 400; }
.db-filters label.db-check { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.db-check input { width: 16px; height: 16px; margin: 0; }
.db-range { display: flex; align-items: center; gap: 6px; }
.db-range input[type=number], .db-range select { flex: 1 1 0; min-width: 0; }
.db-filters .db-range select#f-dir { flex: 0 1 auto; width: auto; }
.db-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.db-bar button { margin: 0; }
.db-over { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700;
  line-height: 17px; color: #fff; background: #2ea043; vertical-align: 1px; }
.db-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.db-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.db-table th, .db-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.db-table th { background: var(--card); position: sticky; top: 0; font-weight: 600; }
.db-name { font-weight: 600; white-space: nowrap; }
.db-stat { font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-rt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center !important; }
.db-rt.special { color: #8957e5; }
.db-rt.icon { color: #b08800; }
.db-m { display: none; }
@media (max-width: 860px) { .db-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-sort { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .db-group { padding: 10px; gap: 10px; }
  .db-table .db-hide { display: none; }
  .db-m { display: block; }
  .db-name { white-space: normal; }
  .db-table th, .db-table td { padding: 6px 5px; }
}