/* XRBitcoinCash shared dynamic UI layer v1.0.0
   Visual-only system. No JS, transaction, wallet, ledger, or element behavior is changed.
   2026-09-19
*/

:root{
  --xrbc-ui-bg:#06101b;
  --xrbc-ui-panel:#0b1725;
  --xrbc-ui-panel-2:#0e1d2d;
  --xrbc-ui-line:rgba(94,153,204,.28);
  --xrbc-ui-line-soft:rgba(94,153,204,.14);
  --xrbc-ui-cyan:#67e8f9;
  --xrbc-ui-blue:#60a5fa;
  --xrbc-ui-green:#6ee7b7;
  --xrbc-ui-green-2:#4ade80;
  --xrbc-ui-yellow:#facc15;
  --xrbc-ui-red:#fca5a5;
  --xrbc-ui-purple:#c084fc;
  --xrbc-ui-muted:#8da6bc;
  --xrbc-ui-shadow:0 20px 52px rgba(0,0,0,.22);
  --xrbc-ui-inset:inset 0 1px 0 rgba(255,255,255,.025);
  --xrbc-ui-radius:14px;
  --xrbc-ui-grid:rgba(103,232,249,.025);
  --xrbc-ui-grid-green:rgba(74,222,128,.022);
}

html[data-theme="light"],
body.light-mode{
  --xrbc-ui-bg:#eef5fb;
  --xrbc-ui-panel:#ffffff;
  --xrbc-ui-panel-2:#f4f8fc;
  --xrbc-ui-line:rgba(37,99,235,.20);
  --xrbc-ui-line-soft:rgba(37,99,235,.10);
  --xrbc-ui-cyan:#0891b2;
  --xrbc-ui-blue:#2563eb;
  --xrbc-ui-green:#059669;
  --xrbc-ui-green-2:#16a34a;
  --xrbc-ui-yellow:#a16207;
  --xrbc-ui-red:#dc2626;
  --xrbc-ui-purple:#7e22ce;
  --xrbc-ui-muted:#587086;
  --xrbc-ui-shadow:0 18px 42px rgba(15,23,42,.09);
  --xrbc-ui-inset:inset 0 1px 0 rgba(255,255,255,.8);
  --xrbc-ui-grid:rgba(37,99,235,.025);
  --xrbc-ui-grid-green:rgba(5,150,105,.018);
}

html{
  scrollbar-color:rgba(96,165,250,.48) rgba(3,10,18,.7);
}

body{
  background-color:var(--xrbc-ui-bg);
  background-image:
    radial-gradient(circle at 14% -8%,rgba(37,99,235,.10),transparent 29rem),
    radial-gradient(circle at 86% 8%,rgba(126,34,206,.07),transparent 27rem),
    linear-gradient(var(--xrbc-ui-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--xrbc-ui-grid) 1px,transparent 1px);
  background-size:auto,auto,42px 42px,42px 42px;
  background-position:0 0,0 0,0 0,0 0;
  animation:xrbcAmbientGrid 36s linear infinite;
}

@keyframes xrbcAmbientGrid{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:20px 8px,-16px 10px,42px 42px,42px 42px}
}

::selection{
  background:rgba(37,99,235,.36);
  color:#f8fbff;
}

/* ---------- shared header ---------- */

.xrbc-index-header,
.site-header,
header[role="banner"]{
  border-bottom-color:rgba(96,165,250,.26)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(37,99,235,.11),transparent 27rem),
    radial-gradient(circle at 80% 0%,rgba(126,34,206,.07),transparent 24rem),
    linear-gradient(92deg,rgba(5,13,23,.98),rgba(9,23,38,.98),rgba(5,13,23,.98))!important;
  background-size:100% 100%,100% 100%,220% 100%!important;
  box-shadow:0 12px 36px rgba(0,0,0,.22),0 1px 0 rgba(96,165,250,.08)!important;
  animation:xrbcHeaderFlow 24s linear infinite;
}

