:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#263238;background:#f3f6f5;--green:#2d7d32}*{box-sizing:border-box}body{margin:0}header{background:#252c30;color:white;padding:20px 5%;display:flex;gap:20px;align-items:center}header strong{font-size:29px;margin-right:15px}header #account{margin-left:auto;color:#d9e3dd}main{max-width:1380px;margin:26px auto;padding:0 24px}h1{font-size:26px}h2{font-size:21px;margin:0 0 15px}p{line-height:1.7}section{background:white;border:1px solid #dfe5e1;border-radius:18px;padding:24px;margin:18px 0}#login{max-width:480px;margin:70px auto}form{display:flex;flex-wrap:wrap;gap:18px;align-items:end}#login form{display:grid}label{display:flex;gap:8px;align-items:center}form label{display:grid;flex:1;min-width:180px}input,select,button{font:inherit;border:1px solid #d5ddd7;border-radius:10px;padding:11px 14px;max-width:100%}button{cursor:pointer;background:#f0f4f1;color:#265d30}button.primary{background:var(--green);color:white;border-color:var(--green)}button.danger{color:#ac3030;background:#fff5f5}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){filter:brightness(.95)}input[type=checkbox]{accent-color:var(--green);width:18px;height:18px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}.toolbar h1,.toolbar h2{flex:1;margin:0}.muted{color:#65766d;font-size:14px}.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.device{text-align:left;display:grid;gap:10px;background:white;padding:22px;border:2px solid #dfe5e1}.device.active{border-color:var(--green);background:#edf7ee}.device strong{font-size:19px}.device small{color:#63776a}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th{font-weight:500;background:#edf2ef;color:#52715b}td,th{padding:13px 12px;border-bottom:1px solid #e3e9e5}#elements td:nth-child(2){color:var(--green);font-weight:650}.result{display:grid;grid-template-columns:1fr 1.5fr;gap:24px}canvas{display:block;width:100%;height:340px;touch-action:none;border:1px solid #dfe5e1;border-radius:12px}#message:not(:empty){padding:14px 20px;background:#fff1d6;border-radius:12px;position:sticky;top:8px;z-index:2}#pairResult{overflow-wrap:anywhere;color:var(--green);font-weight:600}footer{padding:30px;text-align:center;color:#6b7d71;font-size:13px}[hidden]{display:none!important}@media(max-width:800px){main{padding:0 12px}.result{grid-template-columns:1fr}section{padding:18px}header{padding:16px}header span{font-size:14px}#login{margin:30px auto}.toolbar{gap:8px}td,th{padding:10px 8px}}

p,td,.device{overflow-wrap:anywhere}.result>div{min-width:0}