:root {
  --bg: #0e1117;
  --bg-alt: #161b24;
  --panel: #1a2130;
  --border: #2a3347;
  --text: #e6e9f0;
  --muted: #8a93a6;
  --accent: #4f7cff;
  --accent-hover: #3d68e8;
  --green: #2ecc8f;
  --red: #ff5d6c;
  --amber: #ffb547;
  --radius: 10px;
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: .85rem; }
.asset-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; vertical-align: middle; background: rgba(255,255,255,.04); }
.asset-logo-cell { text-align: center; }
.error { color: var(--red); margin-top: .75rem; font-size: .9rem; }

h1 { font-size: 1.3rem; letter-spacing: .5px; }
h1 span { color: var(--accent); }
h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
h3 { font-size: 1rem; margin-bottom: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 380px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
}
.login-card h1 { margin-bottom: .3rem; }
.login-card p { margin-bottom: 1.2rem; }
label { display: block; font-size: .8rem; color: var(--muted); margin: .9rem 0 .3rem; }
input, select {
  width: 100%; padding: .6rem .8rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text);
  font-size: .95rem; outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
.totp-qr {
  display: flex; justify-content: center; margin: .6rem 0;
}
.totp-qr canvas {
  width: 200px; height: 200px; border-radius: 8px;
  background: #fff; border: 10px solid #fff;
}
.totp-secret {
  font-family: ui-monospace, monospace; background: var(--bg-alt); border: 1px dashed var(--border);
  padding: .8rem; border-radius: 8px; text-align: center; letter-spacing: 2px;
  word-break: break-all; margin: .5rem 0;
}

button {
  cursor: pointer; border: none; border-radius: 8px; padding: .6rem 1.1rem;
  font-size: .92rem; font-weight: 600; transition: background .15s;
}
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-hover); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.ghost:hover { color: var(--text); border-color: var(--muted); }
button.full { width: 100%; margin-top: 1.1rem; }
button.small { padding: .3rem .7rem; font-size: .8rem; }
button.danger { background: transparent; border: 1px solid var(--red); color: var(--red); }

