:root{--bg:#0f1012;--card:#1a1c20;--btn:#262a30;--btn2:#30353d;--tx:#f2f3f5;--mut:#8b919b;--red:#e4002b;--ok:#2fbf71}
:root[data-theme=light]{--bg:#eef0f3;--card:#fff;--btn:#e4e7ec;--btn2:#d6dae1;--tx:#15171a;--mut:#5d6470}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:420px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 14px 40px}
.top{display:flex;justify-content:space-between;align-items:center;padding:8px 2px}
h1{font-size:1.15rem;margin:0}h2{font-size:1rem;margin:0 0 10px}
.status{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--mut)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut)}
.dot.ok{background:var(--ok)}.dot.err{background:var(--red)}
button{font:inherit;color:var(--tx);background:var(--btn);border:0;border-radius:14px;min-height:52px;padding:0 10px;cursor:pointer;position:relative;overflow:hidden;touch-action:manipulation;transition:transform .08s,background .15s}
button:active,button.hit{transform:scale(.94);background:var(--btn2)}
button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wide{width:100%;margin-top:8px}
input[type=text],input:not([type]){width:100%;min-height:46px;margin-top:8px;padding:0 12px;border-radius:12px;border:1px solid var(--btn2);background:var(--card);color:var(--tx);font:inherit}
.conn{background:var(--card);border-radius:18px;padding:12px;margin-bottom:12px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg button{min-height:42px}.seg .on{background:var(--red);color:#fff}
.remote{background:var(--card);border-radius:28px;padding:16px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.row.two{grid-template-columns:1fr 1fr}
.pair{display:grid;gap:8px;background:var(--btn);border-radius:18px;padding:6px}
.pair button{background:transparent;min-height:56px}
.red{background:var(--red);color:#fff}
.dpad{display:grid;grid-template:repeat(3,64px)/repeat(3,64px);gap:6px;justify-content:center;background:var(--btn);border-radius:50%;padding:14px;width:max-content;margin:0 auto}
.dpad button{background:transparent;min-height:0;border-radius:50%}
.dpad .c{background:var(--red);color:#fff;font-weight:700}
.u{grid-area:1/2}.l{grid-area:2/1}.c{grid-area:2/2}.r{grid-area:2/3}.d{grid-area:3/2}
.media,.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.apps button{font-size:.8rem;padding:0 4px}
.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.colors button{min-height:20px;height:20px;border-radius:10px}
.c-red{background:#e03a3a}.c-green{background:#33b35a}.c-yellow{background:#e8c030}.c-blue{background:#3b7be0}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nums button{font-size:1.1rem}
.kb,.panel{background:var(--card);border-radius:18px;padding:14px;margin-top:12px}
.sendtext{display:grid;grid-template-columns:1fr auto;gap:8px}
.sendtext input{margin:0}.sendtext button{background:var(--red);color:#fff;min-height:46px}
#kbKeys{display:grid;gap:6px;margin-top:10px}
.kr{display:flex;gap:4px;justify-content:center}
.kr button{flex:1;min-width:0;min-height:46px;padding:0;border-radius:9px;font-size:.95rem}
.kr .w{flex:1.6}.kr .sp{flex:5}
.hint{color:var(--mut);font-size:.8rem;margin:10px 0 0}
.panel label{display:flex;align-items:center;gap:10px;padding:7px 0}
.panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--red)}
.history{display:flex;flex-wrap:wrap;gap:6px;color:var(--mut)}
.history span{background:var(--btn);color:var(--tx);border-radius:8px;padding:3px 9px;font-size:.85rem}
.guide{padding-left:20px;margin:0;color:var(--mut)}.guide li{margin:6px 0}
dialog{border:0;border-radius:18px;background:var(--card);color:var(--tx);max-width:380px;width:calc(100% - 28px)}
dialog::backdrop{background:#000a}
#helpBody{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.9rem}
#helpBody b{color:var(--red)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#222;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center;font-size:.9rem}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.err{background:var(--red)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}