:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#292b28;background:#f8f5ef}body{margin:0;padding:48px 20px}*{box-sizing:border-box}.card{max-width:880px;margin:0 auto;padding:36px;background:white;border:1px solid #e8e5dd;border-radius:22px;box-shadow:0 12px 48px #342d2010}h1{font-size:28px}h2{margin-top:32px;font-size:20px}p{line-height:1.7;color:#64695e}.eyebrow{font-size:13px;color:#3a7566;letter-spacing:1px}form{max-width:400px;display:grid;gap:14px}label{display:grid;gap:8px}input,button,select{font:inherit;border-radius:10px;padding:12px;border:1px solid #d6d9d0}input{width:100%}button{background:#2e6e5b;color:white;cursor:pointer}button.secondary{background:#fff;color:#354d43}button.danger{background:#9a423b}button:disabled{opacity:.5}nav{display:flex;gap:20px;margin-top:28px}a{color:#2e6e5b}#status{white-space:pre-wrap;color:#9a423b}section{border-top:1px solid #e9e9e2;margin-top:22px;padding-top:16px}.row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #eee}.row div{overflow-wrap:anywhere}.row small{display:block;color:#73776d;margin-top:6px}.actions{display:flex;gap:10px;flex-wrap:wrap}.code{overflow-wrap:anywhere;background:#f5f5ef;padding:14px;border-radius:10px;font-family:monospace}.hint{font-size:13px}table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:10px;border-bottom:1px solid #eee}@media(max-width:600px){body{padding:18px 10px}.card{padding:22px 18px}.row{align-items:flex-start;flex-direction:column}h1{font-size:25px}}

.pairing{font-size:32px;letter-spacing:6px;max-width:280px;text-align:center}

.pattern-panel{max-width:320px;margin:16px 0}.pattern-pad{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);position:relative;touch-action:none;user-select:none;-webkit-user-select:none;background:#f4f8f5;border:1px solid #e1ebe4;border-radius:24px;overflow:hidden}
.pattern-pad svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#4c967c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.pattern-pad line{opacity:.4}
.pattern-dot{position:relative;background:none!important;border:0;padding:0;min-width:44px;min-height:44px;display:grid;place-items:center;touch-action:none;border-radius:50%;color:#326e59}
.pattern-dot i{width:14px;height:14px;border-radius:50%;background:#a3b6ab;box-shadow:0 0 0 9px #e5eee8;transition:background .12s,box-shadow .12s;pointer-events:none}
.pattern-dot.connected i{background:#2e795e;box-shadow:0 0 0 12px #69ad8a38}.pattern-dot:focus-visible{outline:3px solid #5a7fca;outline-offset:-9px}.pattern-hint{text-align:center;font-size:14px;min-height:24px}.pattern-tools{display:flex;gap:12px}.pattern-tools button{flex:1;min-height:44px}
.pattern-pad.drawing{border-color:#79a98f;cursor:crosshair}.pattern-pad.pattern-ready{border-color:#4c967c}.pattern-pad.drawing line{opacity:.75}.pattern-dot.current i{box-shadow:0 0 0 16px #69ad8a48}.pattern-pad.pattern-ready+.pattern-hint{color:#2e6e5b}
.pattern-option{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6}.pattern-option input{width:20px;height:20px;margin:2px 0;flex:none;accent-color:#2e6e5b}.pattern-option small{display:block;color:#757f76;font-size:12px}#content>button{margin:14px 10px 0 0;min-height:44px}
.pattern-error{animation:pattern-shake .28s ease-in-out;border-color:#d9a484}.pattern-error .pattern-dot i{background:#bd8969}
@keyframes pattern-shake{30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}