html[data-theme="light"] .xrbc-index-header,
html[data-theme="light"] .site-header,
html[data-theme="light"] header[role="banner"],
body.light-mode .xrbc-index-header,
body.light-mode .site-header,
body.light-mode header[role="banner"]{
  background:
    radial-gradient(circle at 18% 0%,rgba(37,99,235,.07),transparent 27rem),
    radial-gradient(circle at 80% 0%,rgba(126,34,206,.05),transparent 24rem),
    linear-gradient(92deg,rgba(255,255,255,.98),rgba(244,248,252,.98),rgba(255,255,255,.98))!important;
}

@keyframes xrbcHeaderFlow{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 0,0 0,220% 0}
}

.xrbc-index-header-shell,
.ecosystem-header-inner,
.site-header-inner{
  position:relative;
}

.xrbc-index-brand img,
.site-header img,
.hero-identity img,
.identity img,
.wallet-account-row img{
  filter:drop-shadow(0 0 10px rgba(56,189,248,.12));
}

.xrbc-index-primary-nav,
.compact-header-nav,
nav[aria-label="Primary navigation"]{
  border-top-color:rgba(96,165,250,.08)!important;
  background:linear-gradient(180deg,rgba(6,15,26,.30),rgba(4,11,19,.08));
}

.nav-btn,
.xrbc-index-control,
.xrbc-index-ecosystem-link,
.xrbc-index-legal a{
  transition:
    border-color .18s ease,
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease!important;
}

.nav-btn:hover,
.nav-btn:focus-visible,
.xrbc-index-control:hover,
.xrbc-index-control:focus-visible,
.xrbc-index-ecosystem-link:hover,
.xrbc-index-ecosystem-link:focus-visible{
  color:#dff4ff!important;
  border-color:rgba(96,165,250,.48)!important;
  background-color:rgba(37,99,235,.08)!important;
  box-shadow:0 0 0 1px rgba(96,165,250,.08),0 0 18px rgba(37,99,235,.08)!important;
  transform:translateY(-1px);
}

.nav-btn[aria-current="page"],
.nav-btn.is-active,
.xrbc-index-control[aria-current="page"]{
  color:#dff4ff!important;
  border-color:rgba(96,165,250,.70)!important;
  background:
    linear-gradient(180deg,rgba(37,99,235,.16),rgba(37,99,235,.055))!important;
  box-shadow:
    inset 0 -2px 0 rgba(96,165,250,.85),
    0 0 20px rgba(37,99,235,.12)!important;
}

/* ---------- page surfaces ---------- */

:where(
  .card,
  .panel,
  .hero-card,
  .gate-card,
  .tool-card,
  .metric-card,
  .xaman-sign-panel,
  .disclosure-card,
  .venue-intelligence,
  .xrbc-trade-terminal
){
  border-color:var(--xrbc-ui-line)!important;
  box-shadow:var(--xrbc-ui-shadow),var(--xrbc-ui-inset);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

main :where(.card,.panel,.tool-card,.metric-card):hover{
  border-color:rgba(96,165,250,.38)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.24),0 0 24px rgba(37,99,235,.045),var(--xrbc-ui-inset);
}

:where(.hero-card,.order-hero,.value-hero,.gate-card){
  box-shadow:
    0 24px 64px rgba(0,0,0,.24),
    0 0 38px rgba(37,99,235,.045),
    var(--xrbc-ui-inset)!important;
}

.eyebrow{
  color:#74a9ff!important;
  letter-spacing:.075em!important;
  text-shadow:0 0 14px rgba(59,130,246,.12);
}

h1,h2,h3,
.section-title{
  text-wrap:balance;
}

main h1{
  text-shadow:0 6px 32px rgba(37,99,235,.08);
}

.section-heading,
.hero-top,
.hero-topline,
.gate-heading,
.board-heading,
.watch-card-head{
  border-color:var(--xrbc-ui-line-soft);
}

/* ---------- live / functional state language ---------- */

[data-state="working"],
[data-state="queue"]{
  --xrbc-state-color:var(--xrbc-ui-cyan);
}

[data-state="live"],
[data-state="complete"],
[data-state="aligned"],
[data-state="connected"],
[data-state="unlocked"]{
  --xrbc-state-color:var(--xrbc-ui-green);
}

[data-state="attention"],
[data-state="watch"],
[data-state="locked"]{
  --xrbc-state-color:var(--xrbc-ui-yellow);
}

