:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, monospace;
  background: #05090a;
  color: #d5e7d0;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 50% 15%, rgba(76, 113, 107, .22), transparent 34rem),
    repeating-linear-gradient(135deg, #070c0d 0, #070c0d 3px, #050809 3px, #050809 6px);
}

.device {
  width: min(44rem, 100%);
  position: relative;
  overflow: hidden;
  padding: 1.4rem;
  border: 2px solid #64706a;
  border-radius: 1.6rem 1.6rem .7rem .7rem;
  background: linear-gradient(145deg, #303a37, #151c1b 45%, #202725);
  box-shadow: 0 1.5rem 5rem #000, inset 0 0 0 3px #111715,
    inset 0 0 2rem rgba(255,255,255,.04);
}

.device::before,
.device::after {
  content: "";
  position: absolute;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: #080b0a;
  border: 1px solid #657069;
  top: .7rem;
}
.device::before { left: .8rem; }
.device::after { right: .8rem; }

.grille {
  height: 1.5rem;
  margin: .2rem 3rem 1rem;
  opacity: .7;
  background: repeating-linear-gradient(90deg, #050807 0 5px, transparent 5px 13px);
}

.device-header { text-align: center; letter-spacing: .11em; }
.manufacturer { color: #d5b46b; font-size: .72rem; }
h1 { margin: .3rem 0; font-size: clamp(1.25rem, 5vw, 2rem); text-transform: uppercase; }
.serial { color: #8d9b91; font-size: .67rem; }

.screen {
  position: relative;
  min-height: 19rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 5px solid #0b100f;
  border-radius: .45rem;
  color: #a9f09d;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 40%, #183b2d, #07140f 75%);
  box-shadow: inset 0 0 2rem #000, 0 0 0 1px #5c665f;
  text-shadow: 0 0 .45rem rgba(116,255,144,.45);
}

.screen-topline {
  display: flex;
  justify-content: space-between;
  padding-bottom: .55rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(169,240,157,.35);
  font-size: .75rem;
}

#status-panel { text-align: center; }
#status-title, .notice-panel h2 { margin: 1rem 0 .55rem; font-size: 1.25rem; }
#status-text, .notice-panel p { line-height: 1.55; }

.scope {
  position: relative;
  width: 7.2rem;
  height: 7.2rem;
  margin: 1rem auto;
  border: 1px solid #6cba70;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 1.1rem, rgba(108,186,112,.18) 1.15rem 1.2rem);
}
.scope::before, .scope::after {
  content: "";
  position: absolute;
  background: rgba(108,186,112,.3);
}
.scope::before { width: 100%; height: 1px; left: 0; top: 50%; }
.scope::after { height: 100%; width: 1px; top: 0; left: 50%; }
.scope span {
  position: absolute;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #baff9f;
  box-shadow: 0 0 .8rem #8fff87;
}
.scope span:nth-child(1) { left: 29%; top: 22%; }
.scope span:nth-child(2) { right: 18%; top: 44%; }
.scope span:nth-child(3) { left: 42%; bottom: 18%; }
.scope i {
  position: absolute;
  left: 50%; top: 50%;
  width: 48%; height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, #8dff8b, transparent);
  animation: sweep 3.2s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.controls {
  padding: 1rem;
  border: 1px solid #4b5752;
  background: rgba(7, 12, 11, .55);
}
.controls h2 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
.instruction { margin-top: 0; line-height: 1.5; }
.controls label { display: block; padding: .55rem 0; }
.controls input[type="checkbox"] { accent-color: #96ce75; margin-right: .65rem; }
.lead-row { display: flex; align-items: center; gap: .55rem; padding-left: 1.55rem; }
.lead-row label { padding: 0; }
.lead-row input {
  width: 5rem;
  padding: .35rem;
  border: 1px solid #718077;
  color: #e5f4df;
  background: #0a1110;
}
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .8rem; }
button {
  min-height: 2.8rem;
  padding: .6rem 1rem;
  border: 1px solid;
  border-radius: .18rem;
  font: bold .84rem "Courier New", monospace;
  letter-spacing: .04em;
  cursor: pointer;
}
button:disabled { cursor: wait; opacity: .55; }
.primary { color: #071008; border-color: #b9d89f; background: #9fc481; }
.danger { color: #f0b0a2; border-color: #8d4d42; background: #291411; }
.quiet { color: #b9d89f; border-color: #60755c; background: #142019; }

.notice-label { color: #ffe27f; letter-spacing: .12em; font-size: .75rem; }
.notice-panel dl { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .45rem 1rem; }
.notice-panel dt { color: #7ebd78; }
.notice-panel dd { margin: 0; overflow-wrap: anywhere; }
.screen-button {
  color: #a9f09d;
  border-color: #56845d;
  background: rgba(7, 20, 15, .75);
}

.inbox { margin-top: 1rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: 0; }
.section-heading button { min-height: 2.2rem; padding: .35rem .65rem; }
.inbox-list { display: grid; gap: .65rem; }
.inbox-entry {
  width: 100%;
  padding: .75rem;
  text-align: left;
  color: #d5e7d0;
  border-color: #4b5752;
  background: #0a1110;
}
.inbox-entry:hover, .inbox-entry:focus-visible { border-color: #9fc481; background: #111c17; }
.inbox-kind, .inbox-time { display: block; color: #8fa58f; font-size: .7rem; }
.inbox-title { display: block; margin: .25rem 0; color: #baff9f; font-size: .9rem; }
.inbox-body { display: block; font-weight: normal; line-height: 1.35; }
.inbox-time { margin-top: .35rem; }

footer {
  display: flex;
  justify-content: space-between;
  color: #89968f;
  font-size: .67rem;
  letter-spacing: .08em;
}
.lamp i { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #77ce62; box-shadow: 0 0 .5rem #77ce62; }

@media (max-width: 34rem) {
  body { padding: .35rem; }
  .device { padding: 1rem; border-radius: .8rem .8rem .4rem .4rem; }
  .screen { min-height: 17rem; }
  .lead-row { padding-left: 0; flex-wrap: wrap; }
  footer { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scope i { animation: none; transform: rotate(35deg); }
}