:root{
  --ntw-panel:#101625;
  --ntw-panel-2:#0f1420;
  --ntw-border:rgba(255,255,255,.07);
  --ntw-muted:#aab3c7;
  --ntw-text:#e6eaf2;
  --ntw-card-radius:20px;
  --ntw-shell-gap:18px;

  --ntw-tile-h: 64px;
  --ntw-gap: 16px;
  --ntw-grid-max: 980px;
}

.ntw-shell{
  display:grid;
  grid-template-columns: 360px minmax(640px, 1fr);
  gap:var(--ntw-shell-gap);
  align-items:start;
  margin-top: 24px;
}

.ntw-card{
  background:linear-gradient(180deg,#121a2c,#0f1420);
  border:1px solid var(--ntw-border);
  border-radius:var(--ntw-card-radius);
  padding:18px;
  color:var(--ntw-text);
}

.ntw-controls{ position:sticky; top:18px; }

.ntw-seg{
  display:grid; grid-template-columns:1fr 1fr;
  background:#0d1322;
  border:1px solid var(--ntw-border);
  border-radius:12px; padding:4px; gap:4px;
  margin-bottom:16px;
}
.ntw-seg-btn{
  border-radius:10px; padding:10px 8px; text-align:center;
  color:var(--ntw-muted); font-weight:800; cursor:pointer;
  background:none; border:none;
  transition:all .15s ease;
}
.ntw-seg-btn.ntw-is-active,
.ntw-seg-btn:hover{
  color:#0f1420;
  background:linear-gradient(135deg,#7bb1ff,#4f85ff);
}

.ntw-field{ margin-bottom:14px; }
.ntw-lbl{ color:var(--ntw-muted); font-weight:700; margin-bottom:8px; }

.ntw-amount-row{ display:grid; grid-template-columns:1fr 90px; gap:10px; }
.ntw-amount-chip{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--ntw-border); background:#0f1626;
  border-radius:12px; padding:10px 12px; min-height:44px;
}
.ntw-coin{ filter:saturate(.9); }
.ntw-amount-text{ font-weight:800; }

.ntw-quick-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ntw-quick{
  border:1px solid var(--ntw-border); background:#0f1626; color:var(--ntw-text);
  border-radius:10px; font-weight:800; padding:8px 0; text-align:center;
  cursor:pointer; transition:all .15s ease;
}
.ntw-quick:hover{ background:#1d2636; border-color:#2e3b55; }

.ntw-select-btn{
  width:100%; border:1px solid var(--ntw-border); background:#0f1626;
  color:var(--ntw-text); border-radius:12px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; cursor:pointer;
  transition:all .15s ease;
}
.ntw-select-btn:hover{ background:#1d2636; border-color:#2e3b55; }

.ntw-play{
  width:100%; height:48px; border-radius:12px;
  background:linear-gradient(180deg,#29e56f,#18c159);
  color:#0b121b; font-weight:900; text-align:center;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(41,229,111,.18);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.ntw-play:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(41,229,111,.25); }

.ntw-board{ padding:18px; }

.ntw-board-head{ display:none !important; }

.ntw-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: var(--ntw-gap);
  width: 100%;
  max-width: var(--ntw-grid-max);
  margin: 6px auto 12px;

  padding: 18px;
  border-radius:18px;
  background: linear-gradient(180deg,#0f1626,#0d1422);
  border:1px solid var(--ntw-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.ntw-tile{
  height: var(--ntw-tile-h);
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:linear-gradient(180deg,#1a2332,#141c29);
  border:1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 10px 22px rgba(255,255,255,.03);
  cursor:pointer;
  transition:transform .1s ease, border-color .12s ease, background .12s ease;
}
.ntw-tile:hover{ transform:translateY(-2px); border-color:#3a4c70; background:#1c2535; }
.ntw-tile:active{ transform:translateY(0); border-color:#5c77b0; }

.ntw-chev{
  width:18px; height:18px; display:block; opacity:.85;
  border-right:4px solid #7bb1ff; border-bottom:4px solid #7bb1ff;
  transform: rotate(-45deg);
}

@media (max-width:1240px){
  .ntw-shell{ grid-template-columns:1fr; }
  .ntw-controls{ position:static; }
}