.cloud-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 20px; background:#fff; border-bottom:1px solid #dce7ef; font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:#223047; }
.cloud-bar a { color:#223047; text-decoration:none; padding:6px 10px; border-radius:6px; }
.cloud-bar a[aria-current] { background:#ddf8ee; font-weight:700; }
.cloud-bar [role="status"] { margin-left:auto; font-size:13px; }
.cloud-bar button, .cloud-login button { padding:8px 14px; border:1px solid #dce7ef; background:#ddf8ee; color:#223047; border-radius:6px; cursor:pointer; }
.cloud-login { width:min(440px,calc(100% - 32px)); border:1px solid #dce7ef; border-radius:12px; padding:24px; color:#223047; font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
.cloud-login::backdrop { background:rgba(34,48,71,.4); }
.cloud-login p { line-height:1.7; }
.cloud-login input { display:block; width:100%; margin-top:8px; padding:10px; box-sizing:border-box; border:1px solid #64748b; border-radius:6px; }
.cloud-login form>div { display:flex; justify-content:flex-end; gap:12px; }
.cloud-error { color:#a52820 !important; }
.cloud-loading .app { display:none; }
.cloud-loading-panel { margin:48px auto; width:min(520px,calc(100% - 32px)); padding:28px; background:#fff; color:#223047; border:1px solid #dce7ef; border-left:5px solid #45c49c; border-radius:8px; }
.cloud-loading-panel[hidden] { display:none; }
.cloud-loading-panel h1 { margin:16px 0 12px; font-size:24px; }
.cloud-loading-panel p { color:#64748b; line-height:1.8; }
.cloud-loading-panel button { padding:10px 20px; background:#ddf8ee; border:1px solid #45c49c; border-radius:6px; color:#223047; }
.cloud-spinner { width:28px; height:28px; border:3px solid #ddf8ee; border-top-color:#45c49c; border-radius:50%; animation:cloud-spin 1s linear infinite; }
.cloud-load-error .cloud-spinner { display:none; }
.cloud-login button:disabled { cursor:not-allowed; opacity:.65; }
@keyframes cloud-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .cloud-spinner { animation:none; } }
@media(max-width:600px) { .cloud-bar { gap:4px; padding:8px; } .cloud-bar [role="status"] { flex-basis:100%; margin:4px 10px; } }