/* Minimal mobile-first — navy + orange, readable outdoors */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0f2438;
  color:#f7fafc;
  line-height:1.4;
}
.wrap{
  max-width:28rem;
  margin:0 auto;
  padding:1.25rem 1rem 2rem;
  padding-bottom:max(2rem,env(safe-area-inset-bottom));
}
header{text-align:center;margin-bottom:1.5rem}
h1{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
}
.sub{margin:.35rem 0 0;color:#a0aec0;font-size:.9rem}
.field{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:#cbd5e0;
  margin-bottom:1rem;
}
.field input,
.field select{
  display:block;
  width:100%;
  margin-top:.4rem;
  padding:.85rem 1rem;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.04em;
  border:2px solid #2c5282;
  border-radius:.5rem;
  background:#1a3654;
  color:#fff;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.field input[type=password]{
  letter-spacing:.25em;
  font-variant-numeric:tabular-nums;
}
.field select{
  font-size:1rem;
  letter-spacing:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ed8936' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.field select:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.field input:focus,
.field select:focus{border-color:#ed8936}
.field input[readonly]{
  opacity:.95;
  color:#e2e8f0;
  border-style:dashed;
  cursor:default;
  background:#152a42;
}
.name-warn{
  margin:-.55rem 0 1rem;
  padding:.55rem .75rem;
  font-size:.78rem;
  line-height:1.35;
  font-weight:600;
  color:#fed7aa;
  background:rgba(237,137,54,.12);
  border:1px solid rgba(237,137,54,.45);
  border-radius:.4rem;
}
.name-warn[hidden]{display:none!important}
.field select option{background:#1a3654;color:#fff}
.status{
  text-align:center;
  font-size:1.05rem;
  font-weight:600;
  min-height:1.5em;
  margin:.75rem 0 .25rem;
  color:#e2e8f0;
}
.status.ok{color:#68d391}
.status.err{color:#fc8181}
.status.wait{color:#f6ad55}
.detail{
  text-align:center;
  font-size:.8rem;
  color:#a0aec0;
  margin:0 0 1rem;
  word-break:break-word;
}
.actions{display:flex;flex-direction:column;gap:.85rem;margin-top:.25rem}
.btn{
  display:block;
  width:100%;
  padding:1.35rem 1rem;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.06em;
  border:none;
  border-radius:.65rem;
  cursor:pointer;
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-unlock{
  padding:.9rem 1rem;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.04em;
  margin:-.25rem 0 1rem;
  background:#2c5282;
  border:2px solid #ed8936;
  box-shadow:0 3px 0 #1a3654;
}
.btn-unlock:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #1a3654}
.btn-in{background:#ed8936;box-shadow:0 4px 0 #c05621}
.btn-in:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #c05621}
.btn-out{background:#1a3654;border:3px solid #ed8936;box-shadow:0 4px 0 #0d2137}
.btn-out:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #0d2137}
.queue{
  text-align:center;
  margin:1rem 0 0;
  font-size:.85rem;
  color:#f6ad55;
}
.hint{
  margin:2rem 0 0;
  text-align:center;
  font-size:.7rem;
  color:#718096;
  line-height:1.5;
}

.hint{margin-top:1.75rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);text-align:left}
.hint-pin{font-size:.78rem;color:#a0aec0;margin:0 0 1rem;text-align:center}
.install-title{font-size:.95rem;font-weight:800;letter-spacing:.04em;color:#f6ad55;margin:0 0 .35rem;text-transform:uppercase}
.install-lead{font-size:.85rem;color:#cbd5e0;margin:0 0 1rem;line-height:1.4}
.install-block{margin:0 0 1rem}
.install-block h3{font-size:.88rem;font-weight:700;color:#e2e8f0;margin:0 0 .4rem}
.install-block ol{margin:0;padding-left:1.2rem;color:#a0aec0;font-size:.82rem;line-height:1.45}
.install-block li{margin:.25rem 0}
.install-block b{color:#e2e8f0;font-weight:700}
.install-other{font-size:.75rem;color:#718096;margin:.5rem 0 0;font-style:italic}