#cloud-dialog{padding:0;width:560px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);border:1px solid var(--border);border-radius:var(--radius-large);color:var(--ink);background:var(--surface);overflow:auto}
#cloud-dialog::backdrop{background:#20252266}
#cloud-dialog .inspector-header{position:sticky;top:0;background:var(--surface);z-index:1}
.cloud-body{padding:var(--space-6,var(--space-6))}
.cloud-body label{display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;gap:var(--space-2,var(--space-2));margin:var(--space-4,var(--space-4)) 0}
.cloud-body input,.cloud-body select{width:100%;min-width:0;padding:var(--space-2-half);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);font:var(--type-input-weight,400) var(--type-input-size,16px)/var(--type-input-line,26px) var(--font-sans)}
.cloud-body h3{font-size:var(--type-section-size,var(--font-size-lead));line-height:var(--type-section-line,26px);font-weight:var(--type-section-weight,var(--font-weight-semibold))}
.cloud-actions{display:flex;flex-wrap:wrap;gap:var(--space-3,var(--space-3));margin-top:var(--space-4,var(--space-4))}
.cloud-body button:disabled{opacity:.5;cursor:not-allowed}
.cloud-body p{overflow-wrap:anywhere}
#cloud-status{white-space:pre-wrap;line-height:var(--type-body-line,22px);margin:var(--space-4,var(--space-4)) 0 0}
#cloud-status[data-error=true]{color:var(--color-danger)}
#cloud-member>section{border-top:1px solid var(--border);padding-top:var(--space-4,var(--space-4));margin-top:var(--space-6,var(--space-6))}
#cloud-load-review{padding:var(--space-4,var(--space-4));border:1px solid var(--border);border-radius:var(--radius-panel);margin-top:var(--space-4,var(--space-4))}
#cloud-dialog [hidden]{display:none!important}
#cloud-button{white-space:nowrap}

/* Account and local backup share the standard canvas drawer. */
#canvas-inspector[data-panel="account"]>.inspector-header{display:none}
#canvas-inspector #cloud-dialog{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden}
#canvas-inspector #cloud-dialog[hidden]{display:none!important}
#cloud-dialog>.inspector-header{position:static;padding:var(--space-4) var(--space-7);flex-shrink:0}
#cloud-dialog>.account-tabs{position:static;margin:var(--space-6) var(--space-7) 0;flex-shrink:0}
#cloud-dialog>.cloud-body{overflow:auto;min-height:0;flex:1;padding:var(--space-6) var(--space-7) var(--space-9)}
#cloud-dialog>.cloud-body>*{max-width:860px;margin-left:auto;margin-right:auto}
#cloud-dialog #files-panel{padding:0;overflow:visible}
#cloud-dialog #cloud-auth,#cloud-dialog #cloud-reset{max-width:640px}
#cloud-dialog .account-tabs button{white-space:nowrap}
@media(max-width:800px){#cloud-dialog>.inspector-header{padding:var(--space-3) var(--space-4)}#cloud-dialog>.account-tabs{margin:var(--space-4) var(--space-4) 0}#cloud-dialog>.cloud-body{padding:var(--space-4)}#cloud-dialog .account-tabs button{padding:var(--space-2-half) var(--space-3);font-size:var(--type-label-size)}}

#cloud-dialog #files-panel .workspace-toolbar>button{flex:0 0 auto;min-height:44px}

body[data-canvas-locked="true"] .canvas-toolbar{opacity:.45}
body[data-canvas-locked="true"] .canvas-bottom-note{visibility:hidden}

#cloud-close:disabled{opacity:.45;cursor:not-allowed}

.admin-list{display:grid;gap:var(--space-4);margin:var(--space-5) 0}.admin-card{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-card);overflow-wrap:anywhere}.admin-actions,.admin-pagination{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-4)}.admin-id{display:block;color:var(--muted)}.account-tabs{flex-wrap:wrap}.admin-pane select{margin-bottom:var(--space-4)}

#cloud-dialog .admin-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);width:100%;max-width:720px;margin:var(--space-4) auto 0}#cloud-dialog .admin-toolbar button{margin:0;min-height:44px}

.cloud-account-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}.cloud-account-identity{flex:1;min-width:0}.cloud-account-label{display:block;font-size:var(--font-size-sm);color:var(--muted);margin-bottom:var(--space-1-half)}#cloud-dialog #cloud-account{margin:0;overflow-wrap:anywhere;font-weight:var(--font-weight-semibold)}#cloud-dialog #cloud-signout{flex:none;min-height:44px;padding:var(--space-2-half) var(--space-4-half);margin:0;font-weight:var(--font-weight-semibold)}

