:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #06111e; color: #f6fbff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 12% 0%, rgba(27, 167, 255, .15), transparent 34%), linear-gradient(160deg, #071525 0%, #02070d 100%); }
.app-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 9px; height: 100dvh; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.compact-header, .connection-actions, footer { display: flex; align-items: center; gap: 9px; }
.compact-header { justify-content: space-between; min-height: 28px; }
.compact-brand { margin: 0; color: #42c5ff; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.status { border: 1px solid #394b5d; border-radius: 999px; padding: 6px 11px; color: #9aacbd; font-size: 10px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.status[data-state="online"] { border-color: #1acb82; color: #67f2b5; background: rgba(26,203,130,.1); }
.status[data-state="error"] { border-color: #ff6b6b; color: #ff9b9b; background: rgba(255,107,107,.1); }
.connection-panel { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 9px 12px; padding: 10px; border: 1px solid #1d3549; border-radius: 14px; background: rgba(5,18,31,.86); }
.connection-actions { flex-wrap: wrap; align-content: start; }
.terminal-picker { display: grid; gap: 5px; min-width: 0; }
.terminal-picker span, .manual-token label { color: #8fa8bd; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
input, select, button { min-height: 44px; border: 1px solid #2d4c63; border-radius: 10px; background: #091b2b; color: #f5fbff; font: inherit; }
input, select { width: 100%; padding: 0 12px; }
button { padding: 0 14px; color: #91dcff; font-weight: 900; font-size: 13px; letter-spacing: .05em; touch-action: manipulation; }
button.secondary { color: #b8d6e8; } button:active { transform: translateY(1px); } button:disabled, select:disabled { opacity: .45; }
.pair-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) 132px auto; align-items: center; gap: 9px 14px; padding-top: 9px; border-top: 1px solid rgba(45,76,99,.7); }
.pair-copy p { margin: 0; }.pair-title { color: #42c5ff; font-size: 11px; font-weight: 900; letter-spacing: .1em; }.pair-copy #pair-message { margin-top: 4px; color: #bdd1df; font-size: 12px; line-height: 1.35; }
.pair-qr { width: 132px; height: 132px; padding: 6px; border-radius: 8px; background: white; }.pair-qr:empty { display: none; }.pair-qr svg { width: 100%; height: 100%; display: block; }
.manual-token { grid-column: 1 / -1; display: grid; gap: 5px; }.manual-token-row { display: flex; gap: 8px; }.manual-token-row input { min-width: 0; }.manual-token-row button { flex: 0 0 auto; }
.terminal-panel { min-height: 0; overflow: hidden; border: 1px solid #28506a; border-radius: 16px; background: #02070d; box-shadow: 0 20px 70px rgba(0,0,0,.38), inset 0 0 40px rgba(8,58,86,.12); }
#terminal { width: 100%; height: 100%; padding: 10px; }.xterm { height: 100%; font-variant-ligatures: none; }.xterm-viewport { overscroll-behavior: contain; }
footer { justify-content: space-between; color: #61788b; font-size: 10px; letter-spacing: .04em; }.terminal-panel:fullscreen { border: 0; border-radius: 0; padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
.pair-page { min-height: 100%; overflow: auto; display: grid; place-items: center; padding: 24px; }.pair-card { width: min(100%, 460px); padding: 24px; border: 1px solid #28506a; border-radius: 16px; background: #071525; }.pair-card h1 { margin: 0; font-size: 22px; }.pair-card p { color: #bdd1df; line-height: 1.45; }.pair-card form { display: grid; gap: 10px; }.pair-card label { color: #8fa8bd; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.pair-result { min-height: 1.5em; color: #91dcff; font-weight: 700; }.pair-result.error { color: #ff9b9b; }
@media (orientation: portrait) { .app-shell { gap: 7px; padding: 9px; }.connection-panel { grid-template-columns: 1fr; }.connection-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }.connection-actions button { min-width: 0; padding: 0 6px; font-size: 11px; }.pair-panel { grid-template-columns: 1fr 116px; }.pair-qr { width: 116px; height: 116px; }.pair-panel > .secondary { grid-column: 1 / -1; }.manual-token { grid-column: 1 / -1; } footer span:last-child { display: none; } }