:root { color-scheme: dark; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: #0d0f16; color: #f5f3ff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: radial-gradient(ellipse at 50% 20%,#8b5cf618,transparent 70%); }
header { flex: none; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ffffff0e; }
.identity,.tools { display: flex; align-items: center; gap: 8px; }
.identity strong { font-size: 12px; white-space: nowrap; }
#status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #b9afcf; white-space: nowrap; }
#status::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #f1c983; }
#status[data-state=success] { color: #91e6c5; }
#status[data-state=success]::before { background: #70ddb0; }
#status[data-state=error] { color: #f5a3b5; }
#status[data-state=error]::before { background: #f5819d; }
#fullscreen { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #ffffff18; background: #ffffff05; color: #ddd7eb; font-size: 23px; cursor: pointer; }
main { flex: 1; display: grid; place-items: center; min-height: 0; min-width: 0; padding: 12px; }
#touch-grid { display: grid; gap: var(--gap,10px); grid-template-columns: repeat(var(--columns,3),var(--key,70px)); grid-template-rows: repeat(var(--rows,4),var(--key,70px)); }
.touch-key { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #ffffff26; border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff14,0 3px 0 #0005; background: linear-gradient(145deg,#ffffff0c,transparent 75%),#1c1930; color: #f5f3ff; font-family: inherit; text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.touch-key:focus-visible { outline: 2px solid #b99af8; outline-offset: 2px; }
.touch-key:active,.touch-key[data-pressed=true] { border-color: #b99af8; box-shadow: inset 0 0 0 2px #b99af8; }
.touch-key:disabled { cursor: default; }
.touch-key[data-empty=true] { opacity: .55; }
.touch-key img { width: 100%; min-height: 0; flex: 1 1 0; object-fit: var(--fit,contain); pointer-events: none; }
.touch-label { width: 100%; flex: none; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.touch-number { position: absolute; top: 5px; left: 7px; font-size: 9px; opacity: .7; }
.touch-empty { color: #b7a4df; font-size: 24px; opacity: .7; }
.state-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
.state-symbol { font-size: 48px; color: #b99af8; }
.state-panel h1 { margin: 18px 0 10px; font-size: 20px; }
.state-panel p { margin: 0; max-width: 420px; color: #a7a8be; font-size: 13px; line-height: 1.7; }
#pair-code { display: block; margin-top: 24px; padding: 14px 20px; border: 1px solid #b99af84d; border-radius: 12px; font: 28px monospace; letter-spacing: 6px; color: #c5adfa; background: #b99af80a; }
footer { flex: none; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; color: #9991a9; font-size: 10px; }
#feedback { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-brand { font-size: 8px; letter-spacing: 1.5px; opacity: .6; }
@media(max-height:500px) { header { min-height: 42px; padding-block: 4px; } footer { min-height: 24px; } }