/* Chromie's small, self-contained profile badge. No storefront selectors are reset. */
.chromie-log {
  width: 100%; max-width: 308px; min-width: 0; box-sizing: border-box;
  position: relative; z-index: 1; padding: 4px;
  color: #fff; background: #111;
  border: 2px solid #fff; border-right-color: #777; border-bottom-color: #777;
  border-radius: 9px; box-shadow: 3px 4px 0 #101010;
  font-family: 'Courier New', ui-monospace, monospace;
  text-align: left; line-height: 1.25;
}
.chromie-log__title {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0; padding: 7px 8px; border: 1px solid #86beff; border-radius: 4px 4px 0 0;
  background: linear-gradient(#75b9ff 0%, #1267ed 48%, #003cce 50%, #0047ff 100%);
  color: #fff; font: 700 12px/1.2 'Courier New', ui-monospace, monospace;
  text-shadow: 1px 1px 0 #001e64; letter-spacing: .15px;
}
.chromie-log__star { color: #fff700; font-size: 17px; line-height: .7; }
.chromie-log__numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 6px 8px; }
.chromie-log__numbers div { min-width: 0; }
.chromie-log__numbers span { display: block; color: #fff; font: 700 9px/1.3 'Courier New',monospace; letter-spacing: .4px; margin-bottom: 5px; }
.chromie-log__numbers output {
  display: block; padding: 5px 3px; min-height: 30px;
  border: 1px inset #8c8c8c; border-radius: 2px;
  background: repeating-linear-gradient(90deg,transparent 0,transparent calc(1ch - 1px),#ffffff12 calc(1ch - 1px),#ffffff12 1ch),linear-gradient(#242424,#080808 49%,#1b1b1b 51%,#070707);
  color: #fff700; font: 700 clamp(17px,2vw,23px)/1 'Courier New',monospace;
  font-variant-numeric: tabular-nums; letter-spacing: 1px; text-align: center;
  text-shadow: 0 0 8px #fff70044; overflow-wrap: anywhere;
}
.chromie-log__numbers div:last-child output { color: #fff; text-shadow: 0 0 7px #4e9dff; }
.chromie-log__foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 7px 4px; font: 700 8px/1.3 'Courier New',monospace; letter-spacing: .4px; color: #c4c4c4; }
.chromie-log__foot b { color: #b9d9ff; font: inherit; }
.chromie-log__foot b::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border: 1px solid #ff8495; background: #ff183b; box-shadow: 0 0 4px #ff183b; }
.chromie-log[data-state='offline'] .chromie-log__foot b { color: #ccc; }
.chromie-log[data-state='offline'] .chromie-log__foot b::before { background: #777; box-shadow: none; border-color: #aaa; }
.hero-visual > .chromie-log { grid-column: 1 / -1; justify-self: center; align-self: end; margin: 0 0 4px; }
.shop-sidebar > .chromie-log { margin-top: 30px; }
.shop-sidebar .chromie-log__title { font-size: 11px; padding: 7px 5px; }
.shop-sidebar .chromie-log__numbers { gap: 5px; padding: 9px 3px 7px; }
.shop-sidebar .chromie-log__numbers output { font-size: 19px; letter-spacing: 0; }
.shop-sidebar .chromie-log__numbers span { font-size: 8px; letter-spacing: 0; }
@media (max-width: 768px) {
  .hero-visual > .chromie-log { margin-top: 12px; }
  .shop-sidebar > .chromie-log { max-width: 308px; margin: 22px auto 2px; }
  .shop-sidebar .chromie-log__title { font-size: 12px; }
  .shop-sidebar .chromie-log__numbers output { font-size: 23px; letter-spacing: 1px; }
  .shop-sidebar .chromie-log__numbers span { font-size: 9px; letter-spacing: .4px; }
}