.sy-open-btn svg{width:16px;height:16px;flex-shrink:0;}
.sy-open-btn .sy-dot{width:7px;height:7px;border-radius:50%;background:#4a6080;flex-shrink:0;}
.sy-open-btn.sy-on .sy-dot{background:#4fb4ff;box-shadow:0 0 6px #4fb4ffaa;}
.sy-open-btn.sy-on.sy-busy .sy-dot{animation:syPulse 1s ease-in-out infinite;}
.sy-open-btn.sy-on.sy-err .sy-dot{background:#ff9d3c;box-shadow:0 0 6px #ff9d3caa;}
@keyframes syPulse{50%{opacity:.35;}}

html.sy-lock,html.sy-lock body{overflow:hidden;}
.sy-backdrop{position:fixed;inset:0;z-index:2100;background:rgba(4,8,14,.82);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .18s ease;font-family:'SKR Global','Lato',system-ui,sans-serif;}
.sy-backdrop.show{opacity:1;}
.sy-panel{position:relative;width:100%;max-width:560px;margin:auto;padding:22px;border-radius:14px 0 14px 0;border:1px solid #253d57;
  background:linear-gradient(160deg,color-mix(in srgb,#4fb4ff 12%,#111826) 0%,#111826 58%);box-shadow:0 18px 50px #000000a0;color:#e8dcc8;
  transform:translateY(8px);transition:transform .18s ease;}
.sy-backdrop.show .sy-panel{transform:none;}
@media (prefers-reduced-motion:reduce){.sy-backdrop,.sy-panel{transition:none;}}
.sy-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px 0 10px 0;border:1px solid #253d57;background:#0000004d;color:#8aa0bc;font-size:15px;line-height:1;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.sy-x:hover{color:#ff9a9a;border-color:#ff7a7a;background:#ff5a5a1a;}
.sy-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-right:44px;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:26px;letter-spacing:2px;color:#f0ac4e;line-height:1.1;}
.sy-title svg{width:24px;height:24px;flex-shrink:0;color:#4fb4ff;}
.sy-body p{font-size:13px;color:#8aa0bc;line-height:1.6;margin:0 0 10px;}
.sy-body p.sy-lead{color:#e8dcc8;font-size:14px;}
.sy-body p.sy-note{font-size:12px;margin-top:14px;padding-top:12px;border-top:1px solid #1a2e42;}

.sy-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;}
.sy-actions.sy-left{margin-top:10px;}
.sy-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 14px;border-radius:8px 0 8px 0;border:1px solid #253d57;background:#0d1a2a;color:#8aa0bc;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .15s;line-height:1.2;text-align:center;}
.sy-btn:hover{color:#f0ac4e;border-color:#7a4e10;}
.sy-btn.primary{background:#7a4e10;border-color:#e8962a;color:#1a1206;}
.sy-btn.primary:hover{background:#e8962a;color:#1a1206;}
.sy-btn.danger{color:#f08080;border-color:#f0808055;}
.sy-btn.danger:hover{background:#f0808018;color:#ffb0b0;border-color:#f08080;}
.sy-btn:disabled{opacity:.5;cursor:default;}
.sy-btn.is-busy{opacity:.8;}

.sy-or{display:flex;align-items:center;gap:10px;margin:18px 0 10px;font-size:12px;color:#8aa0bc;}
.sy-or::before,.sy-or::after{content:"";flex:1;height:1px;background:#1a2e42;}
.sy-join{display:flex;gap:8px;}
.sy-input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:8px 0 8px 0;border:1px solid #253d57;background:#08111e;color:#e8dcc8;
  font-family:ui-monospace,'Consolas',monospace;font-size:16px;letter-spacing:2px;text-transform:uppercase;}
.sy-input:focus{outline:none;border-color:#4fb4ff;}
.sy-input::placeholder{color:#4a6080;}

.sy-status{display:flex;align-items:center;gap:8px;font-size:13px;color:#c2cedb;margin:0 0 14px;padding:9px 12px;border-radius:8px 0 8px 0;background:#08111e99;border:1px solid #1a2e42;}
.sy-status .sy-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#4fb4ff;box-shadow:0 0 6px #4fb4ffaa;}
.sy-status.busy .sy-dot{animation:syPulse 1s ease-in-out infinite;}
.sy-status.err{border-color:#ff9d3c66;}
.sy-status.err .sy-dot{background:#ff9d3c;box-shadow:0 0 6px #ff9d3caa;}

.sy-codewrap{display:flex;gap:16px;align-items:flex-start;}
.sy-codecol{flex:1;min-width:0;}
.sy-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8aa0bc;margin-bottom:6px;}
.sy-code{font-family:ui-monospace,'Consolas',monospace;font-size:24px;font-weight:700;letter-spacing:3px;color:#fff;padding:8px 12px;border-radius:8px 0 8px 0;background:#08111e;border:1px solid #253d57;display:inline-block;margin-bottom:2px;user-select:all;white-space:nowrap;}
.sy-codecol p{margin-top:10px;}
.sy-qr{width:148px;flex-shrink:0;padding:6px;border-radius:8px 0 8px 0;background:#fff;line-height:0;}
.sy-qr svg{width:100%;height:auto;display:block;}

.sy-msg{font-size:13px;line-height:1.5;margin:12px 0 0;padding:9px 12px;border-radius:8px 0 8px 0;}
.sy-msg.ok{background:#4fb4ff14;border:1px solid #4fb4ff55;color:#bfe3ff;}
.sy-msg.err,.sy-msg.warn{background:#ff9d3c14;border:1px solid #ff9d3c66;color:#ffd2a6;}
.sy-msg.warn{margin:0 0 12px;}

.sy-more{margin-top:16px;}
.sy-more summary{cursor:pointer;font-size:12px;color:#8aa0bc;list-style-position:inside;}
.sy-more summary:hover{color:#c2cedb;}
.sy-more p{margin-top:8px;}

@media (max-width:760px){
  .sy-backdrop{padding:8px;}
  .sy-panel{padding:18px 16px;}
  .sy-codewrap{flex-direction:column;align-items:stretch;}
  .sy-qr{width:132px;align-self:center;}
  .sy-code{font-size:20px;letter-spacing:2px;display:block;text-align:center;}
  .sy-actions .sy-btn{flex:1 1 auto;min-height:40px;}
  .sy-join .sy-btn{min-height:40px;}
}

[data-sync-button]{display:contents;}