:root {
  --bg: #0b0c10;
  --panel: #12131a;
  --panel2: #171826;
  --text: #eaeaf1;
  --muted: #a9a9b7;
  --stroke: rgba(255,255,255,0.10);
  --btn: #2b2d3a;
  --btn2: #3a3d50;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 50% 0%, #12152a 0%, var(--bg) 60%);
  color: var(--text);
}

.app {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

.topbar {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(18,19,26,0.85);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(8px);
}

.btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.btn:hover { background: var(--btn2); }
.btn.primary { background: #2f6feb; }
.btn.primary:hover { filter: brightness(1.08); }

.addr {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(10,10,14,0.7);
  color: var(--text);
  outline: none;
}

.status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(18,19,26,0.7);
  border: 1px solid var(--stroke);
  color: var(--muted);
}

.viewport {
  margin-top: 14px;
  min-height: 620px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(10,10,14,0.6);
  overflow: auto;
  position: relative;
}

/* Page root */
.pageRoot {
  position: relative;
  min-height: 620px;
  width: 100%;
}