.cloud-save-modal { position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; padding: 18px; background: rgba(16, 24, 38, .74); opacity: 0; pointer-events: none; transition: opacity .2s; }
.cloud-save-modal.open { opacity: 1; pointer-events: auto; }
.cloud-save-card { width: min(100%, 420px); max-height: calc(100vh - 36px); overflow: auto; padding: 22px 18px 18px; border: 3px solid #17253b; border-radius: 18px; background: #fff7df; color: #173345; box-shadow: 0 8px 0 #111724, 0 24px 50px rgba(0,0,0,.3); transform: translateY(12px); transition: transform .2s; }
.cloud-save-modal.open .cloud-save-card { transform: translateY(0); }
.cloud-save-status-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0; padding: 12px; border: 2px solid #bdd4d0; border-radius: 12px; background: #e4f0eb; }
.cloud-save-status-card p { margin: 4px 0 0; color: #69818c; font-size: 11px; line-height: 1.35; }
.cloud-save-dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff7df; color: #ef795c; font-size: 21px; box-shadow: 0 3px 0 #bdd4d0; }
.cloud-status { color: #138d88; font: 800 9px 'DM Mono', monospace; letter-spacing: .08em; }
.cloud-status-offline, .cloud-status-error, .cloud-status-conflict { color: #ef795c; }
.cloud-status-syncing, .cloud-status-loading { color: #d18d34; }
.cloud-save-help { margin: 0 0 16px; color: #69818c; font-size: 12px; line-height: 1.5; }
.cloud-auth-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.cloud-auth-heading h3 { margin: 0; font-size: 17px; }
.cloud-auth-heading small { color: #69818c; font: 800 8px 'DM Mono', monospace; text-transform: uppercase; }
.cloud-auth-form { display: grid; gap: 10px; }
.cloud-auth-form label { display: grid; gap: 5px; }
.cloud-auth-form label span, .cloud-save-details > span, .cloud-conflict-heading > span { color: #69818c; font: 800 8px 'DM Mono', monospace; letter-spacing: .07em; }
.cloud-auth-form input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 2px solid #bdd4d0; border-radius: 9px; background: #fffdf2; color: #173345; font: 600 13px Manrope; outline: none; }
.cloud-auth-form input:focus { border-color: #ef795c; box-shadow: 0 0 0 3px rgba(239, 121, 92, .18); }
.cloud-primary-button, .cloud-secondary-button { width: 100%; border: 2px solid #17253b; border-radius: 11px; padding: 12px; color: #173345; font: 800 11px Manrope; cursor: pointer; box-shadow: 0 4px 0 #17253b; }
.cloud-primary-button { margin-top: 5px; background: linear-gradient(#ffd05d, #f7a220); }
.cloud-secondary-button { border-color: #bdd4d0; background: #fffdf2; box-shadow: 0 3px 0 #bdd4d0; font-size: 9px; }
.cloud-primary-button:hover, .cloud-secondary-button:hover { filter: brightness(1.04); }
.cloud-primary-button:disabled, .cloud-secondary-button:disabled { cursor: wait; filter: saturate(.45); opacity: .65; }
.cloud-text-button { display: block; margin: 14px auto 0; border: 0; background: transparent; color: #ef795c; font: 800 10px Manrope; cursor: pointer; }
.cloud-account-row, .cloud-save-details, .cloud-conflict-times { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cloud-account-row { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 2px solid #e0d5ba; }
.cloud-account-row strong { display: block; margin-top: 3px; font-size: 18px; }
.cloud-sync-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #bce7d4; color: #138d88; font-weight: 800; }
.cloud-save-details { margin-bottom: 14px; padding: 10px 11px; border: 2px solid #bdd4d0; border-radius: 9px; background: #e4f0eb; }
.cloud-save-details strong { color: #173345; font-size: 11px; text-align: right; }
.cloud-conflict-panel { margin-top: 16px; padding: 13px; border: 2px solid #ef795c; border-radius: 11px; background: #fff0d2; }
.cloud-conflict-heading { display: grid; gap: 4px; }
.cloud-conflict-heading > span { color: #ef795c; }
.cloud-conflict-heading strong { font-size: 13px; }
.cloud-conflict-panel p { margin: 9px 0; color: #69818c; font-size: 11px; line-height: 1.4; }
.cloud-conflict-times { margin-bottom: 11px; }
.cloud-conflict-times span { display: grid; gap: 3px; color: #69818c; font: 800 8px 'DM Mono', monospace; }
.cloud-conflict-times strong { color: #173345; font: 700 9px Manrope; }
.cloud-conflict-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

body.dark-mode .cloud-save-card { background: #1d2636; border-color: #101827; color: #f3f1e7; box-shadow: 0 8px 0 #0d1320, 0 24px 50px rgba(0,0,0,.45); }
body.dark-mode .cloud-save-status-card, body.dark-mode .cloud-save-details { background: #253e43; border-color: #4e7275; }
body.dark-mode .cloud-save-status-card p, body.dark-mode .cloud-save-help, body.dark-mode .cloud-auth-heading small, body.dark-mode .cloud-auth-form label span, body.dark-mode .cloud-save-details > span, body.dark-mode .cloud-conflict-heading > span, body.dark-mode .cloud-conflict-panel p, body.dark-mode .cloud-conflict-times span { color: #b5c3ca; }
body.dark-mode .cloud-save-dot, body.dark-mode .cloud-auth-form input, body.dark-mode .cloud-secondary-button { background: #283447; color: #f3f1e7; border-color: #4a5a70; }
body.dark-mode .cloud-account-row { border-color: #3f4d60; }
body.dark-mode .cloud-save-details strong, body.dark-mode .cloud-conflict-times strong { color: #f3f1e7; }
body.dark-mode .cloud-conflict-panel { background: #3b3f4d; border-color: #d5a94f; }

@media (max-width: 420px) {
  .cloud-save-modal { padding: 10px; }
  .cloud-save-card { max-height: calc(100vh - 20px); padding: 18px 14px 14px; }
}