:root{
  --bg:#14100e; --panel:#1c1613; --line:#33291f; --ink:#f0e7dd; --dim:#a2938a;
  --hot:#e2542a; --ok:#5fbf7a; --pad:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,
       "Noto Sans KR","Apple SD Gothic Neo",monospace;
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
#bar{
  display:flex; align-items:center; gap:.6rem; padding:.55rem var(--pad);
  background:var(--panel); border-bottom:1px solid var(--line); font-size:.86rem;
}
.brand b{font-weight:600}
.spacer{flex:1}
.state{font-size:.74rem; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--line)}
.state.on{color:var(--ok)} .state.off{color:var(--dim)} .state.bad{color:var(--hot)}
#bar button{
  background:transparent; color:var(--dim); border:1px solid var(--line);
  border-radius:8px; padding:.25rem .5rem; font:inherit; font-size:.76rem; cursor:pointer;
}
#out{
  flex:1; overflow-y:auto; overflow-x:hidden; padding:var(--pad);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
#out div{margin:0 0 .28rem}
#out .sys{color:var(--dim)}
#out .me{color:#ffd9a0}
#out .err{color:var(--hot)}
#pad{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  padding:6px var(--pad) 0;
}
#verbs{display:flex; gap:6px; padding:6px var(--pad) 0; overflow-x:auto}
#pad button,#verbs button{
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:.6rem .2rem; font:inherit; font-size:.9rem; cursor:pointer;
  min-height:44px;                        /* real tap target on a phone */
}
#verbs button{padding:.5rem .8rem; white-space:nowrap; font-size:.82rem; color:var(--dim)}
#pad button:active,#verbs button:active{background:#2a211b}
#form{display:flex; gap:6px; padding:8px var(--pad) 10px}
#in{
  flex:1; background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:.7rem .8rem; font:inherit; min-width:0;
}
#in:focus{outline:2px solid #4a382c; outline-offset:0}
#form button{
  background:var(--hot); color:#fff; border:0; border-radius:10px; padding:0 1rem;
  font-size:1.05rem; cursor:pointer; min-width:52px;
}
@media (min-width:720px){
  #pad{grid-template-columns:repeat(12,1fr)}
  body{font-size:15.5px}
}