/* Shared identity from the native App's CradleMark and AppTheme. */
.app-brand-mark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 24%;
  background: #f5f7f4;
}

.brand-name {
  display: grid;
  gap: 2px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.brand-name small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .75;
}

#app-loading { color: #62716c; background: #f5f7f4; }
#app-loading .spinner { border-top-color: #005a5b; }

.login-page {
  --primary: #005a5b;
  --ring: #005a5b;
  --foreground: #292a28;
  --muted-foreground: #62716c;
  --border: #dee7e1;
  --input: #dee7e1;
  color: #292a28;
  background: #f5f7f4;
}

.login-brand-panel {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .08), transparent 32%),
    linear-gradient(140deg, #003f40, #005a5b);
}

.login-brand-copy h1 { line-height: 1.25; letter-spacing: -.04em; }
.login-brand-copy p { color: rgba(255, 255, 255, .78); }
.login-brand-footer { color: rgba(255, 255, 255, .65); }
.login-card { width: min(100%, 420px); }
.login-card .eyebrow { color: #005a5b; }
.login-card input {
  min-height: 52px;
  background: #fff;
  border-radius: 12px;
  font-size: 16px;
}
.login-card .button-primary { min-height: 52px; border-radius: 14px; }
.login-card .button-primary:hover { background: #003f40; }
.login-card .form-note { color: #62716c; }
.login-card :focus-visible { outline-color: #005a5b; }
.mobile-brand { margin-bottom: 34px; color: #005a5b; gap: 13px; }

.login-support-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}
.login-support-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #005a5b;
  font-size: 13px;
  text-decoration: none;
}
.login-support-links a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .login-page, .login-form-panel { min-height: 100dvh; }
  .login-form-panel { padding: 32px 22px; }
}