: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: 1.5rem;
}
.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: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 150px;
  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%; }