[data-state="error"],
[data-state="wide"],
[data-state="danger"]{
  --xrbc-state-color:var(--xrbc-ui-red);
}

[data-state="working"],
[data-state="queue"]{
  animation:xrbcStatePulse 2.2s ease-in-out infinite;
}

@keyframes xrbcStatePulse{
  0%,100%{box-shadow:0 0 0 rgba(103,232,249,0)}
  50%{box-shadow:0 0 24px rgba(103,232,249,.055)}
}

.status.queue,
.audit-status-box.queue{
  color:var(--xrbc-ui-cyan)!important;
}

.status.ok,
.audit-status-box.ok{
  color:var(--xrbc-ui-green)!important;
}

.status.err,
.audit-status-box.err{
  color:var(--xrbc-ui-red)!important;
}

.audit-status-box,
.status-box,
.panel-note,
.notice{
  border-color:var(--xrbc-ui-line-soft)!important;
  box-shadow:inset 0 0 22px rgba(37,99,235,.025);
}

/* ---------- buttons and controls ---------- */

.btn,
button.btn,
a.btn,
button[class*="glow-"]{
  border-color:rgba(94,153,204,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 20px rgba(0,0,0,.08);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease!important;
}

.btn:hover:not(:disabled),
.btn:focus-visible,
button[class*="glow-"]:hover:not(:disabled),
button[class*="glow-"]:focus-visible{
  border-color:rgba(96,165,250,.58)!important;
  box-shadow:0 0 0 1px rgba(96,165,250,.08),0 0 22px rgba(37,99,235,.09)!important;
  transform:translateY(-1px);
}

.btn:active:not(:disabled),
button[class*="glow-"]:active:not(:disabled){
  transform:translateY(0);
}

.glow-green,
.btn.glow-green{
  border-color:rgba(52,211,153,.42)!important;
  box-shadow:0 0 20px rgba(16,185,129,.07)!important;
}

.glow-red,
.btn.glow-red{
  border-color:rgba(248,113,113,.42)!important;
  box-shadow:0 0 20px rgba(239,68,68,.06)!important;
}

button:disabled,
.btn:disabled{
  filter:saturate(.72);
}

input,
select,
textarea{
  border-color:rgba(94,153,204,.30)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:rgba(103,232,249,.56)!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.07),0 0 18px rgba(37,99,235,.055)!important;
}

/* ---------- pills / badges ---------- */

.badge,
.pill,
.section-badge,
.source-badge,
.venue-pill,
.function-state-chip{
  box-shadow:inset 0 0 18px rgba(37,99,235,.025);
}

.badge.mainnet,
.section-badge,
.pill{
  border-color:rgba(96,165,250,.28)!important;
}

.function-state-chip[data-state="live"],
.function-state-chip[data-state="complete"],
.badge.ok,
.pill.ok{
  border-color:rgba(110,231,183,.30)!important;
  color:var(--xrbc-ui-green)!important;
}

/* ---------- data tables / lists ---------- */

table{
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  color:#9fc6e8;
  border-bottom-color:rgba(96,165,250,.22)!important;
  background-color:rgba(9,23,38,.82);
}

tbody tr{
  transition:background-color .16s ease,box-shadow .16s ease;
}

tbody tr:hover{
  background-color:rgba(37,99,235,.045);
}

td,th{
  border-color:rgba(94,153,204,.15)!important;
}

.table-wrap,
.table-shell,
.orderbook,
.order-book,
.token-table-wrap{
  scrollbar-color:rgba(96,165,250,.48) rgba(3,10,18,.68);
}

/* ---------- metrics / live technical surfaces ---------- */

:where(
  .metric,
  .metric-card,
  .gate-metric,
  .venue-integrity-metric,
  .cleanup-route-node,
  .gate-route-node,
  .risk-route-node,
  .value-route-node,
  .venue-route-node,
  .battle-side,
  .battle-metric
){
  box-shadow:inset 0 0 24px rgba(37,99,235,.02);
}

:where(
  .cleanup-route-shell,
  .gate-live-route,
  .risk-gate-route,
  .value-gate-route,
  .venue-matrix,
  .ledger-battle-stage
){
  background-image:
    linear-gradient(var(--xrbc-ui-grid-green) 1px,transparent 1px),
    linear-gradient(90deg,var(--xrbc-ui-grid-green) 1px,transparent 1px);
  background-size:28px 28px;
  background-blend-mode:screen;
}

