:root {
  --bg: #f6f5f3; --panel: #fff; --ink: #1c1a17; --muted: #7a746c;
  --line: #e5e1db; --accent: #b8631b; --accent-ink: #fff;
  --ok: #1f7a4d; --warn: #b0421a; --chip: #efece7;
  --good-bg: #f1f7f3; --good-line: #cfe6d9;
  --warnp-bg: #faf3ee; --warnp-line: #ecd6c4;
  --gtag-bg: #eef3ee; --gtag-line: #cfe0cf; --gtag-ink: #2c5b34;
  --draft-bg: #fbe7cf; --draft-line: #e6c27a; --draft-ink: #8a5a12;
  --sync-bg: #e8f0fa; --sync-line: #b8cce8; --sync-ink: #2a4a7a;
  --div-bg: #faf0e8; --div-line: #e8c9a8; --div-ink: #8a4a12;
  --toast-bg: #1c1a17; --toast-ink: #fff;
  --focus: #e7c8a6;
}
/* dark palette — applied by explicit choice or by OS preference (auto) */
:root[data-theme="dark"] {
  --bg: #16130f; --panel: #201c17; --ink: #eae4db; --muted: #9b9288;
  --line: #383228; --accent: #cf7d2e; --accent-ink: #fff;
  --ok: #58b183; --warn: #e07a56; --chip: #2d2820;
  --good-bg: #1d2a22; --good-line: #2f4a3a;
  --warnp-bg: #2c221a; --warnp-line: #4d3a29;
  --gtag-bg: #21301f; --gtag-line: #3a5537; --gtag-ink: #9fd0a3;
  --draft-bg: #3a2c12; --draft-line: #6b5320; --draft-ink: #e6c27a;
  --sync-bg: #1a2838; --sync-line: #3a557a; --sync-ink: #9bb8e0;
  --div-bg: #3a2a18; --div-line: #6b4a28; --div-ink: #e6b87a;
  --toast-bg: #efe9e0; --toast-ink: #1c1a17;
  --focus: #6b4a24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #16130f; --panel: #201c17; --ink: #eae4db; --muted: #9b9288;
    --line: #383228; --accent: #cf7d2e; --accent-ink: #fff;
    --ok: #58b183; --warn: #e07a56; --chip: #2d2820;
    --good-bg: #1d2a22; --good-line: #2f4a3a;
    --warnp-bg: #2c221a; --warnp-line: #4d3a29;
    --gtag-bg: #21301f; --gtag-line: #3a5537; --gtag-ink: #9fd0a3;
    --draft-bg: #3a2c12; --draft-line: #6b5320; --draft-ink: #e6c27a;
    --sync-bg: #1a2838; --sync-line: #3a557a; --sync-ink: #9bb8e0;
    --div-bg: #3a2a18; --div-line: #6b4a28; --div-ink: #e6b87a;
    --toast-bg: #efe9e0; --toast-ink: #1c1a17;
    --focus: #6b4a24;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink); background: var(--bg); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.spacer { flex: 1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); padding: .45rem .8rem; border-radius: 7px;
  cursor: pointer; text-decoration: none; font-size: 13px; }
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--warn); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 2.5rem; max-width: 24rem; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.05); }
.login-card h1 { margin: 0 0 .5rem; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }
.env-switch { display: flex; align-items: center; gap: .4rem; }
.env-switch label { font-size: 12px; color: var(--muted); }
.tabs { display: flex; gap: .25rem; }
.tab { border: none; background: transparent; padding: .45rem .75rem; border-radius: 7px;
  cursor: pointer; font-size: 13px; color: var(--muted); }
.tab.active { background: var(--chip); color: var(--ink); font-weight: 600; }
.user { display: flex; align-items: center; gap: .6rem; font-size: 13px; }

