:root{
  --bg:#0b0d10;
  --panel:#11151b;
  --panel2:#0f1318;
  --fg:#ffffff;
  --muted:#aab3bf;
  --line:#253042;
  --accent:#ffffff;
  --danger:#ff5a5a;
  --ok:#7ae582;
  --radius:14px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
}
a{color:var(--fg); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px; margin:0 auto; padding:18px 16px 12px; height:100dvh; display:flex; flex-direction:column;}
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow: var(--shadow);
}
.brand{display:flex; align-items:center; gap:12px; min-width:280px}
.brand img{width:44px; height:44px; display:block}
.brand .t{line-height:1.15}
.brand .t .h{font-size:14px; font-weight:650}
.brand .t .s{font-size:12px; color:var(--muted)}
.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.ctrl{display:flex; align-items:center; gap:8px}
label{font-size:12px; color:var(--muted)}
select, input, textarea{
  background:var(--panel); color:var(--fg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  font-size:13px;
}
select{min-width:240px}
select.small{min-width:160px}
.btn{
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--fg);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:#3b4a63}
.btn.primary{background:#ffffff; color:#000; border-color:#ffffff}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(255,90,90,.5)}
.badge{font-family:var(--mono); font-size:12px; color:var(--muted)}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  margin-top:14px;
  flex:1 1 auto;
  min-height:0;
}
.panel{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
}
.panel h3{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.kv{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:8px 12px;
  align-items:start;
  font-size:13px;
}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--mono); font-size:12.5px; color:var(--fg)}
.kv .v .muted{color:var(--muted); font-family:var(--sans); font-size:13px}
hr.sep{border:none; border-top:1px solid var(--line); margin:12px 0}
.note{color:var(--muted); font-size:12.5px; line-height:1.45}
.mono{font-family:var(--mono)}
.table{width:100%; border-collapse:collapse; font-size:12.5px}
.table th,.table td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top}
.table th{color:var(--muted); font-weight:600}
.small{font-size:12px; color:var(--muted)}
.jsonbox{
  border:1px solid var(--line);
  border-radius:12px;
  background:#0a0d12;
  padding:10px;
  max-height:220px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12px;
  color:#d7deea;
}

/* Larger JSON preview (selected product) */
.jsonbox--large{
  /* Force a visible window even when JSON is short */
  height:320px;
  min-height:320px;
  max-height:520px;
  overflow-y:scroll;
  overflow-x:auto;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Tape scroll container */
.tapebox{
  min-height:220px;
  max-height:320px;
  overflow-y:scroll;
  overflow-x:auto;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0a0d12;
  box-sizing:border-box;
  padding-right:10px; /* avoid scrollbar overlaying rightmost text */
}
.tapebox .table{border:none; border-radius:0; margin:0;}
.tapebox .table thead th{position:sticky; top:0; background:#0a0d12; z-index:1;}

/* Tape readability: keep key fields on one line; let NOTE expand via <details> */
.tapebox .table th:nth-child(-n+5),
.tapebox .table td:nth-child(-n+5){
  white-space:nowrap;
}

.tapeNote{
  margin:0;
}
.tapeNote > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.tapeNote > summary::-webkit-details-marker{display:none;}
.tapeNoteShort{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:52ch;
}
.tapeNoteMore{
  display:inline-block;
  padding:3px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:11px;
  color:#fff;
  background:rgba(255,255,255,.06);
}
.tapeNoteFull{
  margin-top:6px;
  color:#d7deea;
  white-space:pre-wrap;
  line-height:1.45;
}

/* Visible white scrollbars (best-effort: browser/OS dependent) */
.jsonbox--large, .tapebox, #jsonPreview, #tapeBox{
  scrollbar-width:auto;
  scrollbar-color:#ffffff rgba(255,255,255,.18);
}
.jsonbox--large::-webkit-scrollbar, .tapebox::-webkit-scrollbar, #jsonPreview::-webkit-scrollbar, #tapeBox::-webkit-scrollbar{width:14px; height:14px;}
.jsonbox--large::-webkit-scrollbar-track, .tapebox::-webkit-scrollbar-track, #jsonPreview::-webkit-scrollbar-track, #tapeBox::-webkit-scrollbar-track{background:rgba(255,255,255,.26); border-radius:14px;}
.jsonbox--large::-webkit-scrollbar-thumb, .tapebox::-webkit-scrollbar-thumb, #jsonPreview::-webkit-scrollbar-thumb, #tapeBox::-webkit-scrollbar-thumb{
  background:#ffffff;
  border-radius:14px;
  /* Avoid a dark border that makes the right gutter read as black */
  border:2px solid rgba(255,255,255,.18);
}
.jsonbox--large::-webkit-scrollbar-thumb:hover, .tapebox::-webkit-scrollbar-thumb:hover, #jsonPreview::-webkit-scrollbar-thumb:hover, #tapeBox::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.92);}
.footer{
  margin-top:14px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--muted);
  font-size:12px;
  padding:10px 2px;
}
/* Gate modal */
.modalBackdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center;
  padding:18px;
  z-index:9999;
}
.modal{
  width:min(760px, 96vw);
  background:#0c1016;
  border:1px solid #2a364a;
  border-radius:18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #203046;
}
.modalHead .title{font-size:13px; font-weight:650}
.modalBody{
  padding:14px 16px;
  max-height: min(60vh, 520px);
  overflow:auto;
  color:#e7edf6;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}
.modalFoot{
  display:flex; gap:10px; justify-content:flex-end;
  padding:12px 16px;
  border-top:1px solid #203046;
}
/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .brand{min-width:unset}
  select{min-width:220px}
}

.brand a{display:inline-flex; align-items:center}

[data-page="brokers"] #footerEmail{display:none}


/* Tape: force readable text color and size */
.tapebox .table td{color:#fff; font-size:13px; line-height:1.25;}
.tapebox .table th{font-size:12px;}


/* Tape box: force high-contrast thumb (requested) */
#tapeBox{ scrollbar-color:#ffffff rgba(255,255,255,.22) !important; }
#tapeBox::-webkit-scrollbar-thumb{ background:#ffffff !important; border:0 !important; }
#tapeBox::-webkit-scrollbar-track{ background:rgba(255,255,255,.22) !important; }


/* Right-edge (panel + page) scrollbars: force high-contrast white for visibility */
html, body, .panel{
  scrollbar-color: #ffffff rgba(255,255,255,0.18);
  scrollbar-width: auto;
}

html::-webkit-scrollbar, body::-webkit-scrollbar, .panel::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.14);
  border-radius: 12px;
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb{
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.45);
}

.panel{
  scrollbar-gutter: stable;
}