/* os-23 — Sync status dot on the black cloud header button + device-link UI.
   The dot is a data-attribute + ::after so cloud-sync's ensureButton()
   (which rewrites the button's textContent on every render) can't wipe it.
   States come from sync-engine.js: offline = gray dot, pending = orange
   dot, synced = small white ✓, logged out = attribute removed (no mark). */
#cloudButton[data-sync="offline"]::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#9a9a9a;margin-left:7px;vertical-align:middle}
#cloudButton[data-sync="pending"]::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#fb542b;margin-left:7px;vertical-align:middle;animation:k360syncpulse 1.2s ease-in-out infinite}
#cloudButton[data-sync="synced"]::after{content:'✓';display:inline-block;color:#fff;font-size:11px;font-weight:800;line-height:1;margin-left:6px;vertical-align:middle;opacity:.9}
@keyframes k360syncpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Device-link modal (desktop side) */
.link-qr-wrap{display:flex;justify-content:center;padding:10px 0 4px}
.link-qr-wrap canvas{background:#fff;border:1px solid #eee;border-radius:14px;max-width:70vw;height:auto}
.link-code-big{text-align:center;font-size:30px;font-weight:800;letter-spacing:6px;color:#111;margin:8px 0 4px;font-variant-numeric:tabular-nums}

/* Device-link approve section (phone side, inside the Cloud panel) */
#linkApproveSection{margin-top:6px}
#linkApproveCode{text-transform:uppercase;letter-spacing:2px}
#linkApproveMsg{min-height:18px}