/* Views */
.view { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.toolbar, .tester-form { display: flex; gap: .5rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.toolbar select { max-width: 10.5rem; }

/* Multi-row list chrome (Rules = 2 rows; 410 = 1 row) */
.toolbar-stack { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.toolbar-row {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.toolbar-gone { margin-bottom: .8rem; }
.toolbar-filters {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.toolbar-actions {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  flex: 0 0 auto; margin-left: auto; justify-content: flex-end;
}
.toolbar-meta {
  display: flex; align-items: flex-start; gap: .5rem;
  min-height: 1.25rem; padding: 0 .1rem;
}
.toolbar-meta #publish-info,
.toolbar-meta-inline {
  white-space: normal; overflow: visible; text-overflow: unset;
  max-width: none; line-height: 1.4; font-size: 13px;
}
.toolbar-meta-inline { flex: 1 1 12rem; min-width: 0; }
.toolbar-filters select { max-width: 10.5rem; }
#search, #g-search { min-width: 140px; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); border-color: var(--accent); }
#search, #t-url { flex: 1; min-width: 200px; }
#g-search { flex: 1 1 12rem; min-width: 10rem; }
.narrow { width: 8rem; flex: none; }

/* Table */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
td.src, td.tgt { font-family: ui-monospace, Menlo, monospace; font-size: 12px; max-width: 340px;
  overflow-wrap: anywhere; }
tr.disabled td { opacity: .5; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); } .dot.off { background: var(--line); }
.code-pill { font-size: 11px; padding: .1rem .4rem; border-radius: 4px; background: var(--chip); }
.row-actions { white-space: nowrap; }
.row-actions .link { display: inline-block; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: .1rem .3rem; font-size: 12px; }
.id-link { font-variant-numeric: tabular-nums; font-size: 13px; padding: 0; color: var(--accent); }

.pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: .8rem; }

/* Drawer */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,.28); display: flex; justify-content: flex-end; z-index: 20; }
.drawer-panel { width: min(560px, 100%); background: var(--panel); height: 100%; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 1.1rem; }
.drawer-body { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; }
.drawer-body label { display: flex; flex-direction: column; gap: .25rem; font-size: 13px; color: var(--muted); }
.drawer-body label input, .drawer-body label select, .drawer-body label textarea { color: var(--ink); }
.drawer-body .row { flex-direction: row; display: flex; gap: .6rem; }
.drawer-body .row label { flex: 1; }
.drawer-body label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); }
.drawer-body label.grow { flex: 1; }
.req { color: var(--warn); }
/* Source/target: monospace, wraps long regexes/URLs so the whole value is visible */
.mono-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.45; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-error { color: var(--warn); min-height: 1.2em; margin: 0; font-size: 13px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* Tester result */
.winner { background: var(--good-bg); border: 1px solid var(--good-line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.winner.none { background: var(--warnp-bg); border-color: var(--warnp-line); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; font-size: 13px; }
.kv .k { color: var(--muted); }
.kv .v { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }

/* Country targeting field / chips */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-label { font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: .25rem .6rem; font-size: 12px; cursor: pointer; user-select: none; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .c { opacity: .65; font-size: 11px; }
.preview { margin: .1rem 0 0; font-size: 12px; }
.lint { border-left: 3px solid var(--draft-line); background: var(--draft-bg); color: var(--draft-ink);
  padding: .35rem .6rem; border-radius: 0 6px 6px 0; white-space: pre-wrap; }
.lint.err { border-left-color: var(--warn); background: var(--warnp-bg); color: var(--warn); }

/* Advanced disclosure */
.advanced { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; }
.advanced summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.advanced[open] { padding-bottom: .5rem; }

/* Region tags in the rules list Country column */
.rtag { display: inline-block; background: var(--gtag-bg); border: 1px solid var(--gtag-line); color: var(--gtag-ink);
  border-radius: 4px; padding: 0 .35rem; font-size: 11px; margin: 0 .15rem .15rem 0; }
.mono-codes { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.badge-draft { display: inline-block; background: var(--draft-bg); border: 1px solid var(--draft-line); color: var(--draft-ink);
  border-radius: 4px; padding: 0 .3rem; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle; }
.badge-env { display: inline-block; border-radius: 4px; padding: 0 .35rem; font-size: 10px; text-transform: uppercase;
  letter-spacing: .03em; vertical-align: middle; white-space: nowrap;
  background: var(--chip); border: 1px solid var(--line); color: var(--muted); }
.badge-env.synced { background: var(--sync-bg); border-color: var(--sync-line); color: var(--sync-ink); }
.badge-env.diverged { background: var(--div-bg); border-color: var(--div-line); color: var(--div-ink); }
.badge-env.only { background: var(--chip); }
.badge-csv { display: inline-block; background: var(--gtag-bg); border: 1px solid var(--gtag-line); color: var(--gtag-ink);
  border-radius: 3px; padding: 0 .3rem; font-size: 10px; margin-left: .25rem; vertical-align: middle; }

/* Tester side-by-side */
.tester-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .tester-grid { grid-template-columns: 1fr; } }
.tester-panel { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; background: var(--panel); }
.tester-panel h3 { margin: 0 0 .5rem; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tester-panel.aligned { border-color: var(--good-line); background: var(--good-bg); }
.tester-panel.mismatch { border-color: var(--warnp-line); background: var(--warnp-bg); }
.compare-banner { padding: .5rem .8rem; border-radius: 8px; margin-bottom: .8rem; font-size: 13px; }
.compare-banner.ok { background: var(--good-bg); border: 1px solid var(--good-line); }
.compare-banner.bad { background: var(--warnp-bg); border: 1px solid var(--warnp-line); color: var(--warn); }

/* Version history / diff */
.ver { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .6rem; }
.ver-current { background: var(--good-bg); border-color: var(--good-line); }
.ver-head { font-size: 13px; font-weight: 600; margin-bottom: .3rem; display: flex; gap: .5rem; align-items: center; }
.ver-head .link { margin-left: auto; }
.kv2 { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; font-size: 12px; padding: .1rem 0; }
.kv2 .k { color: var(--muted); }
.kv2 .v { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.kv2.diff .v { color: var(--warn); }

/* Toast */
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-ink); padding: .6rem 1rem; border-radius: 8px; z-index: 40; font-size: 13px; }
.toast.err { background: var(--warn); }

/* ── Mobile (≤720px): usable one-handed; tables scroll inside .table-wrap ── */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: .4rem .7rem; padding: .5rem .6rem; }
  .brand { font-size: 14px; }
  .tabs { order: 4; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; padding: .4rem .6rem; }
  .user { margin-left: auto; }
  .user #user-info { display: none; }              /* name/role hidden on tiny screens */
  .env-switch label { display: none; }
  .view { padding: .6rem; }
  th, td { padding: .4rem .45rem; }
  td.src, td.tgt { max-width: 200px; }
  .toolbar .btn, .tester-form .btn,
  .toolbar-actions .btn { flex: none; }
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .toolbar-actions { margin-left: 0; justify-content: flex-start; width: 100%; }
  .toolbar-filters { width: 100%; }
  #search, #g-search { flex: 1 1 100%; min-width: 0; }
  .drawer-body .row { flex-direction: column; }
  .narrow { width: 6.5rem; }
}