.progress{
  border-color:rgba(103,232,249,.12)!important;
  background:rgba(3,10,18,.72)!important;
}

.progress > span{
  box-shadow:0 0 18px rgba(34,211,238,.20);
}

/* ---------- logs / evidence ---------- */

.log,
pre.log,
pre[id*="log"],
.activity-log{
  border-color:rgba(103,232,249,.16)!important;
  background-image:
    linear-gradient(rgba(103,232,249,.025) 1px,transparent 1px)!important;
  background-size:100% 22px!important;
  box-shadow:inset 0 0 32px rgba(2,8,14,.38)!important;
}

.mono,
code,
pre{
  text-rendering:optimizeLegibility;
}

/* ---------- disclosure / details ---------- */

details{
  border-color:var(--xrbc-ui-line-soft)!important;
  transition:border-color .18s ease,box-shadow .18s ease;
}

details[open]{
  border-color:rgba(96,165,250,.30)!important;
  box-shadow:inset 0 0 22px rgba(37,99,235,.025);
}

summary{
  transition:color .18s ease;
}

summary:hover{
  color:#b8dcff;
}

/* ---------- shared footer ---------- */

.site-footer,
footer[aria-label="Site information"],
body > footer{
  position:relative;
  border-top-color:rgba(96,165,250,.24)!important;
  background:
    radial-gradient(circle at 20% 100%,rgba(37,99,235,.08),transparent 24rem),
    radial-gradient(circle at 80% 100%,rgba(126,34,206,.055),transparent 22rem),
    linear-gradient(90deg,rgba(4,12,21,.98),rgba(8,20,33,.98),rgba(4,12,21,.98))!important;
  background-size:100% 100%,100% 100%,220% 100%!important;
  box-shadow:0 -12px 36px rgba(0,0,0,.16),0 -1px 0 rgba(96,165,250,.06)!important;
  animation:xrbcFooterFlow 28s linear infinite;
}

html[data-theme="light"] .site-footer,
html[data-theme="light"] footer[aria-label="Site information"],
body.light-mode .site-footer,
body.light-mode footer[aria-label="Site information"]{
  background:
    radial-gradient(circle at 20% 100%,rgba(37,99,235,.05),transparent 24rem),
    radial-gradient(circle at 80% 100%,rgba(126,34,206,.04),transparent 22rem),
    linear-gradient(90deg,#fff,#f4f8fc,#fff)!important;
}

@keyframes xrbcFooterFlow{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 0,0 0,-220% 0}
}

.ecosystem-footer-links a,
.site-footer a{
  transition:color .18s ease,text-shadow .18s ease;
}

.ecosystem-footer-links a:hover,
.site-footer a:hover{
  color:#a8d8ff!important;
  text-shadow:0 0 14px rgba(59,130,246,.14);
}

/* ---------- scrollbars ---------- */

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(96,165,250,.42) rgba(3,10,18,.52);
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:rgba(3,10,18,.52);
}

*::-webkit-scrollbar-thumb{
  border:2px solid rgba(3,10,18,.52);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(96,165,250,.58),rgba(56,189,248,.34));
}

/* ---------- responsive / accessibility ---------- */

@media(max-width:980px){
  body{
    background-size:auto,auto,34px 34px,34px 34px;
  }
  .xrbc-index-header,
  .site-header,
  header[role="banner"]{
    animation-duration:30s;
  }
}

@media(max-width:640px){
  :where(.card,.panel,.hero-card,.gate-card,.tool-card,.metric-card){
    box-shadow:0 14px 34px rgba(0,0,0,.18),var(--xrbc-ui-inset);
  }
  .nav-btn:hover,
  .nav-btn:focus-visible,
  .btn:hover:not(:disabled),
  .btn:focus-visible{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  body,
  .xrbc-index-header,
  .site-header,
  header[role="banner"],
  .site-footer,
  footer[aria-label="Site information"],
  body > footer,
  [data-state="working"],
  [data-state="queue"]{
    animation:none!important;
  }
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}