#keychain-sync-root { font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: #202124; }
.kcs-locked #root { visibility: hidden; pointer-events: none; }
#kcs-form [hidden] { display: none !important; }
#kcs-launch { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); right: 18px; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: #fff; background: #25272b; border: 1px solid #53555a; border-radius: 24px; box-shadow: 0 2px 12px #0003; cursor: pointer; }
.kcs-dot { width: 7px; height: 7px; background: #a1a1aa; border-radius: 50%; }
.kcs-online .kcs-dot { background: #4ade80; }
.kcs-error .kcs-dot { background: #fca5a5; }
#kcs-dialog { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 36px); padding: 24px; overflow-y: auto; border: 1px solid #d4d4d8; border-radius: 16px; background: #fafafa; color: #18181b; box-shadow: 0 24px 80px #0005; }
#kcs-dialog::backdrop { background: #0008; }
#kcs-form { display: grid; gap: 15px; }
#kcs-form header { display: flex; align-items: center; justify-content: space-between; }
#kcs-form h2 { font-size: 20px; font-weight: 700; }
#kcs-form label { display: grid; gap: 6px; font-weight: 600; }
#kcs-form input:not([type=checkbox]):not([type=file]) { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px; background: #fff; color: inherit; border: 1px solid #a1a1aa; border-radius: 7px; font-size: 16px; }
#kcs-form .kcs-check { display: flex; align-items: center; gap: 9px; font-weight: 400; }
#kcs-form input[type=checkbox] { width: 18px; height: 18px; }
#kcs-form button, #kcs-form .kcs-file { padding: 10px 13px; border-radius: 7px; border: 1px solid #a1a1aa; color: inherit; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; text-align: center; }
#kcs-form #kcs-connect { background: #2563eb; color: white; border-color: #2563eb; }
#kcs-close { font-size: 24px !important; border: none !important; line-height: 1; }
.kcs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#kcs-form .kcs-hint { color: #71717a; font-size: 12px; font-weight: 400; }
#kcs-status { padding: 10px; background: #e4e4e7; border-radius: 7px; overflow-wrap: anywhere; }
#kcs-status.kcs-error { color: #b91c1c; }
#kcs-conflict { border: 1px solid #f59e0b; padding: 12px; border-radius: 7px; }
#kcs-conflict p { margin-bottom: 10px; }
#kcs-form .kcs-file input { display: none; }
@media (prefers-color-scheme: dark) {
  #kcs-dialog { background: #202124; color: #f4f4f5; border-color: #52525b; }
  #kcs-form input:not([type=checkbox]):not([type=file]) { background: #18181b; }
  #kcs-status { background: #303136; }
  #kcs-status.kcs-error { color: #fca5a5; }
  #kcs-form .kcs-hint { color: #a1a1aa; }
}
