.cloud-status { position:fixed; bottom:12px; right:12px; z-index:1100; max-width:min(92vw,440px); padding:10px 16px; border:1px solid #bbb; border-radius:12px; background:#fff; color:#292929; font:600 15px/1.45 system-ui; box-shadow:0 3px 15px #0002; }
.cloud-status[data-state="error"] { border-color:#9e2638; color:#8b182b; }
.cloud-status[data-state="saving"] { border-color:#b88e39; }
.cloud-form { display:grid; gap:16px; max-width:540px; }
.cloud-form label { display:grid; gap:7px; font-size:18px; font-weight:600; }
.cloud-form .field { width:100%; box-sizing:border-box; font-size:18px; min-height:48px; }
.cloud-form button { min-height:48px; }
.cloud-code { font:700 19px/1.6 ui-monospace,monospace; letter-spacing:.07em; }
.cloud-message { font-size:17px; line-height:1.6; }
.cloud-tabs { margin:12px 0 22px; }
.cloud-student { padding:18px; margin:14px 0; }
.cloud-student .btn-row { flex-wrap:wrap; }
.cloud-small { font-size:16px; line-height:1.6; }
.cloud-notice { padding:14px; border-left:4px solid #ad3144; background:#fff; color:#282828; }
/* On phones, Netlify's own "Powered by Netlify" badge sits at the bottom right of the screen and used to cover this bar and its Retry button.
   Keep the bar at the top, just under the app header, where nothing of Netlify's can cover it. */
@media (max-width:760px){
  .cloud-status{ top:calc(64px + env(safe-area-inset-top,0px)); bottom:auto; left:12px; right:12px; max-width:none; }
}