* { box-sizing: border-box; }
:root {
  color-scheme: light;
  background: #f2eadb;
  color: #302118;
  font: 16px/1.45 system-ui, sans-serif;
}
body { margin: 0; }
.shell { width: min(100% - 32px, 980px); margin-inline: auto; }
header { background: #302118; color: #fff0ca; border-bottom: 3px solid #b87b26; }
.mast, .brand { display: flex; align-items: center; gap: 9px; }
.mast { justify-content: space-between; padding-block: 12px; font-size: .73rem; font-weight: 800; letter-spacing: .12em; }
.village { color: #e9c677; text-align: right; }
.intro { padding: 24px 0 16px; }
.eyebrow { margin: 0; color: #815022; font-weight: 800; font-size: .7rem; letter-spacing: .13em; }
h1 { font: 700 clamp(2.4rem, 8vw, 4rem)/1.05 Georgia, serif; margin: 5px 0 0; letter-spacing: -.035em; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.toolbar p { margin: 0; font-size: .84rem; }
button {
  background: #fff8e8;
  color: #4c3220;
  font: 700 .83rem/1.25 system-ui, sans-serif;
  padding: 9px 12px;
  min-height: 44px;
  border: 1px solid #bba27c;
  border-radius: 7px;
  cursor: pointer;
}
button:focus-visible { outline: 2px solid #8f3228; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .66; }
#scanner-control[hidden] { display: none; }
#scanner-control { flex-wrap: wrap; background: #fff8e8; border: 1px solid #cdb78d; border-radius: 9px; padding: 9px 12px; }
#scanner-status { font-weight: 750; }
#scanner-control[data-state="enabled"] #scanner-status { color: #295841; }
#scanner-control[data-state="stopping"] #scanner-status { color: #825000; }
#scanner-toggle { background: #8f3228; color: #fff8e8; border-color: #6a221b; }
#scanner-control[data-state="paused"] #scanner-toggle { background: #2f5b37; border-color: #274c2e; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filters b { margin-left: 3px; font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] { background: #e9b94f; border-color: #9d6820; color: #362411; box-shadow: inset 0 -2px #a672284d; }
#accounts { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
article { background: #fffaf0; border: 1px solid #cdb78d; border-left: 4px solid #bba27c; border-radius: 9px; padding: 12px; box-shadow: 0 2px 0 #60412014; }
article.available { border-left-color: #477545; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.identity { min-width: 0; overflow-wrap: anywhere; }
h2 { font: 800 1.05rem/1.3 system-ui, sans-serif; margin: 0; }
.scanned { color: #695543; font-size: .72rem; text-align: right; flex-shrink: 0; }
.scanned span { display: block; }
.scanned .old { color: #805520; }
.queues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.queue { padding: 8px; border: 1px solid #e5d8bf; background: #f9f0e0; border-radius: 6px; }
.queue.ready { background: #edf3e3; color: #295841; border-color: #d4e1c4; }
.queue.estimate { background: #fff0c9; color: #805520; border-color: #eed8a1; }
#accounts[data-priority="builders"] .builders,
#accounts[data-priority="lab"] .lab { box-shadow: inset 0 0 0 1px #b07927; }
.label, .value, .eta { display: block; }
.label { font-size: .74rem; font-weight: 700; }
.value { font-size: 1.15rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.eta { font-size: .75rem; color: #625140; }
.queue.unknown .eta { margin-top: 3px; }
.empty { grid-column: 1 / -1; margin: 10px 0; }
footer { padding-block: 18px 26px; font-size: .78rem; color: #695543; }
@media (max-width: 760px) { #accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #accounts { grid-template-columns: 1fr; gap: 9px; } }