/* XRPL Token Services — "Deep Space Glass" theme (option 1c)
   Drop-in replacement for static/style.css. Same class names as before, so no
   template changes are required. The last section beats the light-mode rules
   that individual templates declare in their own {% block head %} <style>
   blocks by using one extra level of specificity (body .foo). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #0b0f19;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-solid: #12182a;
  --edge: rgba(255, 255, 255, 0.10);
  --edge-strong: #334155;
  --field: #1e2638;
  --text: #e2e8f0;
  --text-bright: #f1f5f9;
  --muted: #94a3b8;
  --link: #a5b4fc;
  --sel: rgba(56, 189, 248, 0.22);
  --grad: linear-gradient(135deg, #7c3aed, #2563eb);
  --gloss: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.35), transparent 60%);
  --good: #5eead4;
  --warn: #fcd34d;
  --bad: #fca5a5;
  --r: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(124, 58, 237, 0.24), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(37, 99, 235, 0.20), transparent 46%);
  background-attachment: fixed;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: #c7d2fe; text-decoration: underline; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 22px;
  padding: 0 24px; min-height: 58px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(10px);
  color: var(--text);
  flex-wrap: wrap;
}
header h1 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
header h1::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background-image: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.6), transparent 60%), var(--grad);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
header .project-chip {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
header .project-chip strong { color: var(--text-bright); font-weight: 700; }

/* ---------- layout ---------- */
.page-shell {
  display: flex; align-items: flex-start; gap: 28px;
  /* Sidebar width + gap ON TOP OF main's own original 1536px — the sidebar
     used to live inside the header, so it never competed with page content
     for width. Room for it should come from growing the shell, not from
     shrinking main (confirmed live: main's own rows of boxes were visibly
     narrower/wrapping once the sidebar started eating into that 1536px). */
  max-width: calc(1536px + 196px + 28px);
  margin: 28px auto 56px; padding: 0 22px;
}
main { flex: 1; min-width: 0; max-width: 1536px; }

/* ---------- sidebar nav (was a horizontal bar inside header) ---------- */
.sidebar {
  width: 196px; flex-shrink: 0;
  position: sticky; top: 20px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px;
}
.sidebar nav a:hover { color: var(--text); background: rgba(148, 163, 184, 0.14); text-decoration: none; }
.sidebar nav a.active { background: var(--sel); color: var(--text-bright); }
/* Wizard steps nested under "Airdrop system" — indented and a size down,
   the same "this belongs to the item above it" convention as the
   fieldset/legend hierarchy used everywhere else on this site. */
.sidebar nav a.sub {
  padding-left: 30px; font-size: 12.5px; font-weight: 500;
}
@media (max-width: 860px) {
  .page-shell { flex-direction: column; gap: 4px; }
  .sidebar { width: 100%; position: static; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
}
h2 { margin: 0 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -0.6px; color: var(--text-bright); }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
/* A labelled sub-section INSIDE a card (e.g. the explorer's Issued/Held
   summary boxes above the trustlines table) — a fieldset here would nest a
   second bordered card inside the one it already sits in (confirmed live:
   read as a literal card-in-a-card, double border). A heading + a bottom
   rule instead keeps the sections visually separated without a second box. */
.lines-subsection { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.lines-subsection h4 {
  margin: 0 0 8px; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.2px; color: var(--text-bright);
}
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 14px; letter-spacing: 0.2px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* ---------- panels & forms ---------- */
fieldset {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  padding: 16px 20px 20px; margin: 16px 0;
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.25);
}
legend {
  padding: 0 10px; font-weight: 700; font-size: 13px; color: var(--text-bright);
  letter-spacing: 0.2px;
}
label {
  display: block; margin: 12px 0 5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--muted);
}
/* A label that WRAPS a radio/checkbox is an option, not a field caption —
   keep it sentence-case, readable, and aligned with its control. */
