.course-member-status[type="button"] {
  max-width: 180px;
  min-height: 34px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-member-status[type="button"]::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #61e7d8;
  box-shadow: 0 0 12px #61e7d866;
}

.course-member-status[type="button"]:hover { background: #123541; }
.course-member-status[type="button"]:focus-visible { outline: 2px solid #6ee2d8; outline-offset: 4px; }

.auth-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 32px;
  border: 1px solid #2c6874;
  border-radius: 24px;
  color: #f1fafc;
  background: linear-gradient(150deg, #10303d, #081c28);
  box-shadow: 0 30px 100px #0008;
  color-scheme: dark;
  overflow: auto;
}

.auth-dialog::backdrop { background: #010c14b8; backdrop-filter: blur(6px); }
.auth-dialog [hidden] { display: none !important; }
.auth-dialog button, .auth-dialog input { font: inherit; }
.auth-dialog button { cursor: pointer; }
.auth-dialog button:disabled { opacity: 0.65; cursor: wait; }
.auth-dialog button:focus-visible { outline: 2px solid #6ee2d8; outline-offset: 3px; }

.auth-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid #285362;
  border-radius: 12px;
  color: #c5eae9;
  background: #081e29;
  font-size: 24px !important;
}

.auth-eyebrow { color: #69e4da; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; }
.auth-dialog h2 { margin: 12px 0 8px; font-size: 26px; }
.auth-intro { margin: 0 0 26px; color: #9db5c3; font-size: 13px; line-height: 1.7; }
.auth-dialog form { display: grid; gap: 20px; }
.auth-dialog label { display: grid; gap: 9px; color: #d6e7ee; font-size: 14px; font-weight: 650; }
.auth-dialog input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #315461;
  border-radius: 12px;
  color: #f1fafc;
  background: #061925;
  outline: none;
}
.auth-dialog input:focus { border-color: #6ee2d8; box-shadow: 0 0 0 3px #6ee2d815; }
.auth-dialog input::placeholder { color: #718b9c; font-weight: 400; }
.auth-primary {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  color: #05222d;
  background: linear-gradient(110deg, #82eadd, #53cfd4);
  font-weight: 800 !important;
}
.auth-beta-note { margin: -4px 0 0; color: #8fa9b7; font-size: 12px; line-height: 1.8; }
.auth-error { margin: 18px 0 0; color: #ffc1b0; font-size: 13px; line-height: 1.7; }
.auth-account-name { margin: 0 0 8px; font-size: 22px; overflow-wrap: anywhere; }
.auth-account-username { margin: 0 0 24px; color: #9db5c3; font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .auth-dialog { padding: 26px 22px; border-radius: 20px; }
  .course-member-status[type="button"] { max-width: 120px; }
}