:root {
  color-scheme: light;
  --desktop: #008080;
  --face: #c0c0c0;
  --navy: #000080;
  --shadow: #808080;
  --dark: #404040;
  --light: #fff;
  --raised: var(--light) var(--dark) var(--dark) var(--light);
  --sunken: var(--dark) var(--light) var(--light) var(--dark);
  font: 15px/1.45 Tahoma, "MS Sans Serif", Arial, sans-serif;
  color: #111;
  background: var(--desktop);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 2px dotted var(--navy); outline-offset: 2px; }

.topbar { background: var(--face); border-bottom: 2px solid var(--dark); }
.topbar-inner, .main { width: min(100% - 24px, 760px); margin-inline: auto; }
.topbar-inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 6px; }
.brand { display: inline-flex; gap: 8px; align-items: center; font-size: 20px; font-weight: bold; }
.brand img { flex: none; }
.topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap: 6px; }
.main { padding-block: clamp(16px, 4vw, 38px); }

.window { padding: 2px; background: var(--face); border: 2px solid; border-color: var(--raised); }
.title-bar { margin: 0; padding: 5px 8px; background: var(--navy); color: var(--light); font: bold 17px/1.3 Tahoma, "MS Sans Serif", Arial, sans-serif; overflow-wrap: anywhere; }
.window-body { padding: clamp(10px, 3vw, 20px); }
.window-body > :first-child { margin-top: 0; }
.window-body > :last-child { margin-bottom: 0; }
.section-title { margin: 0 0 8px; padding: 3px 7px; background: var(--navy); color: var(--light); font-size: 14px; font-weight: bold; }

.retro-control {
  display: inline-block;
  padding: 4px 11px;
  min-height: 28px;
  border: 2px solid;
  border-color: var(--raised);
  background: var(--face);
  color: #111;
  font: inherit;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}
.retro-control:active { border-color: var(--sunken); }
.connection { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--light); border: 2px solid; border-color: var(--sunken); padding: 8px; overflow-wrap: anywhere; }
.connection + .connection { margin-top: 5px; }
.connection > :first-child { flex: 1 1 12rem; min-width: 0; }
.connection p { margin: 3px 0 0; font-size: 13px; }

.token-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-section { margin-top: 18px; }
.account-section > p { margin-top: 0; }
.account-section > form + .connection { margin-top: 12px; }
.token-field { display: block; width: 100%; margin: 4px 0 8px; border: 2px solid; border-color: var(--sunken); padding: 6px; background: var(--light); font-family: monospace; }