:root{
  --bg:#121212; --panel:#1e1e1e; --key:#2b2b2b; --key-fg:#eaeaea;
  --key-active:#4f7cff; --key-mod:#2f4a7f; --key-func:#2a5a2a; --key-nav:#5a4a2a;
  --key-arrow:#5a2a5a; --key-special:#444; --accent:#00d084; --border:#333;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:#ddd; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, sans-serif;
}
.topbar{padding:16px; background:#0f0f0f; border-bottom:1px solid var(--border)}
.topbar h1{margin:0 0 6px; font-size:18px}
.hint{margin:0; color:#9aa}
main{max-width:1100px; margin:0 auto; padding:16px}

#status{
  display:flex; flex-wrap:wrap; gap:12px; padding:12px; background:var(--panel);
  border:1px solid var(--border); border-radius:8px; margin-bottom:16px;
}
.status-item{display:flex; gap:8px; align-items:center; padding:6px 10px; background:#151515; border-radius:6px}
.status-item label{color:#aab}
.status-item span{font-weight:700; color:#fff}
.status-item.mono span{font-family:var(--mono); color:#9fe}

#keyboard{
  user-select:none; padding:14px; background:var(--panel);
  border:1px solid var(--border); border-radius:8px;
}
.kb-row{display:flex; gap:6px; margin-bottom:6px}
.kb-key{
  display:flex; align-items:center; justify-content:center;
  height:44px; min-width:40px; padding:0 6px;
  background:var(--key); color:var(--key-fg); border:1px solid #222; border-radius:6px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35);
  font-weight:700; font-size:13px; transition:background .08s ease, transform .02s ease;
}
.kb-key.small{font-size:12px}
.kb-key.space{min-width:280px}
.kb-key.wide{min-width:80px}
.kb-key.xwide{min-width:110px}
.kb-key.xxwide{min-width:140px}
.kb-key.func{background:#234423}
.kb-key.mod{background:#233a66}
.kb-key.nav{background:#5a4a2a}
.kb-key.arrow{background:#5a2a5a}
.kb-key.special{background:#3a3a3a}
.kb-spacer{width:16px}

.kb-key.active{
  background:var(--key-active) !important;
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.4);
}

#log{
  margin-top:16px; padding:12px; background:var(--panel);
  border:1px solid var(--border); border-radius:8px;
}
#log h2{margin:0 0 10px; font-size:16px}
.log-controls{display:flex; gap:12px; align-items:center; margin-bottom:10px}
#log-list{
  list-style:none; margin:0; padding:0; max-height:200px; overflow:auto;
  font-family:var(--mono)
}
#log-list li{
  border-bottom:1px dashed #2c2c2c; padding:6px 4px; color:#cfd;
}
button{
  background:#263d2e; color:#dff; border:1px solid #395; padding:6px 10px; border-radius:6px; cursor:pointer;
}
button:hover{filter:brightness(1.1)}
.chk{display:flex; align-items:center; gap:6px}
footer{max-width:1100px; margin:12px auto 24px; color:#8a8; padding:0 16px}