:root{
  --bg0:#050807;
  --bg1:#060b09;
  --fg: rgba(240,255,250,.92);
  --muted: rgba(240,255,250,.65);
  --wire: rgba(0,255,170,.22);
  --wire2: rgba(0,255,170,.12);
  --glow: rgba(0,255,170,.18);
  --cardRadius: 18px;
  --gap: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}.toolkit-page{
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0,255,170,.06), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(0,255,170,.05), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--fg);
  font-family: var(--mono);
}
.toolkit-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px){
  .toolkit-shell{ grid-template-columns: 1fr; padding: 14px; }
}
.stack{ display:flex; flex-direction:column; gap: var(--gap); }
.threeCol{
  grid-template-columns: 1fr 1fr 1fr;
}
.cardWrap{
  display:block;
}
@media (max-width: 1180px){
  .threeCol{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .threeCol{ grid-template-columns: 1fr; }
}
.topbarx{
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 18px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0,255,170,0.10), 0 0 0 11px #000, 0 0 0 12px rgba(0,255,170,0.14);
}
.topbarx-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.brandx{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.brandx .t1{ font-size: 14px; letter-spacing: .12em; }
.brandx .t2{ font-size: 12px; color: var(--muted); letter-spacing: .18em; }
.centerline{
  font-size: 12px;
  letter-spacing: .20em;
  color: rgba(0,255,170,.9);
  text-align:center;
  white-space: nowrap;
}
.actionsx{ display:flex; justify-content:flex-end; gap:10px; }
.btnx{
  font-family: var(--mono);
  border-radius: 14px;
  border: 1px solid rgba(0,255,170,0.22);
  background: #000;
  color: var(--fg);
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(0,255,170,0.10);
}
.btnx:active{ transform: translateY(1px); }
.btnx--primary{ background: rgba(0,255,170,.06); }
@media (max-width: 900px){
  .topbarx-inner{ grid-template-columns: 1fr; }
  .brandx{ align-items:center; }
  .actionsx{ justify-content:stretch; }
  .btnx{ width: 100%; }
}.cardx{
  background: #000;
  border: 1px solid var(--wire);
  border-radius: var(--cardRadius);
  box-shadow: inset 0 0 0 1px var(--wire2), 0 0 18px rgba(0,255,170,.08);
}
.cardx .wireline{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,170,.20), transparent);
}.widget{
  padding: 14px;
}
.widget-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.widget-title{
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(0,255,170,.88);
}
.row{ display:flex; gap: 10px; align-items: center; }
.field{
  display:flex; flex-direction:column; gap:6px; flex:1;
}
.label{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .10em;
}
.select, .input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,170,0.18);
  background: rgba(255,255,255,0.02);
  color: var(--fg);
  font-family: var(--mono);
  padding: 0 12px;
  outline: none;
}
.select{ appearance: none; }
.amountRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
}
.smallBtn{
  height: 42px;
  min-width: 88px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,170,0.22);
  background: #000;
  color: var(--fg);
  font-family: var(--mono);
  box-shadow: inset 0 0 0 1px rgba(0,255,170,0.10);
}
.smallBtn--accent{ background: rgba(0,255,170,.07); }
.sliderWrap{ display:flex; align-items:center; gap:10px; }
.slider{ width: 100%; }
.miniTop{
  display:grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
}
.hr{ height:1px; background: rgba(0,255,170,.10); margin: 10px 0; } 1: .slimCard{
 2:   padding-top: 10px;
 3: }
 4: .slimCard .hr{ display:none; }
 5: .slimCard .field{ margin-top: 8px; }
 6: .slimCard .miniTop{ gap: 10px; align-items: center; }
 7: .slimCard .label{ display:none; }
 8: .slimCard .row{ display:none; }
 9: .slimCard .select, .slimCard .input{
10:   padding-top: 10px;
11:   padding-bottom: 10px;
12: }
13: .slimCard .amountRow{ gap: 8px; }
14: .slimCard .smallBtn{ min-width: 72px; }
15: .slimCard .sliderWrap{ gap: 10px; }
.tweakDock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.tweakToggle{
  pointer-events:auto;
}
.tweakPanel{
  width: 320px;
  padding: 12px;
}
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:center;
  margin-top: 10px;
}
.kv span{ font-size: 11px; color: var(--muted); letter-spacing: .10em; }
@media (max-width: 900px){
  .tweakDock{ left: 14px; right: 14px; }
  .tweakPanel{ width: auto; }
}


/* --- Added: compact 2-column layout to prevent tall panel --- */
.tweakGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tweakCol{
  min-width: 0;
}

.tweak2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 980px){
  .tweakGrid{
    grid-template-columns: 1fr;
  }
}
/* Minimal global reset + font, all styling is component-scoped in /src/styles */
html, body {
  margin: 0;
  padding: 0;
  background: #050807;
}
* { box-sizing: border-box; }
button, input, select { font: inherit; }