/* Account controls use the same semantic tokens as the product and reference. */
#cloud-dialog #cloud-auth .google-signin{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--control-height-prominent);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);white-space:normal}
#cloud-dialog #cloud-auth .google-account-hint{font-size:var(--font-size-ui);line-height:var(--line-height-body);color:var(--muted);margin:var(--space-3) 0 var(--space-5)}
#cloud-dialog #cloud-auth .google-signin-divider{display:flex;align-items:center;gap:var(--space-3);color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-body);margin:var(--space-6) 0;padding:0;border:0;text-align:center}
#cloud-dialog .google-signin-divider::before,#cloud-dialog .google-signin-divider::after{content:'';flex:1;border-top:1px solid var(--border)}
#cloud-dialog #cloud-delete-section{margin:var(--space-6) 0;border:1px solid var(--border);border-radius:var(--radius-card);padding:0;background:var(--surface)}
#cloud-dialog #cloud-delete-section>summary{cursor:pointer;min-height:var(--control-height-touch);padding:var(--space-4) var(--space-5);font-size:var(--font-size-ui);line-height:var(--line-height-tight);font-weight:var(--font-weight-semibold);color:var(--ink)}
#cloud-dialog #cloud-delete-section>summary:hover{background:var(--color-surface-subtle)}
#cloud-dialog #cloud-delete-section[open]>summary{border-bottom:1px solid var(--border);margin-bottom:var(--space-5)}
#cloud-dialog #cloud-delete-section> :not(summary){margin-left:var(--space-5);margin-right:var(--space-5)}
#cloud-dialog #cloud-delete-section h3{font-family:var(--font-heading);font-size:var(--font-size-lead);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-top:0;margin-bottom:var(--space-4)}
#cloud-dialog #cloud-delete-section .account-delete-scope{padding-left:var(--space-5);font-size:var(--font-size-ui);line-height:var(--line-height-body);color:var(--ink)}
#cloud-dialog #cloud-delete-section li{margin:var(--space-3) 0}
#cloud-dialog #cloud-delete-section .account-delete-warning{padding:var(--space-3) var(--space-4);border-left:var(--space-1) solid var(--color-warning);background:var(--color-warning-surface);color:var(--color-warning);font-size:var(--font-size-ui);line-height:var(--line-height-body);margin-top:var(--space-5);margin-bottom:var(--space-5)}
#cloud-dialog #cloud-delete-section label{font-size:var(--font-size-ui);font-weight:var(--font-weight-medium);line-height:var(--line-height-body)}
#cloud-dialog #cloud-delete-section .account-delete-ack{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--control-height-touch);padding:var(--space-2) 0;margin-top:var(--space-4);margin-bottom:var(--space-4);cursor:pointer}
#cloud-dialog #cloud-delete-section .account-delete-ack input{width:var(--space-5);height:var(--space-5);min-height:var(--space-5);padding:0;flex:none;margin:var(--space-1) 0 0;accent-color:var(--focus)}
#cloud-dialog #cloud-delete-section .cloud-actions{gap:var(--space-3);padding:var(--space-4) 0 var(--space-5);border-top:1px solid var(--border)}
#cloud-dialog #cloud-delete-submit{color:var(--color-danger);border-color:var(--color-danger);background:var(--surface);font-weight:var(--font-weight-semibold);white-space:normal}
#cloud-dialog #cloud-delete-submit:hover:not(:disabled){background:var(--color-danger-surface)}
#cloud-dialog #cloud-delete-submit:disabled{opacity:.45;cursor:not-allowed}
#cloud-dialog #cloud-status:not(:empty){padding:var(--space-3) var(--space-4);border-left:var(--space-1) solid var(--color-success);background:var(--color-success-surface);color:var(--color-success);font-size:var(--font-size-ui);line-height:var(--line-height-body)}
#cloud-dialog #cloud-status[data-error=true]:not(:empty){border-color:var(--color-danger);background:var(--color-danger-surface);color:var(--color-danger)}
#cloud-dialog #cloud-delete-section #cloud-status:not(:empty){margin-bottom:var(--space-5)}
@media(max-width:480px){#cloud-dialog #cloud-delete-section .cloud-actions{flex-direction:column}#cloud-dialog #cloud-delete-section .cloud-actions button{width:100%}}