.app-body *,
.app-body *::before,
.app-body *::after {
  box-sizing: border-box;
}

.app-body a {
  color: var(--pl-accent);
  text-underline-offset: 0.18em;
}

.app-body a:hover {
  color: var(--pl-accent-hover);
}

.app-body :focus-visible {
  outline: 3px solid var(--pl-focus);
  outline-offset: 3px;
}

.app-body .btn,
.app-body button,
.app-body input,
.app-body textarea,
.app-body select {
  font: inherit;
}

.app-body .button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.78rem 1.15rem;
  border: 1px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-sm);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--pl-motion-fast) var(--pl-ease), background var(--pl-motion-fast) var(--pl-ease), color var(--pl-motion-fast) var(--pl-ease), transform var(--pl-motion-fast) var(--pl-ease);
}

.app-body .button:hover,
.app-body .button:focus-visible {
  transform: translateY(-1px);
}

.app-body .button-primary {
  border-color: var(--pl-accent);
  color: var(--pl-on-accent);
  background: var(--pl-accent);
}

.app-body .button-primary:hover,
.app-body .button-primary:focus-visible {
  border-color: var(--pl-accent-hover);
  color: var(--pl-on-accent);
  background: var(--pl-accent-hover);
}

.app-body .button-secondary {
  color: var(--pl-ink);
  background: var(--pl-surface-raised);
}

.app-body .button-secondary:hover,
.app-body .button-secondary:focus-visible {
  border-color: var(--pl-accent);
  color: var(--pl-ink);
  background: var(--pl-surface-soft);
}

.app-body .button-danger {
  border-color: color-mix(in srgb, var(--pl-danger) 62%, var(--pl-border));
  color: var(--pl-danger);
  background: color-mix(in srgb, var(--pl-danger) 11%, var(--pl-surface));
}

.app-body .button-danger:hover,
.app-body .button-danger:focus-visible {
  border-color: var(--pl-danger);
  color: var(--pl-ink);
  background: color-mix(in srgb, var(--pl-danger) 18%, var(--pl-surface));
}

.app-body .btn,
.app-body .btn-default,
.app-body .btn-secondary,
.app-body input[type="submit"] {
  min-height: 44px;
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-sm);
  color: var(--pl-ink);
  background: var(--pl-surface-raised);
  box-shadow: none;
  font-weight: 700;
  text-shadow: none;
  transition: border-color var(--pl-motion-fast) var(--pl-ease), background var(--pl-motion-fast) var(--pl-ease), transform var(--pl-motion-fast) var(--pl-ease);
}

.app-body .btn:hover,
.app-body .btn:focus-visible,
.app-body .btn-default:hover,
.app-body .btn-default:focus-visible,
.app-body .btn-secondary:hover,
.app-body .btn-secondary:focus-visible,
.app-body input[type="submit"]:hover,
.app-body input[type="submit"]:focus-visible {
  color: var(--pl-ink);
  border-color: var(--pl-accent);
  background: var(--pl-surface-soft);
  transform: translateY(-1px);
}

.app-body input[type="submit"] {
  color: var(--pl-on-accent) !important;
  border-color: var(--pl-accent) !important;
  background: var(--pl-accent) !important;
}

.app-body input[type="submit"]:hover,
.app-body input[type="submit"]:focus-visible {
  color: var(--pl-on-accent) !important;
  border-color: var(--pl-accent-hover) !important;
  background: var(--pl-accent-hover) !important;
}

.app-body .form-group {
  margin-bottom: var(--pl-space-4);
  text-align: left;
}

.app-body label,
.app-body .control-label {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--pl-ink);
  font-weight: 700;
}

.app-body .form-control,
.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.app-body textarea,
.app-body select {
  width: 100%;
  min-height: 46px;
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-sm);
  color: var(--pl-ink);
  background: var(--pl-field);
  box-shadow: none;
  text-shadow: none;
}

.app-body textarea {
  min-height: 8rem;
  resize: vertical;
}

.app-body .form-control:focus,
.app-body input:focus,
.app-body textarea:focus,
.app-body select:focus {
  border-color: var(--pl-accent);
  outline: 3px solid var(--pl-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.app-body .help-block,
.app-body .form-text {
  display: block;
  margin-top: 0.4rem;
  color: var(--pl-muted);
  font-size: 0.875rem;
}

.app-body .has-error .control-label,
.app-body .has-error .help-block {
  color: var(--pl-danger);
}

.app-body .has-error .form-control {
  border-color: var(--pl-danger);
}

.app-body .checkbox label,
.app-body .radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-2);
  font-weight: 500;
}

.app-body .checkbox input,
.app-body .radio input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--pl-accent);
}

.app-body .box-container,
.app-body .box-container-profile {
  padding: var(--pl-space-5);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-md);
  color: var(--pl-ink);
  background: color-mix(in srgb, var(--pl-surface-raised) 92%, transparent);
  box-shadow: var(--pl-shadow-sm);
  text-shadow: none;
  backdrop-filter: blur(16px);
}

.site-flashes .alert {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-3);
  margin: 0;
  padding: 0.72rem 0.72rem 0.72rem 0.9rem;
  border: 1px solid var(--pl-border-strong);
  border-left-width: 3px;
  border-radius: var(--pl-radius-sm);
  color: var(--pl-ink);
  background: var(--pl-surface-raised);
  box-shadow: var(--pl-shadow-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  text-shadow: none;
}

.site-flashes .alert-success {
  border-left-color: var(--pl-success);
  background: color-mix(in srgb, var(--pl-success) 7%, var(--pl-surface-raised));
}

.site-flashes .alert-danger {
  border-left-color: var(--pl-danger);
  background: color-mix(in srgb, var(--pl-danger) 7%, var(--pl-surface-raised));
}

.site-flashes .alert-warning,
.site-flashes .alert-info {
  border-left-color: var(--pl-accent);
  background: color-mix(in srgb, var(--pl-accent) 7%, var(--pl-surface-raised));
}

.site-flashes .alert + .alert {
  margin-top: var(--pl-space-3);
}

.site-flashes .alert .alert-dismiss {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin: -0.25rem -0.2rem -0.25rem 0;
  padding: 0.32rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--pl-muted);
  background: transparent;
  appearance: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
  transition: color var(--pl-motion-fast) var(--pl-ease), border-color var(--pl-motion-fast) var(--pl-ease), background var(--pl-motion-fast) var(--pl-ease);
}

.site-flashes .alert .alert-dismiss:hover,
.site-flashes .alert .alert-dismiss:focus-visible {
  color: var(--pl-ink);
  border-color: var(--pl-border);
  background: var(--pl-surface-soft);
}