body[data-cloud-state="loading"] .app-shell,
body[data-cloud-state="login"] .app-shell,
body[data-cloud-state="error"] .app-shell { display: none; }
.cloud-loading, .cloud-load-error { max-width: 620px; margin: 16vh auto; padding: 32px; text-align: center; line-height: 1.9; }
.cloud-load-error h1 { font-size: 26px; }.cloud-load-error p { margin: 16px 0; }
.cloud-login { min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; isolation: isolate; }
.cloud-login-world { position: fixed; z-index: -1; inset: 0; background: linear-gradient(#0c130fb8,#0c130ff5 75%),url("assets/zhongzhou-landscape.jpg") 55% 15%/cover; }
.cloud-login-window { width: min(100%,460px); padding: 36px 38px; border: 1px solid transparent; border-image: url("assets/legend-window-frame.svg") 48 / 24px / 0 stretch; background: #20241e; text-align: center; }
.cloud-login-logo { width: 82px; height: 82px; margin: 0 auto 12px; object-fit: contain; }
.cloud-login-window h1 { font-size: 29px; letter-spacing: .12em; }
.cloud-login-intro { color: #b7b6a5; font-size: 14px; margin: 12px 0 28px; }
.cloud-auth-tabs { display: flex; gap: 5px; padding: 4px; border: 1px solid #716144; margin-bottom: 24px; }
.cloud-auth-tabs button { flex: 1; min-height: 38px; padding: 7px 5px; background: transparent; color: #bfc4ae; border: 1px solid transparent; font-size: 13px; }
.cloud-auth-tabs button[aria-pressed="true"] { background: #633a27; color: #f3dcaa; border-color: #a18451; }
#cloud-auth-form { display: grid; gap: 18px; text-align: left; }
#cloud-auth-form .field input { min-height: 46px; width: 100%; font-size: 16px; }
.cloud-code-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.cloud-code-field .button { min-height: 46px; }
.cloud-auth-submit { width: 100%; min-height: 46px; font-size: 15px; }
.cloud-auth-error { color: #efac91; font-size: 13px; min-height: 20px; line-height: 1.6; }
.cloud-account-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid #575b43; color: #b3b8a1; font-size: 12px; line-height: 1.9; }
.cloud-account-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 32px 10px 264px; border-bottom: 1px solid #665c3f; background: #1b241c; font-size: 12px; }
.cloud-user { color: #dcd5b9; font-variant-numeric: tabular-nums; }
#cloud-sync-status { color: #b3d2b6; }
.cloud-account-actions { display: flex; gap: 12px; margin-left: auto; }
.cloud-account-actions .button { padding-inline: 4px; }
.cloud-sync-help { padding: 14px 32px 14px 264px; border-bottom: 1px solid #a17c46; background: #332b1b; color: #eed8a7; font-size: 13px; line-height: 1.8; }
.cloud-sync-help > p { margin-bottom: 10px; }
.cloud-dialog { width: min(720px,calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 28px; border: 1px solid #a18451; background: #20271f; color: #e8e2cb; }
.cloud-dialog::backdrop { background: #080e0bd9; }
.cloud-dialog .section-heading { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.cloud-dialog h2 { font-size: 20px; }.cloud-dialog > p { color: #bac2aa; font-size: 13px; line-height: 1.8; }
.cloud-version-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid #4e553f; font-size: 13px; }
.cloud-version-row > span { margin-right: auto; }.cloud-dialog input[type="file"] { max-width: 100%; margin-top: 22px; }
@media(max-width:1050px) { .cloud-account-bar { padding-left: 218px; padding-right: 22px; }.cloud-sync-help { padding-left: 218px; padding-right: 22px; } }
@media(max-width:720px) { .cloud-account-bar { padding: 9px 18px; gap: 3px 12px; }.cloud-sync-help { padding: 12px 18px; }.cloud-account-actions { gap: 10px; }.cloud-login-window { padding: 32px 24px; }.cloud-login { padding: 24px 16px; }.cloud-dialog { padding: 22px 18px; }.cloud-account-bar .button { min-height: 36px; } }

body:has(.cloud-dialog[open]) { overflow: hidden; }