* { box-sizing: border-box; }
body {
  margin: 0;
  background: #111;
  color: #c8c8c8;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}
a { color: #4ec9b0; }
.ui { font-family: 'Segoe UI', Arial, sans-serif; }

header {
  position: sticky; top: 0; z-index: 10;
  background: #161616;
  border-bottom: 1px solid #2a2a2a;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand { color: #4ec9b0; text-decoration: none; font-weight: bold; }
.crumb { color: #666; }
.crumb a { color: #888; text-decoration: none; }
.crumb a:hover { color: #4ec9b0; }
header .spacer { flex: 1; }

.btn {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #c8c8c8;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
}
.btn:hover { border-color: #4ec9b0; color: #e8e8e8; }
.btn:focus-visible { outline: 2px solid #4ec9b0; outline-offset: 1px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 20px; }
h1 { font-family: 'Segoe UI', Arial, sans-serif; font-size: 22px; color: #eee; margin: 0 0 4px; }
.sub { font-family: 'Segoe UI', Arial, sans-serif; color: #888; margin: 0 0 18px; font-size: 14px; }

.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabbtn.active { border-color: #4ec9b0; color: #4ec9b0; }

.cols { display: grid; grid-template-columns: 190px 280px 1fr; gap: 16px; align-items: start; }
.colhead { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #666; margin: 0 0 8px; }

.catbtn, .actbtn, .resbtn {
  display: block; width: 100%; text-align: left;
  background: #161616; border: 1px solid #2a2a2a; color: #c8c8c8;
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
  font-family: 'Consolas', 'Courier New', monospace; font-size: 13px;
}
.catbtn:hover, .actbtn:hover, .resbtn:hover { border-color: #4ec9b0; }
.catbtn.active { border-color: #4ec9b0; color: #4ec9b0; }
.actbtn.active { color: #4ec9b0; }
.catbtn:focus-visible, .actbtn:focus-visible, .resbtn:focus-visible { outline: 2px solid #4ec9b0; outline-offset: 1px; }

.r-READ   { border-left: 3px solid #3fae8c; }
.r-CONFIG { border-left: 3px solid #d7a65f; }
.r-REMOVE { border-left: 3px solid #e06c75; }
.r-WIPE   { border-left: 3px solid #ff4444; }

.badge {
  display: inline-block; padding: 1px 8px; font-size: 11px;
  font-family: 'Segoe UI', Arial, sans-serif; border: 1px solid; margin-left: 8px;
  vertical-align: middle;
}
.b-READ   { color: #3fae8c; border-color: #3fae8c; }
.b-CONFIG { color: #d7a65f; border-color: #d7a65f; }
.b-REMOVE { color: #e06c75; border-color: #e06c75; }
.b-WIPE   { color: #ff4444; border-color: #ff4444; font-weight: bold; }

.panel { background: #161616; border: 1px solid #2a2a2a; padding: 16px; }
.panel h2 { font-family: 'Segoe UI', Arial, sans-serif; font-size: 17px; color: #eee; margin: 0; display: inline; vertical-align: middle; }

.what, .scenario { font-family: 'Segoe UI', Arial, sans-serif; color: #aaa; font-size: 13.5px; margin: 10px 0 0; }
.scenario { color: #8a9aa5; }
.slabel { color: #5f7480; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 2px; }
.caveat { font-family: 'Segoe UI', Arial, sans-serif; color: #d7a65f; font-size: 13.5px; margin: 10px 0 0; }
.modern { font-family: 'Segoe UI', Arial, sans-serif; color: #9cdcfe; font-size: 13.5px; margin: 10px 0 0; }

.scopes { margin: 12px 0 0; }
.scope {
  display: inline-block; background: #1e1e1e; border: 1px solid #3a3a3a;
  color: #9cdcfe; padding: 1px 8px; margin: 2px 4px 2px 0; font-size: 12px;
}

label { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #999; display: block; margin: 12px 0 3px; }
input[type=text], textarea {
  background: #0d0d0d; border: 1px solid #333; color: #eee;
  padding: 7px 9px; font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px; width: 100%;
}
input[type=text]:focus, textarea:focus { outline: none; border-color: #4ec9b0; }
.hint { font-size: 11px; color: #666; font-family: 'Segoe UI', Arial, sans-serif; margin-top: 2px; }

.out {
  background: #0d0d0d; border: 1px solid #2a2a2a; padding: 12px;
  white-space: pre-wrap; word-break: break-word; color: #dcdcaa;
  margin-top: 16px; font-size: 13px; min-height: 44px;
}
.outbar { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.empty { color: #666; font-family: 'Segoe UI', Arial, sans-serif; padding: 8px 0; }

#searchbox { margin-bottom: 14px; }
.rescat { color: #666; font-size: 11px; font-family: 'Segoe UI', Arial, sans-serif; }

#consoleIn { min-height: 120px; resize: vertical; }
.cline { margin: 6px 0; }
.ok { color: #3fae8c; }
.err { color: #e06c75; }
.warn { color: #d7a65f; }
.note { color: #888; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.chip {
  background: #1e1e1e; border: 1px solid #333; color: #888;
  padding: 3px 10px; font-size: 12px; cursor: pointer;
  font-family: 'Consolas', 'Courier New', monospace;
}
.chip:hover { border-color: #4ec9b0; color: #c8c8c8; }
.chiplabel { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #666; margin: 16px 0 0; }
.modtoggle { margin-top: 14px; }
.modbox { background: #101010; border: 1px solid #2a2a2a; padding: 12px; margin-top: 8px; }
.modgroup { margin-bottom: 10px; }
.modgroup:last-child { margin-bottom: 0; }
.modlbl { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #666; margin: 0 0 4px; }
.modopt { display: inline-block; margin: 2px 12px 2px 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12.5px; color: #aaa; cursor: pointer; }
.modopt input { vertical-align: middle; margin-right: 5px; accent-color: #4ec9b0; }
.modrow select { background: #0d0d0d; border: 1px solid #333; color: #eee; padding: 4px 6px; font-family: inherit; font-size: 12.5px; margin-right: 6px; }
.fieldwarn { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12.5px; color: #d7a65f; margin: 8px 0 0; }
.resprev { display: block; color: #4ec9b0; opacity: .65; font-size: 12px; margin-top: 3px; word-break: break-all; font-family: 'Consolas', 'Courier New', monospace; }
.hc .chip, .hc .modbox, .hc .modrow select { background: #000; border-color: #999; color: #fff; }
.hc .chiplabel, .hc .modlbl, .hc .modopt { color: #ddd; }
.hc .fieldwarn { color: #ffd27f; }
.hc .resprev { color: #7fffe0; opacity: 1; }

footer {
  border-top: 1px solid #2a2a2a; margin-top: 40px; padding: 18px 20px;
  color: #666; font-size: 12.5px; font-family: 'Segoe UI', Arial, sans-serif;
}
footer a { color: #888; }

/* High contrast mode */
.hc { background: #000; color: #fff; }
.hc header { background: #000; border-color: #999; }
.hc .panel, .hc .catbtn, .hc .actbtn, .hc .resbtn, .hc .btn { background: #000; border-color: #999; color: #fff; }
.hc input[type=text], .hc textarea, .hc .out { background: #000; border-color: #999; color: #fff; }
.hc a, .hc .brand { color: #7fffe0; }
.hc .what, .hc .scenario, .hc .sub, .hc label, .hc .hint, .hc .empty, .hc .rescat, .hc .crumb, .hc .colhead, .hc .note, .hc footer { color: #ddd; }
.hc .caveat, .hc .b-CONFIG, .hc .warn { color: #ffd27f; border-color: #ffd27f; }
.hc .b-READ, .hc .ok { color: #7fffd0; border-color: #7fffd0; }
.hc .b-REMOVE, .hc .err { color: #ff9aa2; border-color: #ff9aa2; }
.hc .scope { color: #bfe6ff; border-color: #999; background: #000; }
.hc .catbtn.active, .hc .tabbtn.active, .hc .actbtn.active { color: #7fffe0; border-color: #7fffe0; }

select.fld {
  background: #0d0d0d; border: 1px solid #333; color: #eee;
  padding: 7px 9px; font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px; width: 100%;
}
select.fld:focus { outline: none; border-color: #4ec9b0; }
.optlbl { color: #555; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; }
.hc select.fld { background: #000; border-color: #999; color: #fff; }
.hc .optlbl { color: #aaa; }