/* v2.2 */
.fx580vn-wrap{max-width:540px;margin:18px auto;background:#0f1216;color:#e9eef5;padding:18px;border-radius:22px;box-shadow:0 12px 36px rgba(0,0,0,.35);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;user-select:none}
.fx-header{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:12px}
.fx-classwiz{color:#b892ff}
.fx-screen{background:#e8eef6;color:#0b0e12;border-radius:14px;padding:10px 12px;margin-bottom:12px}
.fx-line{display:flex;justify-content:space-between;font-size:12px;opacity:.85;margin-bottom:6px}
.fx-input{min-height:56px;background:#fff;border-radius:10px;padding:10px 12px;font-size:18px;outline:none;overflow-x:auto}
.fx-result{font-size:30px;text-align:right;padding:8px 4px}
.rows .row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px}
.rows .r-4{grid-template-columns:repeat(4,1fr)}
.key{background:#dfe6f3;color:#0c1116;border:none;border-radius:12px;padding:12px 10px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.18);cursor:pointer;transition:transform .06s, filter .06s, background .2s}
.key:active,.key.pressed{transform:translateY(1px);filter:brightness(.95)}
.shift{background:#ffe29a}.alpha{background:#ffb4c3}.menu{background:#d9f5d1}.on{background:#d1e8ff}
.k-blue{background:#cfe1ff}.k-green{background:#e8f9e6}.k-orange{background:#ffb570}
.keypad-arrows{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:6px;align-items:center;justify-items:center;grid-column:3 / span 3}
.keypad-arrows .lr{display:flex;gap:48px}
.fx-dialog{border:none;border-radius:12px;padding:16px;max-width:420px}
.fx-dialog .rowopt{display:flex;gap:10px;align-items:center;margin:8px 0}
.is-shift .key[data-shift], .is-shift .key.shift{box-shadow:0 0 0 2px rgba(255,184,0,.95) inset}
.is-alpha .key.alpha{box-shadow:0 0 0 2px rgba(255,60,100,.95) inset}
@media (max-width:540px){.fx580vn-wrap{margin:10px;padding:14px}.key{padding:10px 8px}}