label:has(> input[type=radio]), label:has(> input[type=checkbox]) {
  display: flex; align-items: center; gap: 8px; margin: 7px 0;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--text);
}
label input[type=checkbox], label input[type=radio] { width: auto; margin: 0; accent-color: #7c3aed; }

input[type=text], input[type=number], input[type=password], input[type=email],
input[type=datetime-local], input[type=date], select, textarea {
  width: 100%; padding: 10px 14px;
  background: var(--field); color: var(--text-bright);
  border: 1px solid var(--edge-strong); border-radius: 11px;
  font: inherit; font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
input[type=number], td input, .dh-pair input {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus { outline: 1px solid #7c3aed; border-color: #7c3aed; }
input::placeholder, textarea::placeholder { color: #64748b; }
select option { background: var(--panel-solid); color: var(--text-bright); }
textarea { min-height: 54px; resize: vertical; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
.memo-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.memo-row textarea { flex: 1; }

/* ---------- buttons ---------- */
button, .btn {
  padding: 9px 18px; border: 1px solid var(--edge); border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, 0.12); }
button.primary {
  border: none; color: #fff;
  background-image: var(--gloss), var(--grad);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}
button.primary:hover { filter: brightness(1.12); }
button.danger {
  border: none; color: #fff;
  background-image: var(--gloss), linear-gradient(135deg, #e11d48, #b91c1c);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- tags, notices ---------- */
.tag {
  display: inline-block; margin-left: 7px; padding: 4px 9px; border-radius: 999px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px; vertical-align: middle;
}
.tag.std  { background: rgba(94, 234, 212, 0.16); color: var(--good); }
.tag.cost { background: rgba(217, 119, 6, 0.20); color: var(--warn); }

.warn, .err, .flash {
  padding: 11px 16px; border-radius: 12px; font-size: 13.5px; margin: 12px 0;
  border: 1px solid; line-height: 1.55;
}
.warn  { background: rgba(217, 119, 6, 0.14); border-color: rgba(252, 211, 77, 0.4); color: #fde68a; }
.err   { background: rgba(225, 29, 72, 0.14); border-color: rgba(252, 165, 165, 0.4); color: #fecaca; }
.flash { background: rgba(56, 189, 248, 0.14); border-color: rgba(165, 180, 252, 0.4); color: #dbeafe; }

.norms {
  background: rgba(94, 234, 212, 0.08); border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 12px; padding: 12px 16px 10px; font-size: 13px; margin: 12px 0 18px;
  line-height: 1.6; color: #cbd5e1;
}
.norms .norms-head {
  display: flex; align-items: center; gap: 7px; font-weight: 700;
  color: var(--good); margin-bottom: 5px;
}
.norms ul { margin: 5px 0 5px 18px; padding: 0; }
.norms li { margin: 3px 0; }
.norms b { color: var(--good); font-weight: 600; }

/* ---------- tables ---------- */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--r); overflow: hidden;
}
th, td {
  padding: 11px 14px; text-align: left; font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
th {
  background: rgba(255, 255, 255, 0.04); color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
td.num, th.num { text-align: right; }
td.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
tr.discount-row td { color: var(--good); font-style: italic; }

/* ---------- stats ---------- */
#stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
  padding: 13px 16px;
}
.stat .v {
  font-size: 24px; font-weight: 500; color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.stat .k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}

#log {
  background: #070a11; color: #a7f3d0; padding: 14px; border-radius: 12px;
  border: 1px solid var(--edge);
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12px;
  height: 320px; overflow-y: auto; white-space: pre-wrap;
}

.phase {
  display: inline-block; margin-left: 8px; padding: 4px 12px; border-radius: 999px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
}
.phase.idle     { background: rgba(148, 163, 184, 0.16); color: var(--muted); }
.phase.scanning { background: rgba(56, 189, 248, 0.18); color: #7dd3fc; }
.phase.sending  { background: rgba(217, 119, 6, 0.20); color: var(--warn); }
.phase.done     { background: rgba(94, 234, 212, 0.16); color: var(--good); }
.phase.error    { background: rgba(225, 29, 72, 0.18); color: var(--bad); }

/* ---------- cards ---------- */
.memo-card {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge);
  border-radius: 14px; padding: 12px 16px; margin: 12px 0; transition: opacity 0.15s;
}
.memo-card.disabled { opacity: 0.4; }
.memo-card.disabled .memo-card-body input,
.memo-card.disabled .memo-card-body textarea,
.memo-card.disabled .memo-card-body select { pointer-events: none; }
.memo-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.memo-card-head label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0;
                        text-transform: none; color: var(--text); font-family: inherit; }

.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 16px;
}
.tool-card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.28);
}
.tool-card h3 { margin: 0; color: var(--text-bright); }
.tool-card p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.tool-card a { margin-top: 4px; align-self: flex-start; }
.tool-card form { margin: 0; }

.dh-pair { display: flex; gap: 6px; align-items: center; }
.dh-pair input { width: 78px; padding: 8px 10px; }
.dh-pair .sep { color: var(--muted); font-size: 12px; }

.icon-preview {
  width: 80px; height: 80px; margin-top: 8px; border-radius: 12px;
  border: 1px dashed var(--edge-strong); background: rgba(255, 255, 255, 0.04);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: #64748b;
}
.icon-preview img { max-width: 100%; max-height: 100%; }

/* ---------- overrides for per-template light styling ----------
   These templates set their own colours in {% block head %}, which loads after
   this file. One extra `body` in the selector outranks them, so the tabs and
   cards below follow the dark theme without editing those templates. */
body .tok-tab, body .memo-tab, body .rec-tab, body .tl-tab {
  padding: 8px 15px; border: 1px solid var(--edge); border-bottom: none;
  border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, 0.04);
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
  margin-bottom: -2px;
}
body .tok-tab.active, body .memo-tab.active, body .rec-tab.active, body .tl-tab.active {
  background: var(--sel); color: var(--text-bright); border-color: var(--edge);
  border-bottom: 2px solid transparent; font-weight: 700;
}
body .tok-tabbar, body .memo-tabbar, body .rec-tabbar, body .tl-tabbar {
  border-bottom: 2px solid var(--edge);
}
body .tok-tab-add, body .memo-tab-add, body .rec-tab-add {
  padding: 8px 15px; border: 1px dashed var(--edge-strong); border-radius: 10px;
  background: transparent; color: var(--link); font-size: 13px; cursor: pointer;
}
body .tok-tab-add:disabled, body .memo-tab-add:disabled, body .rec-tab-add:disabled {
  color: #64748b; cursor: not-allowed;
}
body .rec-card, body .pf-hero, body .trust-summary {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.25); color: var(--text);
}

/* portfolio.html */
body .pf-hero {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, 0.25);
}
body .pf-hero .big { color: var(--text-bright); font-variant-numeric: tabular-nums; }
body .pf-hero .usd, body .pf-hero .split { color: var(--muted); }
body .pf-hero .split strong { color: var(--text-bright); }
body .pf-sub { color: var(--muted); }
body .pf-bar { background: rgba(255, 255, 255, 0.10); }
/* Pre-login notice: work in progress that isn't saved yet. Amber rather than
   red — it's a caveat to act on, not an error that already happened. */
.note-warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px; padding: 10px 14px; margin: 12px 0;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.note-warn a { color: var(--link); }
body .lost-word { background: rgba(245, 158, 11, 0.20); color: #fbbf24; }
body .lost-word:hover { background: rgba(245, 158, 11, 0.32); }

body .pf-freshness button { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
body .pf-freshness button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12); color: var(--text-bright);
}
body .pf-range button { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
body .pf-range button:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-bright); }
body .pf-range button.active { background: var(--sel); color: var(--text-bright); }
body .pf-api { background: var(--panel); border: 1px solid var(--edge); color: var(--muted); }
body .pf-api h4 { color: var(--text); }
body .tag.frozen { background: rgba(148, 163, 184, 0.18); color: var(--muted); }
body .tag.nop { background: rgba(225, 29, 72, 0.18); color: var(--bad); }

/* timeline.html */
body .trust-summary {
  background: rgba(20, 26, 44, 0.92); border: 1px solid var(--edge);
  border-radius: 10px; color: var(--text);
}
body .trust-bar-track { background: var(--field); }

/* vanity_picker.html, timevault.html — split rows */
body .vrow, body .cart-row, body #vres .vrow {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body .vrow:first-child, body .cart-row:first-child, body #vres .vrow:first-child { border-top: 0; }

/* logs.html inline code colour */
body td code { color: var(--muted); font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Inline style="" attributes in the templates can only be beaten with
   !important — kept to the few that would otherwise stay white. */
body main canvas,
body .vanity-picker, body #rx-vanity-picker, body .rec-vanity-picker,
body #memo-editor {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--edge) !important;
  border-radius: 12px !important;
}