/* Listen Lab — account & cloud sync */

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-btn.signed-in {
  color: #4d6b45;
  background: #eef3e8;
  border-radius: 999px;
  padding: 7px 12px;
}
.account-btn.syncing::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #8fa878;
  border-top-color: transparent;
  animation: acc-spin .8s linear infinite;
  flex: none;
}
@keyframes acc-spin { to { transform: rotate(360deg); } }

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eef2e7;
}
.auth-tabs button {
  font-size: 12px;
  padding: 9px 12px 10px;
  color: #9aa88c;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tabs button.selected {
  color: #456b32;
  border-color: #7c9c5b;
}

#authForm { margin-top: 6px; }
#authForm button#authSubmit {
  width: 100%;
  margin-top: 18px;
}
#authHint { min-height: 18px; }
#authHint:empty { display: none; }

.account-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #7d8b70;
  line-height: 1.9;
  margin-top: 12px;
  word-break: break-all;
}
.account-line strong { color: #3f4c37; font-weight: 600; }

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9b79c;
  flex: none;
}
.sync-dot.ok { background: #7fa35c; }
.sync-dot.busy { background: #c9a45c; }
.sync-dot.error { background: #c4705c; }

.account-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.account-actions .outline.small { flex: 1 1 auto; }

#deleteCloudBtn.danger {
  color: #b06a58;
  font-size: 10px;
  padding: 10px 0 0;
}
#deleteCloudBtn.danger:hover { color: #944a38; }

.account-note {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #eff2e8;
  font-size: 9.5px;
  line-height: 1.9;
  color: #a3ad96;
}

@media (max-width: 560px) {
  .account-btn { max-width: 92px; padding: 7px 9px; }
  .account-actions { flex-direction: column; }
  .account-actions .outline.small { width: 100%; }
}

/* 同步冲突提示条：不挡住正文，且必须让用户明确选择 */
.sync-conflict {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  background: #fffdf6;
  border: 1px solid #e8dcc2;
  border-radius: 14px;
  box-shadow: 0 18px 44px #122b2526;
  padding: 15px 17px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.sync-conflict-text { display: flex; flex-direction: column; gap: 5px; }
.sync-conflict-text strong { font-size: 13px; font-weight: 600; color: #5b4a2a; }
.sync-conflict-text span { font-size: 11px; line-height: 1.75; color: #8b7c5e; }
.sync-conflict-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sync-conflict-actions button { min-height: 40px; }
#conflictMerge { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .sync-conflict { bottom: 72px; padding: 13px 14px; gap: 11px; }
  .sync-conflict-actions button { min-height: 44px; }
}