/* Merchant prototype — a console, not a storefront: flat surfaces, one accent,
   and tables that hold their shape when every other cell is a UUID. */

:root {
  --bg:#0e1013; --panel:#15181d; --panel-2:#1a1e24; --line:#252a32; --line-soft:#1f242b;
  --fg:#e4e7ea; --muted:#8b939d; --faint:#5f6873;
  --accent:#5b8def; --ok:#4a9d6a; --warn:#b98a2f; --bad:#c9556a;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:6px;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code, .mono { font-family:var(--mono); font-size:12.5px; }
h1, h2, h3 { font-weight:600; letter-spacing:-.01em; }

.muted { color:var(--muted); }
.small { font-size:12px; }
.strong { font-weight:600; }
/* Truncation belongs to an inline box: put it on a span inside a cell, never
   on the cell — a td that stops being a table-cell takes the row with it. */
.clip { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom; }

/* ---- chrome ------------------------------------------------------------ */

.topbar { display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:52px; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { font-weight:600; font-size:14px; letter-spacing:-.01em; }
.brand span { font-weight:400; }
.topbar nav { display:flex; gap:20px; }
.topbar nav a { color:var(--muted); font-size:13px; }
.topbar nav a:hover { color:var(--fg); text-decoration:none; }
.nav-count { color:var(--faint); margin-left:6px; font-size:11px; font-family:var(--mono); }

.wrap { max-width:1060px; margin:22px auto 48px; padding:0 24px;
  display:flex; flex-direction:column; gap:16px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; }
.card-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px; }
.card-head h2 { font-size:13px; margin:0; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); }
.between { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.stack { display:flex; flex-direction:column; gap:14px; }

/* ---- controls ---------------------------------------------------------- */

.btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius); padding:7px 13px; font-size:13px; line-height:1.2;
  font-family:inherit; }
.btn:hover { border-color:#39414d; text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#4b7ee0; border-color:#4b7ee0; }
.btn.bad { color:#e8a3ae; border-color:#4a2730; background:#221419; }
.btn.bad:hover { border-color:#6b2f3b; }
.btn.xs { padding:4px 9px; font-size:12px; }

.form { display:flex; flex-direction:column; gap:12px; }
.fld { display:flex; flex-direction:column; gap:5px; }
.fld > span { color:var(--muted); font-size:12px; }
input, select { background:#0c0e12; color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius); padding:7px 10px; font-size:13px; font-family:inherit; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--accent); }
input::placeholder { color:var(--faint); }
.param-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.form-actions { display:flex; align-items:center; gap:12px; }

/* ---- tables ------------------------------------------------------------ */

.tbl { width:100%; border-collapse:collapse; table-layout:fixed; }
.tbl th, .tbl td { text-align:left; padding:9px 10px; vertical-align:top;
  border-bottom:1px solid var(--line-soft); overflow-wrap:anywhere; }
.tbl th { color:var(--faint); font-weight:500; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; border-bottom-color:var(--line); padding-bottom:7px; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl td.actions { text-align:right; white-space:nowrap; overflow:visible; }
.tbl .sub { color:var(--faint); font-size:11.5px; font-family:var(--mono); margin-top:2px; }
/* Column widths, so a table of UUIDs still reads as columns. */
.col-narrow { width:96px; }
.col-status { width:120px; }
.col-id { width:210px; }
.col-actions { width:110px; }

.empty { color:var(--faint); font-size:13px; padding:6px 0; margin:0; }

/* A heading inside a card, for a second table under the first. */
.sub-head { color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  margin:20px 0 6px; }
.sub-head:first-child { margin-top:0; }
/* The label above a block of raw text — not a key/value row with nothing in it. */
.sublabel { color:var(--muted); font-size:12px; margin:12px 0 5px; }

/* ---- status and type marks --------------------------------------------- */

.status { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--faint); }
.status.ok { color:#8fcaa5; } .status.ok::before { background:var(--ok); }
.status.warn { color:#d8b168; } .status.warn::before { background:var(--warn); }
.status.bad { color:#e3919e; } .status.bad::before { background:var(--bad); }

.tag { display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 6px; border-radius:3px; border:1px solid var(--line);
  color:var(--muted); background:var(--panel-2); }
.tag-payment { color:#8fb2f0; border-color:#26344a; }
.tag-login { color:#b09ae0; border-color:#2f2a44; }
.tag-freeform { color:#77c3b4; border-color:#1f3a37; }

/* ---- key/value ---------------------------------------------------------- */

.kv { display:flex; gap:12px; align-items:baseline; padding:5px 0;
  border-bottom:1px solid var(--line-soft); font-size:13px; }
.kv:last-child { border-bottom:none; }
.kv > span { color:var(--muted); flex:0 0 190px; font-size:12px; }
.kv > b, .kv > div { font-weight:500; min-width:0; overflow-wrap:anywhere; }
.kv code { font-family:var(--mono); font-size:12px; }

/* ---- presets ------------------------------------------------------------ */

.presets { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:820px) { .presets { grid-template-columns:1fr; } }
.preset { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2);
  padding:14px; display:flex; flex-direction:column; gap:10px; }
.preset-head { display:flex; align-items:center; gap:8px; }
.preset-title { font-weight:600; font-size:13.5px; }
.preset .fields { display:flex; flex-direction:column; }
.preset .fields .kv { padding:4px 0; font-size:12px; }
.preset .fields .kv > span { flex:0 0 96px; font-family:var(--mono); font-size:11px;
  color:var(--faint); }
.preset .btn { justify-content:center; margin-top:auto; }

/* ---- authorization detail ----------------------------------------------- */

.headline { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.headline h2 { margin:0; font-size:17px; }
.state { display:flex; align-items:baseline; gap:10px; margin:6px 0 14px; }
.state .label { font-size:16px; font-weight:600; }
.state.ok .label { color:#8fcaa5; }
.state.bad .label { color:#e3919e; }
.state.warn .label { color:#d8b168; }

details.more { margin-top:10px; }
details.more summary { cursor:pointer; color:var(--accent); font-size:12.5px; }
details.more > *:not(summary) { margin-top:8px; }

/* A body that can be any size scrolls inside its own box: a 4000-line answer
   must not turn the page into a kilometre of JSON. */
pre.raw.scroll { max-height:420px; overflow:auto; }
pre.raw { background:#0c0e12; border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; overflow-x:auto; font-family:var(--mono); font-size:11.5px; margin:0;
  white-space:pre-wrap; word-break:break-all; color:#c9d0d8; }

/* ---- enrollment ---------------------------------------------------------- */

.enroll { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.enroll .qr { width:180px; height:180px; border-radius:var(--radius); background:#fff; padding:8px; }
.enroll-info { flex:1; min-width:260px; }

/* ---- flashes ------------------------------------------------------------- */

.flash { padding:9px 13px; border-radius:var(--radius); font-size:13px; border:1px solid; }
.flash.bad { background:#1c1216; color:#e3919e; border-color:#4a2730; }
.flash.ok { background:#111b15; color:#8fcaa5; border-color:#254634; }