/* ============================================================
   RAFFERTY//OS - game surfaces (terminal, editor, map, mail, chat)
   ============================================================ */

/* ---------------- terminal ---------------- */
.term {
  height: 100%; display: flex; flex-direction: column;
  background: #000000; color: #c0c0c0;
  font-family: "Courier New", ui-monospace, monospace; font-size: 13px; line-height: 1.45;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #000000;
  position: relative;
}
.term-out {
  flex: 1; overflow-y: auto; padding: 8px 10px 4px;
  white-space: pre-wrap; word-break: break-word;
}
.term-line { min-height: 1em; }
.term-line.echo { color: #ffffff; }
.term-line.echo .echo-ps { color: #808080; }
.term-form { flex: none; display: flex; align-items: flex-start; gap: 6px; padding: 4px 10px 8px; }
/* prompt and input share padding and line-height so their text lines up */
.term-prompt { color: #c0c0c0; white-space: nowrap; line-height: 1.45; padding: 2px 0; }
.term-prompt.ps-cont { color: #fcfc54; }
.term-prompt.ps-busy { color: #808080; }
.term-prompt.ps-search { color: #fcfc54; }

/* the input and the layer that draws the block cursor sit on top of
   each other; both use the same font and padding so they line up */
.term-edit { position: relative; flex: 1; min-width: 0; display: block; }
.term-input {
  display: block; width: 100%; background: transparent; border: none; outline: none;
  color: #ffffff; font-family: inherit; font-size: 13px; line-height: 1.45;
  padding: 2px 0; caret-color: #c0c0c0;
}
.term-ov {
  position: absolute; left: 0; top: 0; padding: 2px 0;
  font-family: inherit; font-size: 13px; line-height: 1.45;
  white-space: pre; pointer-events: none; user-select: none;
}
.term-ov .ov-pad { color: transparent; }
.term-ov .ov-sug { color: #606060; }
.term-ov .ov-cur {
  background: #c0c0c0; color: #000000;
  animation: term-blink 1.05s steps(1, end) infinite;
}
@keyframes term-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }

/* native caret only where we are not drawing our own */
.term:not(.term-plain) .term-input { caret-color: transparent; }
/* unfocused window: hollow cursor, like a real terminal */
.term:not(.term-focus) .term-ov .ov-cur {
  animation: none; background: transparent; color: #c0c0c0;
  box-shadow: inset 0 0 0 1px #808080;
}
.term-plain .term-ov { display: none; }
.term-ov .ov-cur.ov-spin { animation: none; }
.term-busy .term-input { color: #808080; }

/* the bell: a single dim flash when a completion has nowhere to go */
.term.bell { box-shadow: inset 1px 1px 0 #000000, inset 0 0 0 9999px rgba(255,255,255,.10); }

/* offscreen ruler used to work out the column width */
.term-measure {
  position: absolute; visibility: hidden; pointer-events: none;
  white-space: pre; font-family: inherit; font-size: 13px; top: -999px; left: 0;
}
.term-hint { color: #808080; }

/* ---------------- script editor ---------------- */
.editor { height: 100%; display: flex; min-height: 0; }
.editor-side {
  flex: none; width: 132px; display: flex; flex-direction: column;
  background: #c0c0c0; border-right: 1px solid #808080;
}
.editor-list {
  flex: 1; overflow: auto; margin: 4px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000;
}
.editor-list div {
  padding: 4px 7px; cursor: default; font-family: "Courier New", monospace; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-list div.active { background: #000080; color: #ffffff; }
.editor-side-buttons { flex: none; display: flex; gap: 3px; padding: 0 4px 5px; }
.editor-side-buttons .win-btn { min-width: 0; flex: 1; padding: 3px 2px; font-size: 11px; }
.editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.editor-bar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: #c0c0c0; border-bottom: 1px solid #808080;
}
.editor-bar .name {
  font-family: "Courier New", monospace; font-weight: bold; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editor-bar .win-btn { padding: 3px 10px; min-width: 0; }
.editor-code {
  flex: 1; width: 100%; resize: none; border: none; outline: none;
  padding: 8px 10px; background: #000000; color: #c0c0c0;
  font-family: "Courier New", ui-monospace, monospace; font-size: 13px; line-height: 1.45;
  box-shadow: inset 1px 1px 0 #000000; tab-size: 2;
}
.editor-status {
  flex: none; padding: 3px 8px; background: #c0c0c0; border-top: 1px solid #ffffff;
  font-size: 11px; color: #000080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- network map ---------------- */
.map-wrap {
  height: 100%; overflow: auto; padding: 12px;
  background: #000000;
  background-image:
    linear-gradient(rgba(106,255,200,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,255,200,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: inset 1px 1px 0 #000000;
}
.map-tier { margin-bottom: 14px; }
.map-tier h4 {
  margin: 0 0 6px; color: #808080; font-family: "Courier New", monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: normal;
}
.map-row { display: flex; flex-wrap: wrap; gap: 8px; }
.map-node {
  width: 176px; padding: 7px 9px; cursor: default;
  background: #000000; border: 1px solid #808080;
  font-family: "Courier New", monospace; color: #c0c0c0;
}
.map-node:hover { background: #000080; }
.map-node b { display: block; color: #c0c0c0; font-size: 13px; }
.map-node small { display: block; color: #808080; line-height: 1.35; margin-top: 3px; white-space: normal; }
.map-node.locked { border-color: #fc5454; }
.map-node.locked b { color: #ff9b9b; }
.map-node.cracked { border-color: #c0c0c0; background: #000040; }
.map-node .tagline { margin-top: 5px; font-size: 11px; color: #fcfc54; }

/* ---------------- mail ---------------- */
.mail { height: 100%; display: flex; min-height: 0; }
.mail-list {
  flex: none; width: 172px; overflow: auto; background: #ffffff;
  border-right: 1px solid #808080;
}
.mail-list div { padding: 6px 8px; border-bottom: 1px solid #dfdfdf; cursor: default; }
.mail-list div.active { background: #000080; color: #ffffff; }
.mail-list div.done { color: #808080; }
.mail-list div.active.done { color: #c8c8dc; }
.mail-list b { display: block; font-size: 12px; }
.mail-list small { font-size: 10px; }
.mail-body {
  flex: 1; overflow: auto; padding: 12px 14px; background: #000000; color: #c0c0c0;
  font-family: "Courier New", monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
}
.mail-body h3 { margin: 0 0 2px; color: #c0c0c0; font-size: 14px; }
.mail-body .from { color: #808080; margin-bottom: 12px; }
.mail-body .state { margin-top: 14px; color: #fcfc54; }

/* ---------------- chat ---------------- */
.chat { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.chat-tabs { flex: none; display: flex; gap: 2px; padding: 4px 4px 0; background: #c0c0c0; }
.chat-tab {
  padding: 4px 12px; cursor: default; background: #c0c0c0;
  border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;
  border-right: 1px solid #000000; border-bottom: 1px solid #808080;
  font-family: "Courier New", monospace;
}
.chat-tab.active { font-weight: bold; border-bottom-color: #c0c0c0; background: #d4d4d4; }
.chat-log {
  flex: 1; overflow: auto; padding: 8px 10px; background: #000000; color: #c0c0c0;
  font-family: "Courier New", monospace; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: inset 1px 1px 0 #000000;
}
.chat-log .who { color: #54fcfc; }
.chat-log .me .who { color: #c0c0c0; }
.chat-form { flex: none; display: flex; gap: 6px; padding: 5px; background: #c0c0c0; }
.chat-form input {
  flex: 1; font-family: "Courier New", monospace; font-size: 12px; padding: 3px 5px;
  background: #ffffff; border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000; outline: none;
}

/* ---------------- status / hud ---------------- */
.hud { display: flex; flex-direction: column; gap: 10px; }
.hud-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.hud-card {
  flex: 1 1 130px; padding: 8px 10px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf;
}
.hud-card b { display: block; font-size: 17px; color: #000080; font-family: "Courier New", monospace; }
.hud-card span { color: #666666; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.chip-tag {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px;
  background: #000080; color: #c0c0c0; font-family: "Courier New", monospace; font-size: 11px;
}
.chip-tag.off { background: #d0d0d0; color: #7a7a7a; }

/* ---------------- boot screen ---------------- */
#boot {
  position: fixed; inset: 0; z-index: 4000; background: #000000; color: #c0c0c0;
  font-family: "Courier New", monospace; font-size: 13px; line-height: 1.6;
  padding: 26px; white-space: pre-wrap; overflow: hidden;
}
#boot .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#boot form { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
#boot input {
  background: transparent; border: none; border-bottom: 1px solid #808080; outline: none;
  color: #ffffff; font-family: inherit; font-size: 13px; padding: 2px 4px; width: 200px;
}
#boot button {
  background: #000000; color: #c0c0c0; border: 1px solid #808080;
  font-family: inherit; font-size: 13px; padding: 3px 12px; cursor: pointer;
}

/* ---------------- wireless manager ---------------- */
.wifi { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.wifi-link {
  flex: none; padding: 8px 10px; background: #efeeea;
  border-bottom: 1px solid #808080; box-shadow: inset 0 -1px 0 #ffffff;
}
.wifi-link b { display: block; font-size: 13px; }
.wifi-link .off { display: block; font-size: 13px; color: #a00000; }
.wifi-link small { display: block; color: #404040; margin-top: 2px; }
.wifi-link code, .router code { font-family: "Courier New", monospace; background: #ddddd6; padding: 0 3px; }
.wifi-main { flex: 1; display: flex; min-height: 0; }
.wifi-list {
  flex: 1; min-width: 0; overflow: auto; margin: 4px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000;
}
.wifi-list > div {
  padding: 5px 8px; cursor: default; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #ededed;
}
.wifi-list > div.active { background: #000080; color: #ffffff; }
.wifi-list > div.on b::after { content: " \2022"; color: #000080; }
.wifi-list > div.active.on b::after { color: #c0c0c0; }
.wifi-list > div b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wifi-list .sig { font-family: "Courier New", monospace; color: #000080; }
.wifi-list > div.active .sig { color: #c0c0c0; }
.wifi-list .tag { font-size: 10px; color: #606060; text-transform: uppercase; letter-spacing: .04em; }
.wifi-list > div.active .tag { color: #c8c8dc; }
.wifi-list .tag.hid { color: #800080; }
.wifi-list .sec { font-size: 10px; padding: 1px 5px; border: 1px solid #9a9a9a; background: #e4e4de; }
.wifi-list .sec.open { color: #006000; }
.wifi-list .sec.known { color: #006000; font-weight: bold; }
.wifi-list .sec.shut { color: #9a5a00; }
.wifi-side {
  flex: none; width: 236px; overflow: auto; padding: 8px 10px;
  border-left: 1px solid #808080; box-shadow: inset 1px 0 0 #ffffff;
}
.wifi-side h3, .router-body h3 { margin: 0 0 6px; font-size: 13px; }
.note { color: #404040; margin: 8px 0 0; }
.note.out { font-family: "Courier New", monospace; white-space: pre-wrap; color: #000080; }
.empty { color: #7a7a7a; padding: 10px; font-style: italic; }

/* ---------------- router manager ---------------- */
.router { height: 100%; display: flex; min-height: 0; }
.router-side {
  flex: none; width: 132px; display: flex; flex-direction: column;
  background: #c0c0c0; border-right: 1px solid #808080;
}
.router-list {
  flex: 1; overflow: auto; margin: 4px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000;
}
.router-list > div { padding: 5px 7px; cursor: default; border-bottom: 1px solid #ededed; }
.router-list > div.active { background: #000080; color: #ffffff; }
.router-list > div small { display: block; color: #606060; font-size: 10px; }
.router-list > div.active small { color: #c8c8dc; }
.router-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.router-tabs { flex: none; display: flex; gap: 2px; padding: 4px 6px 0; background: #c0c0c0; }
.router-body { flex: 1; overflow: auto; padding: 10px 12px; background: #efeeea; }
.router-empty { max-width: 380px; }
.router-empty code, .router-body code { font-family: "Courier New", monospace; background: #ddddd6; padding: 0 3px; }
table.grid { width: 100%; border-collapse: collapse; margin-top: 6px; background: #ffffff; }
table.grid th, table.grid td {
  text-align: left; padding: 3px 6px; border: 1px solid #b8b8b0; font-weight: normal;
}
table.grid th { background: #d8d8d2; font-weight: bold; }
table.grid tr.me td { background: #e0e0ff; }
table.grid .factory { color: #8a8a8a; font-style: italic; }
.win-btn.tiny { padding: 0 6px; font-size: 10px; }
code.key { background: #fff6cf; border: 1px solid #d8c47a; }

/* ---------------- browser ---------------- */
.brw { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.brw-bar {
  flex: none; display: flex; align-items: center; gap: 3px; padding: 4px 6px;
  background: #c0c0c0; border-bottom: 1px solid #808080; box-shadow: inset 0 -1px 0 #ffffff;
}
.brw-bar .win-btn.nav { min-width: 0; padding: 2px 8px; font-size: 12px; line-height: 1.2; }
.brw-label { margin-left: 8px; color: #000000; }
.brw-addr { flex: 1; display: flex; }
.brw-addr input { flex: 1; min-width: 0; }
.brw-page {
  flex: 1; overflow: auto; background: #ffffff; color: #000000;
  padding: 14px 18px; line-height: 1.5;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #000000;
}
.brw-page h1 { font-size: 19px; margin: 0 0 4px; }
.brw-page h2 { font-size: 15px; margin: 16px 0 4px; }
.brw-page h3 { font-size: 13px; margin: 14px 0 4px; color: #000080; }
.brw-page p { margin: 6px 0; }
.brw-page ul { margin: 6px 0 6px 18px; padding: 0; }
.brw-page li { margin: 2px 0; }
.brw-page hr { border: none; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; margin: 12px 0; }
.brw-page a { color: #0000ee; text-decoration: underline; cursor: pointer; }
.brw-page a:visited { color: #551a8b; }
.brw-page code {
  font-family: "Courier New", monospace; background: #efefe8;
  border: 1px solid #d8d8d0; padding: 0 3px;
}
.brw-page blockquote {
  margin: 8px 0; padding: 6px 10px; color: #404040;
  background: #f4f4ef; border-left: 3px solid #808080;
}
.brw-page .notice { padding: 6px 9px; margin: 8px 0; border: 1px solid #808080; }
.brw-page .notice.ok { background: #e4f4e4; border-color: #009000; }
.brw-page .notice.bad { background: #f8e4e4; border-color: #a00000; }
.brw-page .notice.warn { background: #fdf6dc; border-color: #a08000; }
.brw-page table.grid { width: auto; min-width: 60%; }
.brw-page .login-box {
  border: 1px solid #808080; background: #efeeea; padding: 10px; margin: 8px 0;
  box-shadow: inset 1px 1px 0 #ffffff;
}

/* ---------------- router manager extras ---------------- */
.router-body table.grid tr.off td { color: #909090; }
.router-body .form-row { margin: 6px 0; }
.router-body .form-row label { min-width: 74px; }
.router-body select.win-field { max-width: 260px; }
.router-body label.chk { min-width: 0; display: inline-flex; align-items: center; gap: 5px; }
.router-body input.key { background: #ffffcc; font-family: "Courier New", monospace; }
.loglines {
  background: #000000; color: #c0c0c0; font-family: "Courier New", monospace;
  font-size: 11px; padding: 6px 8px; max-height: 260px; overflow: auto;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #000000;
}
.loglines .t { color: #808080; margin-right: 8px; }

/* ---------------- guide / objective ---------------- */
.guide { padding: 10px 12px; }
.goal-box {
  background: #efeeea; border: 1px solid #808080; padding: 9px 11px; margin-bottom: 10px;
  box-shadow: inset 1px 1px 0 #ffffff;
}
.goal-label { font-size: 10px; letter-spacing: .12em; color: #000080; }
.goal-box b { display: block; font-size: 14px; margin: 2px 0 3px; }
.goal-box small { display: block; color: #404040; line-height: 1.4; }
.bar {
  position: relative; height: 16px; margin-top: 8px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000;
}
.bar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, #000080 0 10px, #ffffff 10px 12px);
}
.bar span {
  position: absolute; inset: 0; text-align: center; line-height: 16px;
  font-size: 10px; color: #000000; mix-blend-mode: difference; filter: invert(1);
}
.contract .from { font-size: 10px; color: #606060; letter-spacing: .06em; }
.contract h3 { margin: 1px 0 8px; font-size: 14px; }
ol.steps { list-style: none; margin: 0 0 10px; padding: 0; }
ol.steps li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #dcdcdc; }
ol.steps li .tick { flex: none; width: 15px; text-align: center; color: #808080; }
ol.steps li.done .tick { color: #006000; }
ol.steps li.done .what { color: #808080; text-decoration: line-through; }
ol.steps li.now { background: #f4f4ef; }
ol.steps li.now .tick { color: #000080; }
ol.steps li.now .what { font-weight: bold; }
ol.steps li .body { flex: 1; min-width: 0; }
ol.steps li .hint { color: #404040; margin-top: 3px; line-height: 1.4; }
ol.steps li .do { margin-top: 5px; }
.guide .notice { padding: 6px 9px; margin: 8px 0; border: 1px solid #808080; }
.guide .notice.ok { background: #e4f4e4; border-color: #009000; }

/* ---------------- ending ---------------- */
.ending { height: 100%; display: flex; flex-direction: column; background: #000000; }
.ending-out {
  flex: 1; overflow: auto; padding: 16px 20px; color: #54fc54;
  font-family: "Courier New", monospace; font-size: 13px; line-height: 1.55;
  cursor: pointer;
}
.ending-line { min-height: 1em; white-space: pre-wrap; }
.ending-foot {
  flex: none; max-height: 55%; overflow: auto; padding: 8px 10px;
  background: #c0c0c0; border-top: 1px solid #ffffff;
}
.ending-foot:empty { display: none; }

/* ---------------- network window ---------------- */
.netw { height: 100%; display: flex; min-height: 0; }
.netw-tree {
  flex: none; width: 226px; overflow: auto; margin: 4px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #000000;
}
.netw-tree .lan { border-bottom: 1px solid #dcdcdc; }
.netw-tree .lan-head { padding: 4px 7px; background: #dfdfd8; }
.netw-tree .lan.on .lan-head { background: #d4d4e8; }
.netw-tree .lan-head b { font-size: 12px; }
.netw-tree .lan-head small { display: block; color: #606060; font-size: 10px; }
.netw-tree .node {
  padding: 3px 7px 3px 14px; cursor: default; display: flex; align-items: center; gap: 5px;
}
.netw-tree .node small { color: #808080; margin-left: auto; font-family: "Courier New", monospace; }
.netw-tree .node .gw { color: #000080; }
.netw-tree .node.active { background: #000080; color: #ffffff; }
.netw-tree .node.active small, .netw-tree .node.active .gw { color: #c8c8dc; }
.netw-tree .port {
  padding: 2px 7px 2px 30px; cursor: default; display: flex; align-items: center;
  gap: 6px; font-family: "Courier New", monospace;
}
.netw-tree .port.active { background: #000080; color: #ffffff; }
.netw-main { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; background: #efeeea; }
.netw-main h3 { margin: 0 0 6px; font-size: 14px; }
.netw-main h3 small { font-weight: normal; color: #606060; font-size: 11px; }
.netw-main h4 { margin: 10px 0 6px; font-size: 12px; }
.netw-main code { font-family: "Courier New", monospace; background: #ddddd6; padding: 0 3px; }
.pill {
  font-size: 9px; letter-spacing: .06em; padding: 1px 4px; margin-left: auto;
  border: 1px solid #9a9a9a; background: #e4e4de; color: #000000;
}
.pill.lan { border-color: #006000; color: #006000; }
.pill.wan, .pill.forward, .pill.dmz { border-color: #000080; color: #000080; }
.pill.bad { border-color: #a00000; color: #a00000; }
.legend { margin-top: 12px; line-height: 2.1; }
.legend .pill { margin-left: 0; margin-right: 6px; }
.wards-line { margin: 4px 0 10px; }
.wards-line .ward {
  display: inline-block; padding: 2px 7px; background: #ffffff; border: 1px solid #808080;
  font-family: "Courier New", monospace; font-size: 11px;
}
.wards-line .arrow { color: #606060; margin: 0 2px; }
.composer {
  background: #ffffff; border: 1px solid #808080; padding: 10px 12px;
  box-shadow: inset 1px 1px 0 #ffffff;
}
.composer .form-row { margin: 5px 0; align-items: center; }
.composer .form-row label { min-width: 62px; }
.composer .ward-tag {
  margin-left: 8px; font-size: 10px; color: #606060; font-family: "Courier New", monospace;
}
.composer .preview {
  margin: 9px 0 4px; padding: 5px 7px; background: #000000; color: #c0c0c0;
  font-family: "Courier New", monospace; font-size: 11px; overflow-x: auto; white-space: nowrap;
}
.composer .preview code { background: transparent; color: inherit; padding: 0; }
.answer {
  margin-top: 10px; padding: 8px 10px; background: #000000; color: #c0c0c0;
  font-family: "Courier New", monospace; font-size: 12px;
  white-space: pre-wrap; line-height: 1.45;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #000000;
}
.netw-main .notice { padding: 6px 9px; margin: 8px 0; border: 1px solid #808080; }
.netw-main .notice.bad { background: #f8e4e4; border-color: #a00000; }