:root {
  --bg: #f6f7f9; --card: #fff; --text: #1b1f24; --muted: #5d6673; --line: #dde1e6;
  --accent: #1f5fbf; --ok: #1d7a3e; --bad: #b3261e; --warn: #9a6200; --emb: #5b3fa8;
  --bad-bg: #fdecea; --warn-bg: #fff6e0; --ok-bg: #e6f4ea; --emb-bg: #efeafd; --env-bg: #e8f0fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418; --card: #1a1e24; --text: #e6e9ee; --muted: #9aa4b1; --line: #2c323b;
    --accent: #6ea2ff; --ok: #6fcf8f; --bad: #ff8a80; --warn: #f0b94a; --emb: #b9a2ff;
    --bad-bg: #3a1d1b; --warn-bg: #3a2e12; --ok-bg: #16301f; --emb-bg: #2a2340; --env-bg: #1b2a44;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); background: var(--card); }
header h1 { margin: 0; font-size: 1.3rem; }
.hdr-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hdr-right form { margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 6px; }
h3 { font-size: 1rem; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; word-break: break-all; }
.notice { margin: 12px 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; }
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }
.col { min-width: 0; }
.col-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; }
.row.conflict { border-left: 4px solid var(--bad); }
.row-h { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 2px; }
.vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 8px 0; }
.v { background: var(--bg); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.v .k { font-size: .75rem; color: var(--muted); }
.v.live { outline: 2px solid var(--accent); }
.v.diff { background: var(--bad-bg); }
.editor { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0; }
.editor input[type=number] { width: 140px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.chk { font-size: .85rem; }
.desc { margin: 6px 0 0; font-size: .9rem; }
.badge { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; white-space: normal; }
.badge.emb { background: var(--emb-bg); color: var(--emb); border-color: transparent; }
.badge.env { background: var(--env-bg); color: var(--accent); border-color: transparent; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.btns.sticky { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
button { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent); }
button.danger { background: var(--bad); border-color: var(--bad); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 16px; }
.err { color: var(--bad); }
.warn-text { color: var(--warn); }
.backup-list { display: grid; gap: 8px; }
.backup { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
body.login form { width: 100%; max-width: 360px; display: grid; gap: 10px; }
body.login label { display: grid; gap: 4px; font-size: .9rem; }
body.login input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }