:root{
  --bg: #121212;
  --card: #1e1e1e;
  --text: #ffffff;
  --muted: #cfcfcf;
  --primary: #4caf50; /* available */
  --danger: #f44336;  /* busy */
  --accent: #1e88e5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
#app{
  max-width:480px;
  margin:0 auto;
  padding:28px 20px;
  box-sizing:border-box;
}

#appTitle { font-size:28px; margin:0 0 14px 0; font-weight:700; color:var(--accent); text-align:center; }

#userRow{ display:flex; justify-content:center; gap:12px; align-items:center; margin-bottom:18px; }
#userText{ font-size:16px; color:var(--muted); }
.small{ background:transparent; border:1px solid rgba(255,255,255,0.08); color:var(--text); padding:6px 10px; border-radius:8px; font-size:13px; }

#statusBox{ text-align:center; margin-bottom:22px; }
#lastStatus{ font-size:18px; }
#lastTime{ font-size:13px; color:var(--muted); }

#controls{ display:flex; flex-direction:column; gap:12px; }
.big{
  width:100%;
  padding:18px 12px;
  border-radius:14px;
  border:none;
  font-size:18px;
  font-weight:600;
  color:#fff;
}
.green{ background:var(--primary); }
.red{ background:var(--danger); }

#feedback{ margin-top:18px; text-align:center; color:var(--muted); font-size:14px; min-height:20px; }
@media (prefers-color-scheme:light){
  :root{ --bg:#ffffff; --card:#ffffff; --text:#111; --muted:#555; }
  #appTitle{ color:#1e88e5; }
}