:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #061021;
  color: #eef6ff;
  --navy-950: #061021;
  --navy-900: #10264A;
  --navy-800: #0d2a52;
  --navy-700: #174275;
  --red-600: #C73A3A;
  --red-700: #B42318;
  --red-50: #FEF2F2;
  --red-200: #FECACA;
  --green-600: #0F8A5F;
  --green-50: #ECFDF3;
  --blue-50: #EEF4FF;
  --orange-50: #FFF7ED;
  --orange-700: #B7791F;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-500: #A7B3C6;
  --glass: rgba(10, 25, 50, .68);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -5%, rgba(199,58,58,.34) 0, transparent 19rem),
    radial-gradient(circle at 88% 8%, rgba(23,66,117,.62) 0, transparent 26rem),
    linear-gradient(145deg, #050b17 0%, #08192f 46%, #071326 100%);
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  background:
    linear-gradient(122deg, transparent 0 36%, rgba(255,255,255,.06) 36.2% 36.7%, transparent 37% 100%),
    linear-gradient(122deg, transparent 0 54%, rgba(199,58,58,.18) 54.1% 54.7%, transparent 55% 100%),
    linear-gradient(302deg, transparent 0 63%, rgba(255,255,255,.05) 63.2% 63.8%, transparent 64% 100%);
  mask-image: linear-gradient(#000, transparent 78%);
}
body::after {
  inset: auto 0 0;
  height: 38vh;
  background: linear-gradient(0deg, rgba(6,16,33,.92), transparent);
}
.ops-shell { position: relative; z-index: 1; width: min(1220px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 46px; display: grid; grid-template-columns: minmax(350px, 430px) minmax(0, 1fr); gap: 20px; align-items: start; }
.wallet-console { position: sticky; top: 18px; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 38px; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(22px); animation: rise-in .55s ease both; }
.wallet-console::before { content:""; display:block; width: 78px; height: 5px; border-radius:999px; margin: 2px auto 12px; background: rgba(255,255,255,.20); }
.wallet-hero, .wallet-card, .action-rail, .service-grid { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(16,38,74,.82), rgba(7,19,38,.68)); box-shadow: 0 18px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.wallet-hero { position: relative; overflow: hidden; border-radius: 30px; padding: 16px; }
.wallet-hero::after { content:""; position:absolute; right:-70px; top:60px; width:190px; height:190px; border-radius:50%; border: 18px solid rgba(199,58,58,.15); box-shadow: -42px 42px 0 rgba(255,255,255,.035); }
.brand-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--navy-900); box-shadow: 0 10px 26px rgba(0,0,0,.26); }
.brand-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); }
.rail { position: absolute; top: 11px; width: 11px; height: 17px; border-top: 3px solid; border-bottom: 3px solid; }
.rail::after { content: ""; position: absolute; top: 6px; width: 10px; border-top: 3px solid currentColor; }
.rail-west { left: 11px; color: #fff; border-left: 3px solid; border-radius: 5px 0 0 5px; }
.rail-east { right: 11px; color: var(--red-600); border-right: 3px solid; border-radius: 0 5px 5px 0; }
.brand-copy { min-width: 0; flex: 1; }
.eyebrow, .kicker, .group-label { margin: 0; color: #8bd3ff; font-size: .62rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 2px 0 0; color: #fff; font-size: 1.18rem; line-height: 1; font-weight: 950; letter-spacing: -.035em; }
.sandbox-chip, .status-chip, .status-pill, .mini-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 999px; padding: 5px 9px; border: 1px solid var(--red-200); background: var(--red-50); color: var(--red-700); font-size: .66rem; font-weight: 950; white-space: nowrap; }
.status-pill { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.balance-card { position: relative; z-index:1; margin-top: 14px; border-radius: 28px; padding: 16px; background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.16), transparent 26%), linear-gradient(135deg, var(--navy-900), var(--navy-700)); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.balance-card::before { content:""; position:absolute; inset: auto -20px -54px 48%; height:130px; border-radius: 999px 0 0 0; border-left: 2px solid rgba(255,255,255,.14); border-top: 2px solid rgba(199,58,58,.42); transform: rotate(-18deg); }
.balance-topline { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.mini-chip { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.12); color: #fff; }
.balance-line { margin-top: 9px; color: white; font-size: clamp(2.35rem, 8vw, 3.2rem); line-height: .88; font-weight: 950; letter-spacing: -.06em; }
.hero-subcopy { color: rgba(255,255,255,.75); margin: 9px 0 0; line-height: 1.38; font-size:.86rem; }
.segment { display: inline-grid; grid-auto-flow: column; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15); }
.segment span { padding: 7px 13px; border-radius: 999px; color: rgba(255,255,255,.78); font-size: .75rem; font-weight: 900; }
.segment .active { background: #fff; color: var(--navy-900); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.hero-stats div { padding:9px; border-radius:16px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); min-width:0; }
.hero-stats span { display:block; color:rgba(255,255,255,.58); font-size:.62rem; font-weight:800; }
.hero-stats strong { display:block; margin-top:2px; color:#fff; font-size:.72rem; line-height:1.15; overflow-wrap:anywhere; }
.status-card { position: relative; z-index:1; display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 22px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); }
#status { max-width: min(210px, 100%); }
.meta { color: var(--gray-500); font-size: .76rem; line-height: 1.35; }
.action-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 9px; border-radius: 25px; animation: rise-in .55s .06s ease both; }
.rail-action { min-height: 70px; display: grid; place-items: center; gap: 6px; padding: 8px 5px; background: rgba(255,255,255,.95); color: var(--navy-900); box-shadow: none; }
.rail-action span:last-child { font-size: .68rem; font-weight: 950; line-height: 1.05; text-align: center; max-width: 72px; }
.line-icon, .service-icon { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 12px; background: var(--blue-50); color: var(--navy-900); }
.rail-action-scan .line-icon { background: var(--red-50); color: var(--red-600); }
.rail-action-travel .line-icon { background: var(--green-50); color: var(--green-600); }
.rail-action-pocket .line-icon { background: var(--orange-50); color: var(--orange-700); }
.scan-icon::before { content:""; position:absolute; inset:8px; border:2px solid currentColor; border-left-color:transparent; border-right-color:transparent; border-radius:4px; }
.reset-icon::before { content:""; position:absolute; inset:8px; border:2px solid currentColor; border-radius:50%; }
.reset-icon::after { content:""; position:absolute; right:7px; top:7px; width:7px; border-top:2px solid currentColor; transform:rotate(25deg); }
.settle-icon::before { content:""; position:absolute; left:8px; right:8px; top:10px; border-top:2px solid currentColor; box-shadow:0 5px 0 currentColor, 0 10px 0 currentColor; }
.export-icon::before { content:""; position:absolute; inset:9px 8px 7px; border:2px solid currentColor; border-top:0; border-radius:2px 2px 5px 5px; }
.export-icon::after { content:""; position:absolute; left:14px; top:6px; height:12px; border-left:2px solid currentColor; }
.service-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:12px; padding:10px; border-radius:25px; animation: rise-in .55s .10s ease both; }
.service-tile { min-height:76px; padding:9px 5px; border-radius:18px; display:grid; justify-items:center; align-content:center; gap:4px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); text-align:center; transition: transform .16s ease, background .16s ease; }
.service-tile:hover { transform: translateY(-2px); background:rgba(255,255,255,.12); }
.service-tile strong { color:#fff; font-size:.68rem; line-height:1.05; }
.service-tile small { color:var(--gray-500); font-size:.59rem; font-weight:800; }
.service-icon { width:25px; height:25px; border-radius:10px; background:rgba(255,255,255,.92); }
.service-icon::before, .service-icon::after { content:""; position:absolute; color: currentColor; }
.transfer-icon::before { inset:8px 5px; border-top:2px solid currentColor; box-shadow:0 7px 0 currentColor; }
.fx-icon::before { inset:6px; border:2px solid currentColor; border-radius:50%; } .fx-icon::after { left:11px; top:4px; height:17px; border-left:2px solid currentColor; transform:rotate(45deg); }
.topup-icon::before { inset:4px 8px; border:2px solid currentColor; border-radius:4px; }
.utilities-icon::before { left:7px; top:4px; height:12px; border-left:2px solid currentColor; box-shadow:7px 0 0 currentColor; } .utilities-icon::after { left:5px; right:5px; top:13px; border-top:2px solid currentColor; }
.cards-icon::before { inset:7px 4px; border:2px solid currentColor; border-radius:4px; } .cards-icon::after { left:5px; right:5px; top:11px; border-top:2px solid currentColor; }
.merchants-icon::before { left:5px; right:5px; top:7px; border-top:8px solid currentColor; opacity:.28; } .merchants-icon::after { inset:8px 6px 4px; border:2px solid currentColor; border-top:0; border-radius:0 0 4px 4px; }
.rewards-icon::before { inset:8px 5px 4px; border:2px solid currentColor; border-radius:4px; } .rewards-icon::after { left:12px; top:6px; bottom:5px; border-left:2px solid currentColor; }
.more-icon::before { left:6px; top:11px; width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:7px 0 0 currentColor, 14px 0 0 currentColor; }
.review-token, .controls { margin-top: 12px; padding: 12px; border-radius: 24px; }
.review-token { display: grid; grid-template-columns: 1fr; gap: 10px; animation: rise-in .55s .14s ease both; }
.token-copy { display:flex; justify-content:space-between; gap:10px; align-items:baseline; min-width: 0; }
.review-token label { color: white; font-weight: 950; }
.token-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.controls { display: grid; grid-template-columns: 1fr; gap: 12px; animation: rise-in .55s .18s ease both; }
.control-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.group-label { flex-basis: 100%; color: #cbe7ff; }
button { border: 0; border-radius: 999px; padding: 10px 14px; color: white; background: linear-gradient(135deg, var(--red-600), #df5b4f); font-weight: 950; cursor: pointer; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease; box-shadow: 0 10px 24px rgba(199,58,58,.22); }
button:hover { transform: translateY(-2px); filter: brightness(1.06); }
button:active { transform: scale(.97); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(139,211,255,.42); outline-offset: 2px; }
.button-secondary { color: var(--navy-900); background: #fff; box-shadow: 0 10px 24px rgba(255,255,255,.10); }
.button-ghost { color: #d9e8ff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
input, select { width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; padding: 10px 11px; color: #eef6ff; background: rgba(7,19,38,.76); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
input::placeholder { color: rgba(238,246,255,.44); }
input:hover, select:hover { border-color: rgba(255,255,255,.30); background: rgba(16,38,74,.72); }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
article { border-radius: 28px; padding: 16px; min-height: 192px; overflow: auto; animation: rise-in .55s .22s ease both; }
article.wide { grid-column: 1 / -1; }
h2 { margin: 0 0 12px; color: #ffffff; font-size: .95rem; line-height: 1.25; letter-spacing: -.01em; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.10); }
.row:first-child { border-top: 0; }
.row strong { color: #fff; }
.row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.row > .meta, .status-chip { text-align: right; }
.status-chip { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.10); color: #dbeafe; }
.status-chip.status-authorised, .status-chip.status-settled, .status-chip.status-reviewed, .status-chip.status-closed, .status-chip.status-reconciled, .status-chip.status-settled-to-partner { background: var(--green-50); color: var(--green-600); }
.status-chip.status-declined, .status-chip.status-timeout, .status-chip.status-open, .status-chip.status-mismatch { background: var(--red-50); color: var(--red-700); border-color: var(--red-200); }
.summary-card .row { grid-template-columns: minmax(0, 1fr) minmax(80px, auto); }
.exception-form { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(140px, 1fr) minmax(110px, .7fr) auto; gap: 8px; margin-top: 10px; }
pre { white-space: pre-wrap; word-break: break-word; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }
@media (max-width: 980px) { .ops-shell { grid-template-columns: 1fr; } .wallet-console { position: relative; top: auto; width:min(100%, 460px); margin:0 auto; } }
@media (max-width: 720px) { .ops-grid { grid-template-columns: 1fr; } .exception-form { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ops-shell { width: min(100% - 16px, 460px); padding-top: 8px; } .wallet-console { border-radius: 30px; padding: 9px; } .wallet-hero { border-radius: 25px; padding: 14px; } .brand-row { align-items: flex-start; } .sandbox-chip { margin-left:auto; padding-inline:8px; } .hero-stats { grid-template-columns:1fr; } .service-grid { gap:7px; padding:8px; } .service-tile { min-height:70px; } .rail-action span:last-child { font-size:.64rem; } }