:root{
  --bg:#f2f1ec;
  --fg:#111111;
  --line:#111111;
  --muted:#5a5a54;
  --btn-bg:#111111;
  --btn-fg:#f2f1ec;
  --btn-bg-active:#f2f1ec;
  --btn-fg-active:#111111;
}
*{box-sizing:border-box;}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  -webkit-tap-highlight-color: transparent;
}
body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:9vh 4vw 8vh;
  gap:2.4vh;
}

/* --- bluetooth bar --- */
.ble-bar{
  position:fixed;
  top:1.2vh;
  left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2vw;
  flex-wrap:wrap;
  font-size:12px;
  padding:0 2vw;
}
.brand{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--fg);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
}
.brand-logo{
  width:22px;
  height:22px;
  border-radius:50%;
  flex:none;
  display:block;
}
.ble-status{
  display:flex;
  align-items:center;
  gap:0.5em;
  color:var(--muted);
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ble-dot{
  width:9px; height:9px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:transparent;
  flex:none;
}
.ble-dot.on{ background:var(--line); }
.ble-btn{
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  width:auto; height:auto;
  border-radius:6px;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:0.35em 0.8em;
  cursor:pointer;
}
.ble-btn:disabled{
  opacity:0.35;
  cursor:default;
}
.ble-btn:active:not(:disabled){
  background:var(--btn-bg);
  color:var(--btn-fg);
}
.ble-btn.protected{
  background:var(--btn-bg);
  color:var(--btn-fg);
  border-color:var(--btn-bg);
}
.ble-btn.protected:disabled{
  opacity:0.6;
}
@keyframes ble-btn-working-pulse{
  0%, 100% { opacity:1; }
  50% { opacity:0.4; }
}
.ble-btn.working:disabled{
  opacity:1;
  cursor:wait;
  animation:ble-btn-working-pulse 1s ease-in-out infinite;
}

/* --- e-paper preview: matches the nRF52 2.13" 250x128 panel --- */
.epaper-frame{
  background:var(--line);
  padding:14px;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,0.15);
  width:min(94vw, 700px);
}
#epaper{
  display:block;
  width:100%;
  height:auto;
  background:#ffffff;
  border-radius:2px;
}
.epaper-status{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  min-height:1.4em;
  letter-spacing:0.3px;
}

/* --- editor controls --- */
.editor{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.8vh;
  width:100%;
  max-width:420px;
}
.label-input{
  width:100%;
  font-family:inherit;
  font-size:22px;
  font-weight:700;
  text-align:center;
  background:transparent;
  border:none;
  border-bottom:2px dashed var(--muted);
  color:var(--fg);
  padding:0.3em 0.2em;
  outline:none;
}
.counter-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4vw;
}
.controls{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2.5vw;
}
.counter-input{
  font-family:inherit;
  font-size:clamp(40px, 14vw, 72px);
  font-weight:800;
  width:auto;
  max-width:min(92vw, 380px);
  text-align:center;
  background:transparent;
  border:none;
  color:var(--fg);
  outline:none;
}
button{
  font-family: inherit;
  font-size:clamp(22px, 5vw, 32px);
  font-weight:700;
  width:clamp(52px, 13vw, 76px);
  height:clamp(52px, 13vw, 76px);
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-user-select:none;
}
button:active{
  background:var(--btn-bg-active);
  color:var(--btn-fg-active);
}
button[hidden]{
  display:none;
}
button:disabled{
  opacity:0.35;
  cursor:default;
  background:var(--btn-bg);
  color:var(--btn-fg);
}
button.reset{
  font-size:clamp(11px, 2.2vw, 14px);
  font-weight:600;
  width:auto;
  height:auto;
  padding:0.6em 1em;
  border-radius:8px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hint{
  position:fixed;
  bottom:1.2vh;
  left:0; right:0;
  font-size:14px;
  color:var(--muted);
  opacity:0.7;
  letter-spacing:0.3px;
  text-align:center;
  padding:0 4vw;
}

/* --- settings popup --- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vw;
  z-index:10;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.22s ease, background 0.22s ease, visibility 0s linear 0.22s;
}
.modal-overlay[hidden]{ display:none; }
.modal-overlay.open{
  background:rgba(0,0,0,0.45);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.22s ease, background 0.22s ease;
}
.modal{
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:10px;
  padding:20px;
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transform:translateY(14px) scale(0.97);
  transition:transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal{
  transform:translateY(0) scale(1);
}
.modal h3{
  margin:0;
  font-size:15px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.modal-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  overflow:hidden;
  max-height:160px;
  opacity:1;
  transition:max-height 0.28s ease, opacity 0.22s ease, margin-bottom 0.28s ease;
}
.modal-field[hidden]{
  display:none;
}
.modal-field.collapsed{
  max-height:0;
  opacity:0;
  margin-bottom:-16px;
  pointer-events:none;
}
.modal-field input[type="text"]{
  font-family:inherit;
  font-size:16px;
  padding:0.4em 0.6em;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:transparent;
  color:var(--fg);
  outline:none;
}
.modal-checkbox{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  cursor:pointer;
}
.modal-checkbox input{
  margin-top:2px;
  width:16px;
  height:16px;
  flex:none;
}
.modal-checkbox:has(input:disabled){
  opacity:0.45;
  cursor:default;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
}