* { box-sizing: border-box; }
html { background: #22375a; }
body {
  margin: 0;
  background: #22375a;
  color: #000;
  font: 13px Verdana, Arial, sans-serif;
}
a { color: #000080; }
a:visited { color: #551a8b; }
.site-shell {
  width: min(920px, 96%);
  min-width: 640px;
  margin: 14px auto;
  background: #c0c0c0;
  border: 2px outset #fff;
  box-shadow: 0 0 0 2px #000;
}
.site-titlebar {
  background: #000080;
  color: #fff;
  font-weight: bold;
  padding: 5px 8px;
}
.masthead {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #f7f7f7 0, #fff 58%, #d8e3f3 100%);
  border-bottom: 2px groove #fff;
}
.brand { line-height: .92; }
.brand-small {
  color: #666;
  font: bold 11px Arial, sans-serif;
  letter-spacing: 5px;
  margin-left: 3px;
}
.brand-main {
  color: #003399;
  font: italic bold 40px Arial, sans-serif;
  letter-spacing: -2px;
  text-shadow: 1px 1px #fff;
}
.brand-sub {
  margin-top: 7px;
  color: #7a0000;
  font: bold 11px Arial, sans-serif;
  letter-spacing: .3px;
}
.masthead-note {
  width: 290px;
  padding: 8px 10px;
  background: #ffffd9;
  border: 1px solid #9d9d72;
  color: #333;
  font-size: 11px;
  line-height: 1.45;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 9px;
  background: #d4d0c8;
  border-top: 1px solid #fff;
  border-bottom: 2px groove #fff;
  font-size: 11px;
}
.statusbar {
  display: flex;
  gap: 22px;
  padding: 4px 9px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #777;
  background: #bcbcbc;
  color: #222;
  font-size: 10px;
}
.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 245px;
  gap: 8px;
  padding: 8px;
}
.site-main, .site-side { min-width: 0; }
.window {
  border: 2px outset #fff;
  margin-bottom: 8px;
  background: #d4d0c8;
}
.window-title {
  background: #000080;
  color: #fff;
  font-weight: bold;
  padding: 4px 6px;
}
.window-body { padding: 8px; }
.welcome-body {
  background: #fffef0;
  border: 1px solid #bab88c;
  margin: 5px;
  padding: 8px 10px;
  line-height: 1.5;
}
.connect-body {
  display: grid;
  grid-template-columns: 235px minmax(0,1fr);
  gap: 12px;
  background: #fff;
  border: 2px inset #fff;
  margin: 2px;
  padding: 10px;
}
.terminal-preview {
  background: #050505;
  color: #56e36f;
  border: 3px inset #aaa;
  min-height: 190px;
  box-shadow: inset 0 0 18px #001700;
}
.terminal-preview-title {
  color: #ddd;
  background: #202020;
  border-bottom: 1px solid #555;
  padding: 4px 6px;
  font: bold 10px Arial, sans-serif;
}
.terminal-preview pre {
  margin: 0;
  padding: 13px 10px;
  overflow: hidden;
  color: #56e36f;
  font: 10px/1.35 "Courier New", monospace;
}
.connect-copy h2 {
  margin: 2px 0 7px;
  color: #003399;
  font: bold 21px Arial, sans-serif;
}
.connect-copy { line-height: 1.45; }
.actions { margin: 14px 0; }
.big-button, .win-button {
  display: inline-block;
  color: #000 !important;
  text-decoration: none;
  background: #d4d0c8;
  border: 2px outset #fff;
  padding: 7px 13px;
  font-weight: bold;
}
.big-button:active, .win-button:active { border-style: inset; }
.classic-connect {
  background: #ffffd9;
  border: 1px solid #aaa879;
  padding: 7px;
  font-size: 11px;
}
.directory-grid { display: grid; gap: 7px; }
.directory-item {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 2px inset #fff;
  padding: 8px;
}
.directory-item b { display: block; color: #000080; margin-bottom: 3px; }
.directory-item span { display: block; color: #333; font-size: 11px; line-height: 1.4; }
.stat-list { background: #fff; border: 2px inset #fff; }
.stat-list div {
  display: flex;
  justify-content: space-between;
  padding: 4px 3px;
  border-bottom: 1px dotted #aaa;
}
.stat-list div:last-child { border-bottom: 0; }
.small-copy { font-size: 11px; line-height: 1.5; }
.center { text-align: center; }
.counter {
  display: inline-block;
  background: #101010;
  color: #ff4848;
  border: 2px inset #aaa;
  padding: 4px 8px;
  font: bold 18px "Courier New", monospace;
  letter-spacing: 3px;
}
.counter-label { margin-top: 4px; color: #555; font-size: 9px; }
.footer {
  padding: 6px 10px;
  border-top: 2px groove #fff;
  text-align: center;
  font-size: 9px;
  color: #444;
}
@media (max-width: 700px) {
  .site-shell { min-width: 0; width: 98%; margin: 6px auto; }
  .masthead { align-items: flex-start; flex-direction: column; gap: 10px; }
  .masthead-note { width: 100%; }
  .site-layout { grid-template-columns: 1fr; }
  .connect-body { grid-template-columns: 1fr; }
  .terminal-preview { display: none; }
  .statusbar { flex-wrap: wrap; gap: 7px 14px; }
  .brand-main { font-size: 34px; }
}

/* v15.19 member directory */
.member-directory {
  display: grid;
  gap: 8px;
}
.member-card {
  display: block;
  padding: 9px 10px;
  background: #fff;
  border: 2px inset #fff;
  color: #000 !important;
  text-decoration: none;
  line-height: 1.4;
}
.member-card b {
  display: block;
  color: #000080;
  font-size: 13px;
  margin-bottom: 2px;
}
.member-card span { display: block; font-size: 11px; }
.member-card .member-owner {
  color: #666;
  font-family: "Courier New", monospace;
  margin-bottom: 4px;
}
.member-card:focus { outline: 2px dotted #000; outline-offset: -4px; }
.empty-directory {
  background: #fffef0;
  border: 1px solid #bab88c;
  padding: 12px;
  line-height: 1.5;
}