:root { color-scheme: dark; --bg: #111316; --fg: #e6e6e6; --muted: #8a9099; --btn: #23272e; --btn-on: #3a6ea5; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* gate and login pages */
body.form main { max-width: 22rem; margin: 12vh auto 0; padding: 0 1.25rem; }
body.form h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 1.25rem; }
body.form label { display: block; margin: .9rem 0 .3rem; color: var(--muted); }
body.form input { width: 100%; font-size: 17px; padding: .65rem .75rem; border-radius: 8px;
  border: 1px solid #39404a; background: #1a1d22; color: var(--fg); }
body.form button { margin-top: 1.25rem; width: 100%; font-size: 17px; padding: .7rem; border: 0;
  border-radius: 8px; background: var(--btn-on); color: #fff; }
body.form .msg { background: #3a2a1c; border-radius: 8px; padding: .6rem .75rem; }
body.form .small { font-size: .9rem; color: var(--muted); }
body.form a { color: #8fb8e8; }

/* terminal page */
body.term { overflow: hidden; overscroll-behavior: none; }
#app { position: fixed; left: 0; top: 0; width: 100%; height: var(--vh, 100%); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#bar { display: flex; align-items: center; gap: .4rem; padding: .25rem .4rem; font-size: 13px; color: var(--muted); }
#bar .grow { flex: 1; }
#bar form { margin: 0; }
#status { padding: .1rem .5rem; border-radius: 999px; background: #2b2f36; }
#status.st-ok { background: #1f4d2e; color: #c9f2d5; }
#status.st-wait { background: #4d3f1f; color: #f2e3c9; }
#term { flex: 1; min-height: 0; padding: 2px 4px; }
#keys { display: flex; gap: 4px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; background: #0b0c0e; }
#keys::-webkit-scrollbar { display: none; }
button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#bar button, #keys button { flex: 0 0 auto; min-width: 2.6rem; height: 2.4rem; padding: 0 .6rem; border: 0;
  border-radius: 6px; background: var(--btn); color: var(--fg); font: 14px/1 ui-monospace, Menlo, monospace; }
#bar button { height: 1.8rem; min-width: 2rem; font-size: 12px; }
#keys button.on { background: var(--btn-on); color: #fff; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
#modal[hidden] { display: none; }
#modal .box { width: min(40rem, 94vw); background: #1a1d22; border-radius: 10px; padding: .8rem; }
#modal p { margin: 0 0 .5rem; color: var(--muted); }
#modal textarea { width: 100%; height: 45vh; font: 13px/1.3 ui-monospace, Menlo, monospace; background: #0f1113;
  color: var(--fg); border: 1px solid #39404a; border-radius: 6px; padding: .5rem; }
#modal .row { display: flex; gap: .5rem; margin-top: .5rem; }
#modal .row button { flex: 1; height: 2.4rem; border: 0; border-radius: 6px; background: var(--btn); color: var(--fg); font-size: 15px; }
#modal #modal-ok { background: var(--btn-on); color: #fff; }