* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #12121c; color: #e8e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; justify-content: center; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; padding: 24px 0; }
main.login { justify-content: center; }
header { display: flex; justify-content: space-between; align-items: baseline; }
h1 { font-size: 1.3rem; font-weight: 500; color: #a0a0b8; letter-spacing: .04em; }
.state { font-size: .9rem; color: #7c7c94; }
.buttons, .tilt { display: flex; flex-direction: column; gap: 16px; }
button { background: #1c1c2e; border: 2px solid #2a2a44; color: #e8e8f0; font-size: 1.25rem; font-weight: 500;
  padding: 22px; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 12px;
  -webkit-tap-highlight-color: transparent; user-select: none; transition: transform .1s, background .1s; cursor: pointer; }
button:active { transform: scale(.97); background: #2a2a44; }
button:disabled { opacity: .5; }
button.open { border-left: 6px solid #4ecca3; }
button.stop { border-left: 6px solid #f0a500; padding: 28px; }
button.close { border-left: 6px solid #e84545; }
button.primary { background: #2f4f9f; border-color: #3a5fbf; }
.icon { font-size: 1.5rem; }
.tilt { background: #1c1c2e; border: 2px solid #2a2a44; border-left: 6px solid #5b8def; border-radius: 16px; padding: 14px 18px 10px; gap: 8px; }
.tilt label { font-size: 1.25rem; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 12px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 72px; background: transparent; margin: 0; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 72px; border-radius: 14px; background: linear-gradient(90deg, #2a2a44, #3a3a5c); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 72px; border-radius: 14px; background: #5b8def; border: 0; }
input[type=range]::-moz-range-track { height: 72px; border-radius: 14px; background: linear-gradient(90deg, #2a2a44, #3a3a5c); }
input[type=range]::-moz-range-thumb { width: 56px; height: 72px; border-radius: 14px; background: #5b8def; border: 0; }
input[type=password] { width: 100%; padding: 18px; font-size: 1.1rem; border-radius: 14px; border: 2px solid #2a2a44;
  background: #1c1c2e; color: #e8e8f0; margin-bottom: 16px; }
form { display: flex; flex-direction: column; }
.hint { min-height: 1.4em; color: #e84545; font-size: .9rem; margin-top: 12px; text-align: center; }
.status { min-height: 1.4em; text-align: center; font-size: .95rem; color: #7c7c94; }
.status.ok { color: #4ecca3; } .status.err { color: #e84545; }
footer { display: flex; justify-content: space-between; font-size: .8rem; color: #55556a; margin-top: auto; }
footer a { color: #7c7c94; }