/* =========================================================================
   DEVICE SYNC — topbar chip + settings modal
   ========================================================================= */

.cloud-sync-chip{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 10px; margin-left:8px;
  background:var(--card); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11px;
  letter-spacing:.3px; cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.cloud-sync-chip:hover{ background:var(--card-hover); color:var(--text); border-color:var(--line-bright); }

.cloud-sync-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--faint); flex:none;
}
.cloud-sync-dot.ok{ background:var(--good); box-shadow:0 0 7px rgba(var(--good-rgb),.65); }
.cloud-sync-dot.syncing{ background:var(--accent); animation:cloudSyncPulse 1s ease-in-out infinite; }
.cloud-sync-dot.error{ background:var(--danger); box-shadow:0 0 7px rgba(var(--danger-rgb),.65); }
.cloud-sync-dot.offline{ background:var(--warn); }
.cloud-sync-dot.unconfigured{ background:var(--faint); }
@keyframes cloudSyncPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------------- modal ---------------- */
.sync-modal{ min-width:min(560px,86vw); }
.sync-modal h2{
  margin:0 0 4px; font-family:var(--font-display,inherit);
  font-size:19px; font-weight:600;
}
.sync-modal-sub{ margin:0 0 18px; color:var(--muted); font-size:13px; }

.sync-field{ display:block; margin-bottom:13px; }
.sync-field span{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:5px;
  font-family:var(--font-mono,monospace); font-size:10.5px;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--muted);
}
.field-hint{ margin:-8px 0 13px; font-size:12px; color:var(--faint); line-height:1.45; }

.btn-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-mono,monospace); font-size:10.5px;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--accent);
}
.btn-link:hover{ text-decoration:underline; }

.btn-danger{ color:var(--danger); border-color:rgba(var(--danger-rgb),.35); }
.sync-field input{
  width:100%; height:38px; padding:0 11px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font-mono,monospace); font-size:13px;
}
.sync-field input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28);
}

.sync-pair{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:4px 0 14px; padding:11px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid rgba(var(--accent-rgb),.2); border-radius:var(--r-md);
}
.sync-pair span{
  display:block; margin-bottom:4px;
  font-family:var(--font-mono,monospace); font-size:10px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
}
.sync-pair strong{
  display:block; font-size:13px; font-weight:600; color:var(--text);
}
/* Photo transfer status. Same shell as .sync-pair but in the neutral card
   tint rather than the accent wash — it is a live readout, not a call to
   action, and two accent boxes stacked would fight for the same attention. */
.sync-photos{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:4px 0 6px; padding:11px;
  background:var(--card-subtle);
  border:1px solid var(--line-soft); border-radius:var(--r-md);
}
.sync-photos span{
  display:block; margin-bottom:4px;
  font-family:var(--font-mono,monospace); font-size:10px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim);
}
.sync-photos strong{
  display:block; font-size:13px; font-weight:600; color:var(--text);
}
/* Two actions share the right-hand side; they wrap rather than squeeze the
   status text when the modal is narrow. */
.sync-photo-btns{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto;
}

.sync-pair-code{
  margin:-4px 0 14px; padding:12px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}
.sync-qr{
  display:flex; justify-content:center; padding:10px;
  background:#fff; border-radius:2px;
}
.sync-qr svg{ width:min(260px,60vw); height:auto; display:block; }
.sync-pair-note{
  margin-top:10px; color:var(--muted); font-size:12.5px; line-height:1.45;
}
.sync-pair-note.bad{ color:var(--danger); }

.sync-status-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin:16px 0 4px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--r-md); overflow:hidden;
}
.sync-status-grid > div{
  background:var(--card); padding:9px 11px;
  display:flex; flex-direction:column; gap:3px;
}
.sync-status-grid span{
  font-family:var(--font-mono,monospace); font-size:10px;
  letter-spacing:1px; text-transform:uppercase; color:var(--faint);
}
.sync-status-grid strong{
  font-family:var(--font-mono,monospace); font-size:12px;
  font-weight:500; color:var(--text); word-break:break-all;
}

.sync-error{
  margin-top:12px; padding:9px 11px;
  background:rgba(var(--danger-rgb),.08);
  border:1px solid rgba(var(--danger-rgb),.3); border-radius:var(--r-md);
  color:var(--danger); font-size:12.5px;
}
.sync-msg{
  margin-top:12px; padding:9px 11px;
  background:rgba(var(--accent-rgb),.07);
  border:1px solid rgba(var(--accent-rgb),.26); border-radius:var(--r-md);
  color:var(--text); font-size:12.5px;
}
.sync-msg.bad{
  background:rgba(var(--danger-rgb),.08);
  border-color:rgba(var(--danger-rgb),.3); color:var(--danger);
}

.sync-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);
}