/* App shell */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: var(--bg-alt); border-right: 1px solid var(--border);
  padding: 1.5rem 1rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar nav { margin-top: 2rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.sidebar nav a {
  padding: .55rem .8rem; border-radius: 8px; color: var(--muted);
  cursor: pointer; text-decoration: none; font-weight: 500;
}
.sidebar nav a:hover { color: var(--text); background: var(--panel); }
.sidebar nav a.active { color: #fff; background: var(--accent); }
.sidebar-footer { display: flex; flex-direction: column; gap: .6rem; }
.sidebar-footer a { color: var(--muted); text-decoration: none; font-size: .85rem; }
.sidebar-footer a:hover { color: var(--text); }

main { flex: 1; padding: 2rem; max-width: none; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.page-head h2 { margin-bottom: 0; }
/* Shared spacing below the explanatory paragraph under an admin page title. */
.page-desc { margin-top: .35rem; margin-bottom: 1.4rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.panel-head h3 { margin-bottom: 0; }
@media (max-width: 520px) {
  .panel-head { align-items: flex-start; flex-wrap: wrap; gap: .65rem; }
  .panel-head button { margin-left: auto; }
}

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.2rem;
}
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 1.2rem; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.card .label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.card .value { font-size: 1.6rem; font-weight: 700; margin-top: .3rem; }
.card .value.green { color: var(--green); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
  text-align: left; padding: .5rem .6rem; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px;
}
.table td { padding: .55rem .6rem; border-bottom: 1px solid rgba(42,51,71,.5); }
.table tr:last-child td { border-bottom: none; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: rgba(79,124,255,.06); }
.mono { font-family: ui-monospace, monospace; font-size: .82rem; }

/* Asset display-order controls: drag handle, persisted position, and the
   keyboard/pointer Move Up/Down fallback all live in the first column. */
.asset-order-cell { white-space: nowrap; }
.asset-order-cell .drag-handle { cursor: grab; color: var(--muted); margin-right: .4rem; user-select: none; }
.asset-order-cell .order-pos { display: inline-block; min-width: 1.4rem; text-align: right; font-weight: 700; margin-right: .4rem; }
.asset-order-cell .reorder-btns button { padding: .1rem .45rem; font-size: .8rem; line-height: 1; }
#tbl-assets tr[draggable="true"] { cursor: grab; }
#tbl-assets tr.dragging { opacity: .5; background: rgba(79,124,255,.08); }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge.on { background: rgba(46,204,143,.15); color: var(--green); }
.badge.off { background: rgba(255,93,108,.15); color: var(--red); }
.badge.amber { background: rgba(255,181,71,.15); color: var(--amber); }
.badge.blue { background: rgba(79,124,255,.15); color: var(--accent); }
.badge.net { background: rgba(138,147,166,.15); color: var(--muted); letter-spacing: .3px; }

a.link { color: var(--accent); text-decoration: none; }
a.link:hover { text-decoration: underline; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* Key/value detail view (transaction modal) */
.kv-section { margin-bottom: 1.1rem; }
.kv-section:last-child { margin-bottom: 0; }
.kv-section h4 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  font-weight: 700; margin-bottom: .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}
.kv-row { display: grid; grid-template-columns: 128px 1fr; gap: .6rem; padding: .22rem 0; font-size: .85rem; align-items: baseline; }
.kv-row .kv-k { color: var(--muted); }
.kv-row .kv-v { word-break: break-all; }

.treasury-wallet-row .kv-v { display: flex; flex-wrap: wrap; gap: .55rem .8rem; align-items: center; }
.treasury-actions { display: inline-flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.treasury-refresh { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.treasury-refreshed { font-size: .8rem; }
a.button-link {
  display: inline-block; border-radius: 8px; padding: .3rem .7rem;
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
a.button-link.ghost { color: var(--muted); border: 1px solid var(--border); }
a.button-link.ghost:hover { color: var(--text); border-color: var(--muted); }
.treasury-qr { display: grid; gap: .9rem; justify-items: center; }
.treasury-qr img {
  width: 220px; height: 220px; border-radius: 8px; background: #fff;
  border: 12px solid #fff;
}
.treasury-address {
  width: 100%; padding: .75rem; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 8px; word-break: break-all;
  text-align: center;
}

/* Fee rule groups (Fees page) */
.callout {
  background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.35);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: .6rem .9rem; font-size: .85rem; margin-bottom: 1.2rem;
}
.callout code {
  font-family: ui-monospace, monospace; font-size: .8rem;
  background: var(--bg-alt); padding: .05rem .35rem; border-radius: 4px;
}
.fee-group { padding: .9rem 1.2rem; }
.fee-group-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.fee-group-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--text); padding: .3rem .4rem; font-size: 1rem;
}
.fee-group-toggle:hover { color: var(--accent); }
.fee-group-toggle .chevron { color: var(--muted); transition: transform .15s; }
.fee-group-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.fee-group-body { margin-top: .6rem; }

/* Filters */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { width: auto; flex: 1; min-width: 130px; }
.filters button { flex-shrink: 0; }

/* Wide data tables scroll horizontally inside their panel instead of
   stretching the page or being clipped. The pager lives OUTSIDE this wrapper
   so it never scrolls off to the side with the table. */
.table-scroll { width: 100%; overflow-x: auto; }

/* The pager stays pinned to the bottom of the viewport while its list is in
   view, so pagination is reachable without scrolling to the end of a long
   page. It sits on an opaque bar so rows scroll cleanly behind it. */
.pager {
  display: flex; gap: .6rem; align-items: center; justify-content: flex-end;
  font-size: .85rem; color: var(--muted);
  position: sticky; bottom: 0; z-index: 5;
  margin-top: .4rem; padding: .7rem 0 .2rem;
  background: var(--panel); border-top: 1px solid var(--border);
}

/* Chart */
.chart { height: 220px; display: flex; align-items: flex-end; gap: 6px; padding-top: 1rem; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart .bar { width: 100%; background: linear-gradient(180deg, var(--accent), #2b4bb8); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar-label { font-size: .62rem; color: var(--muted); white-space: nowrap; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  width: 440px; max-height: 85vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 1.5rem 1.5rem;
}
/* Sticky header: the close control stays reachable while a long form scrolls
   inside .modal's own overflow container. The modal's top padding lives here
   (not on .modal) — a negative top margin on a sticky box renders shifted
   down in Chrome and overlaps the first form label. */
.modal-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  background: var(--panel);
  margin: 0 -1.5rem .2rem; padding: 1.5rem 1.5rem .6rem;
}
.modal-header h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.modal-close {
  flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; line-height: 1;
  font-size: 1.25rem; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.modal-close:hover { color: var(--text); border-color: var(--muted); }
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; }

/* User-row Actions dropdown */
.action-menu { position: relative; display: inline-block; }
.action-menu-trigger[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.action-menu-list {
  position: fixed; z-index: 30; min-width: 150px;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: .3rem; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.action-menu-list button {
  background: transparent; color: var(--text); text-align: left;
  padding: .45rem .7rem; border-radius: 6px; font-weight: 500; font-size: .85rem;
}
.action-menu-list button:hover { background: rgba(79,124,255,.15); }
.action-menu-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.action-menu-sep { height: 1px; background: var(--border); margin: .25rem .3rem; }
/* Keep per-row action buttons on one line in narrow / scrolling tables */
.row-actions { white-space: nowrap; }

/* Toast */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
  background: var(--green); color: #06281a; font-weight: 600;
  padding: .8rem 1.2rem; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.toast.err { background: var(--red); color: #fff; }

/* Worker Settings */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.ws-control { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 1rem; }
.ws-control-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.ws-control-title { font-weight: 600; color: var(--text); }
.ws-toggle { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; white-space: nowrap; }
.ws-toggle input { width: auto; margin: 0; }
.ws-toggle-state { font-size: .85rem; color: var(--muted); }
.ws-control input[type="number"] { width: 100%; }

/* Card Program Settings groups (Finance page). Each group is its own bordered,
   independently collapsible section so the three settings areas read as
   separate blocks instead of a cramped run of headings, at both desktop and
   narrow widths. The chevron mirrors the fee-group pattern. */
.cps-groups { display: flex; flex-direction: column; gap: 1rem; }
.cps-group { border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1.1rem; }
.cps-group-head { margin: 0; font-size: 1rem; }
.cps-group-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: transparent; color: var(--text); padding: .25rem 0;
  font-size: 1rem; font-weight: 600;
}
.cps-group-toggle:hover { color: var(--accent); }
.cps-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.cps-group-toggle .chevron { color: var(--muted); flex-shrink: 0; transition: transform .15s; }
.cps-group-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.cps-group-body { margin-top: .85rem; display: flex; flex-direction: column; gap: .85rem; }
/* The persistent 220px sidebar plus main/panel/group padding can leave the
   group body narrower than the default .ws-grid 280px column minimum at any
   viewport width, so a viewport breakpoint can't protect it. Cap the column
   minimum at the container width instead: columns stay 280px where they fit
   and shrink with the container where they don't. */
.cps-group .ws-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Raw JSON expansion rows (unified Visa
   transaction details). Content is written via textContent only — this style
   just keeps large hostile-looking payloads scrollable and monospaced. */
.raw-json {
  margin: 0; padding: .75rem 1rem; max-height: 420px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
}

/* Treasury tier tabs (Withdrawal Main / Clean / Dirty wallet selector). */
.tier-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tier-tab {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .45rem .9rem; font-size: .85rem;
}
.tier-tab:hover { color: var(--text); border-color: var(--muted); }
.tier-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }