html,body{height:100%;margin:0;font-family:Arial,sans-serif;background:#f5f5f3;color:#263437}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer;background:#fff;border:1px solid #a5b5b4;border-radius:8px;padding:10px 14px;color:inherit}input{padding:10px;border:1px solid #a5b5b4;border-radius:8px;width:100%}label{display:grid;gap:6px;margin:14px 0}a{color:#265d59}#account{max-width:520px;margin:8vh auto;padding:30px;border:1px solid #d9dfdc;border-radius:16px;background:white}#account h1{font-family:Georgia,serif;font-weight:400}#account button{margin:6px 6px 6px 0}#admin{max-width:1050px;margin:20px auto;padding:24px;background:#fff}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:12px;border-bottom:1px solid #ddd;overflow-wrap:anywhere}#message{white-space:pre-wrap;line-height:1.5}#save-state[data-error=true]{color:#8c2626;font-weight:bold}[hidden]{display:none!important}@media(max-width:600px){#account{margin:20px}#admin{padding:10px}td,th{padding:6px}}

body:has(#status:not([hidden])) {
  display: flex;
  flex-direction: column;
}
#status {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px clamp(16px, 4vw, 60px);
  background: #fff;
  border-bottom: 1px solid #eeede9;
  color: #202124;
  font: 500 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#save-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  min-width: 0;
  color: #52544e;
}
#save-state::before {
  content: "";
  flex: 0 0 7px;
  height: 7px;
  border-radius: 50%;
  background: #9eae68;
}
#save-state[data-error="true"]::before { background: currentColor; }
#status .account-toggle, #status .save-retry, #status .save-name {
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
  background: #f2f2ee;
  font-weight: 600;
}
#status .account-toggle span { margin-left: 6px; }
#status .account-toggle:hover, #status .save-retry:hover { background: #e8e9e0; }
#status .save-name { background: #f5dc68; }
#account-menu {
  inset: 45px clamp(16px, 4vw, 60px) auto auto;
  margin: 0;
  padding: 14px;
  width: min(260px, calc(100vw - 32px));
  border: 1px solid #eeede9;
  border-radius: 14px;
  background: #fff;
  color: #202124;
  box-shadow: 0 12px 36px #20212420;
}
#profile-form { margin-bottom: 12px; }
#profile-form label { margin-top: 0; }
.account-actions { display: grid; gap: 3px; }
.account-actions button {
  text-align: left;
  border: 0;
  padding: 9px 10px;
}
.account-actions button:hover { background: #f2f2ee; }
#workspace {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 0;
}