.cloud-save-dialog { width: min(660px, calc(100% - 24px)); }
[data-cloud-title-status] { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 3px 9px; border: 1px solid var(--line, #354151); border-radius: 20px; font-size: .75rem; line-height: 1.5; color: var(--text, #edf2f7); background: var(--surface, #131c27); }
[data-cloud-title-status]:empty { display: none; }
.cloud-panel { display: grid; gap: 12px; min-width: 0; color: var(--text, #edf2f7); overflow-wrap: anywhere; }
.cloud-panel p { font-size: .88rem; line-height: 1.65; margin: 0; }
.cloud-state, .cloud-feedback:not(:empty) { padding: 13px 16px; border: 1px solid var(--line, #354151); border-radius: 12px; }
.cloud-state { background: var(--surface2, #1a2532); }
.cloud-state b::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--muted, #93a1ad); margin-right: .6em; vertical-align: .1em; }
.cloud-state[data-phase="synced"] b::before { background: var(--lime, #c8f36d); }
.cloud-state:is([data-phase="offline"], [data-phase="error"], [data-phase="unauthorized"], [data-phase="conflict"]) b::before { background: #ffba84; }
.cloud-state b { font-size: .94rem; }
.cloud-state p, .cloud-card p { color: var(--muted, #a4b2c0); }
.cloud-feedback:empty { display: none; }
.cloud-feedback { color: var(--lime, #c8f36d); }
.cloud-feedback.cloud-problem { color: var(--red, #ff8e95); }
.cloud-content { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.cloud-card { border: 1px solid var(--line, #354151); border-radius: 14px; background: var(--surface, #131c27); padding: clamp(14px, 3vw, 20px); display: grid; gap: 10px; min-width: 0; }
.cloud-card h3, .cloud-card h4 { margin: 0; font-size: 1rem; }
.cloud-actions, .cloud-secondary { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-panel button { min-height: 44px; max-width: 100%; white-space: normal; justify-content: center; line-height: 1.45; }
.cloud-card > button, .cloud-confirm > button { justify-self: start; }
.cloud-secondary { border-top: 1px solid var(--line, #354151); padding-top: 12px; }
.cloud-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.cloud-panel label, .cloud-recover { font-size: .88rem; }
.cloud-panel form label { flex: 1 1 180px; display: grid; gap: 5px; font-weight: 600; }
.cloud-panel input:not([type="checkbox"]) { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px; min-height: 44px; background: var(--bg, #0c121b); color: var(--text, #edf2f7); border: 1px solid #586678; border-radius: 7px; }
.cloud-panel :is(button, input, summary):focus-visible { outline: 2px solid var(--blue, #8ccaf4); outline-offset: 2px; }
.cloud-recover { border-top: 1px solid var(--line, #354151); padding-top: 3px; }
.cloud-recover summary { cursor: pointer; padding-block: 12px; color: var(--blue, #8ccaf4); }
.cloud-recover p { margin-bottom: 9px; }
.cloud-qr { width: min(220px, 100%); justify-self: center; line-height: 0; }
.cloud-qr svg { width: 100%; height: auto; shape-rendering: crispEdges; }
.cloud-code, .cloud-proof, .cloud-key { display: block; text-align: center; font: 700 clamp(1rem, 4vw, 1.25rem)/1.5 ui-monospace, monospace; letter-spacing: .075em; color: var(--lime, #c8f36d); user-select: all; }
.cloud-key { background: var(--bg, #0c121b); padding: 12px; border-radius: 7px; overflow-wrap: anywhere; }
.cloud-panel .cloud-note { text-align: center; font-size: .78rem; }
.cloud-confirm { border-top: 1px solid var(--line, #354151); padding-top: 12px; display: grid; gap: 10px; }
.cloud-confirm strong { color: var(--text, #edf2f7); }
.cloud-check { display: flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; }
.cloud-check input { height: 18px; width: 18px; flex: none; accent-color: var(--lime, #c8f36d); }
.cloud-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cloud-version { border: 1px solid var(--line, #354151); border-radius: 9px; padding: 12px; }
.cloud-version > span { color: var(--blue, #8ccaf4); font-size: .8rem; }
.cloud-version h4 { margin: 4px 0 10px; }
.cloud-version dl { margin: 0; font-size: .8rem; }
.cloud-version dl > div { display: flex; flex-wrap: wrap; gap: 3px 6px; justify-content: space-between; border-top: 1px solid var(--line, #354151); padding-block: 5px; }
.cloud-version dt { color: var(--muted, #a4b2c0); }
.cloud-version dd { margin: 0; text-align: end; }
@media (max-width: 460px) {
  .cloud-save-dialog .modal-pad { padding: 16px; }
  .cloud-actions, .cloud-secondary { display: grid; }
  .cloud-panel form { display: grid; align-items: stretch; }
  .cloud-versions { gap: 6px; }
  .cloud-version { padding: 8px; }
  .cloud-version dl > div { display: grid; }
  .cloud-version dd { text-align: start; }
}