:root {
  --bg: #0b0c0f;
  --surface: #14161b;
  --line: #343740;
  --text: #f1f0ed;
  --muted: #9c9da5;
  --accent: #a56bff;
  --accent-strong: #7628dc;
  --danger: #ed7777;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.login-panel { display: flex; flex-direction: column; justify-content: center; width: min(560px, 100%); margin: 0 auto; padding: 54px clamp(24px, 6vw, 80px); }
.login-brand { display: inline-flex; align-items: center; gap: 13px; align-self: flex-start; margin-bottom: clamp(48px, 9vh, 94px); }
.login-brand > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #111218; }
.login-brand strong { font-size: 15px; }
.login-heading > p, .login-context > p { margin: 0 0 9px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: 0; line-height: 1.05; }
h1 { font-size: clamp(38px, 5vw, 58px); }
.login-heading > span { display: block; max-width: 440px; margin-top: 13px; color: var(--muted); line-height: 1.5; }
form { display: grid; gap: 17px; margin-top: 34px; }
form > label:not(.login-remember) { display: grid; gap: 7px; color: #c5c5ca; font-size: 12px; font-weight: 700; }
input:not([type="checkbox"]) { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 4px; background: #101217; color: var(--text); padding: 11px 12px; outline: none; }
.login-remember { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: -2px 0 0; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; }
.login-remember input[type="checkbox"] { width: 14px; height: 14px; min-height: 0; margin: 0; flex: 0 0 14px; accent-color: var(--accent); cursor: pointer; }
.login-remember span { line-height: 1.2; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { min-height: 48px; border: 1px solid #8f4ce8; border-radius: 4px; background: var(--accent-strong); color: white; padding: 11px 18px; cursor: pointer; font-weight: 800; }
button:disabled { opacity: .55; cursor: wait; }
.login-status { min-height: 24px; margin: 0; color: var(--danger); font-size: 13px; }
.login-install-app { align-self: flex-start; min-height: 40px; margin-top: 16px; border-color: var(--line); background: var(--surface); color: #d7d7db; font-size: 13px; }
.login-install-app:hover { border-color: var(--accent); color: white; }
.login-footnote { margin: auto 0 0; padding-top: 42px; color: #777983; font-size: 12px; line-height: 1.55; }
.login-context { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(38px, 7vw, 100px); border-left: 1px solid var(--line); background: #16131d url("assets/ear-editorial.jpg") center / cover no-repeat; isolation: isolate; }
.login-context::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 10, 16, .82); }
.login-context h2 { font-family: Georgia, serif; font-size: clamp(44px, 6vw, 82px); font-weight: 500; }
.login-context dl { width: min(520px, 100%); margin: 54px 0 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.login-context dl div { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.login-context dt { color: var(--accent); font-weight: 800; }
.login-context dd { margin: 0; color: #d1cfd4; }

.login-mode-toggle,
.login-auth-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101217;
  width: fit-content;
}
.login-mode-toggle button,
.login-auth-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
}
.login-mode-toggle button.is-active,
.login-mode-toggle button[aria-selected="true"],
.login-auth-tabs button.is-active,
.login-auth-tabs button[aria-selected="true"] {
  background: var(--accent-strong);
  color: white;
}
.login-field-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

/* Only one account mode form is visible at a time. */
.login-panel[data-account-mode="studio"] #personal-login-form,
.login-panel[data-account-mode="personal"] #studio-login-form,
.login-panel[data-account-mode="personal"] [data-install-app],
#studio-login-form[hidden],
#personal-login-form[hidden],
#personal-register-fields[hidden],
#personal-sign-in-fields[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .login-shell { display: block; }
  .login-panel { min-height: 100vh; }
  .login-context { display: none; }
}